小编ghy*_*ybs的帖子
Mapbox Tile Layer中的街道标签太小
我有以下Leaflet地图:JSFiddle链接
<div id="mapid" style="height: 300px;"></div>
<script>
var mapboxTiles = L.tileLayer(mapBoxUrl, {
attribution: attributionText
});
var map = L.map('mapid')
.addLayer(mapboxTiles)
.setView([42.888284, -78.877222], 16);
</script>
街道标签的字体大小非常小,无法读取,放大时,字体大小会变小.有没有办法控制字体大小？
推荐指数
解决办法
查看次数
将 OpenStreetMaps 与 Cordova 集成
我想知道你们是否知道如何将开放街道地图（OSM）与科尔多瓦一起使用？这几天都在找..
\n\n我能得出的结论是，我不应该直接使用 OSM 的 API，因为如果我有太多调用，他们的服务器会阻止我。所以有免费的开源名称，例如 \n1.Openlayers\n2 .允许我免费使用 OSM 的传单..但是我遵循了他们的所有教程，但我无法让地图显示在模拟器上..
\n\n我使用的是 Visual studios 2015 社区版。并与科尔多瓦一起工作。涉及 HTML、CSS 和 JavaScript(jQuery)..但我根本看不到地图..
\n\n\n\n
编辑 2、3、4
\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Test</title>\n <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"\n integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="\n crossorigin=""/>\n <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"\n integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="\n crossorigin=""></script>\n <style>\n #mapid { \n height: 180px; \n }\n </style>\n </head>\n\n <body id="Main">\n\n <div id="mapid"></div>\n\n <script>\n var mymap = L.map(\'mapid\').setView([51.505, -0.09], 13);\n\n L.tileLayer(\'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={mytoken}\', {\n attribution: \'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery \xc2\xa9 <a href="http://mapbox.com">Mapbox</a>\',\n maxZoom: 18,\n id: \'mapbox.streets\',\n accessToken: \'mytoken\'\n }).addTo(mymap);\n …推荐指数
解决办法
查看次数
Leaflet-marker 单击事件工作正常，但回调函数中未定义该类的方法
我正在使用以下代码click为某些传单标记（其中我不知道先验数字）的事件添加回调函数：
newArray.forEach(p => {
let marker = L.marker(latLng).on('click', this.markerClick).addTo(newMap)
marker.bindPopup(content)
marker.addTo(newMap)
marker.openPopup()
})
在类中有markerClick执行此操作的函数：
markerClick(e) {
console.log("Inside marker click " + e.latlng.lat + " " + e.latlng.lng)
this.displayError("You clicked on the marker")
}
将console.log正在打印的正确的价值观lat和lng标记，但是打电话时displayError运行时引发错误说：
this.displayError 不是函数
这是一个在类中声明的函数，我用来根据我的需要显示带有自定义消息的祝酒词。这是代码：
displayError(messageErr: string) {
let toast = this.toastCtrl.create({
message: messageErr,
duration: 3000,
position: 'top'
});
toast.present();
}
为什么说那不是函数？
编辑：它不仅仅是displayError，类的每个函数都给出了这个消息。
推荐指数
解决办法
查看次数
使用传单地图上比例尺的值
如何从添加的比例尺中获取值：
L.control.scale({position: 'bottomleft'}).addTo(map);
无论它显示什么比例，如何将其分配给 JavaScript 中的变量？
推荐指数
解决办法
查看次数
如何将自定义 UI 添加到传单地图？
我正在使用 Leaflet 创建一个地图游戏（非常基本）。
基本上我想<div>在地图上添加一个输入，这样当用户输入一个位置时，它就会平移到地图上的坐标。
我尝试创建元素并附加到地图中，<div>其中包含以下变体：
var d1 = document.getElementsByClassName('leaflet-control-container')[0];
d1.insertAdjacentHTML('afterbegin', '<div id="two">two</div>');
但是<div>显示在地图后面并且图像覆盖了它。
我怎样才能让它像缩放控制一样显示？
推荐指数
解决办法
查看次数
如何每 5 秒更新一次传单标记
我正在制作传单地图和标记。
我从 JSON 获取标记 latlng 并正确显示。
getLatLng()
function getLatLng() {
var details = '/equipment/api/getLatLong';
$.ajax({
url: details,
method: 'get'
}).done(function(response) {
$('.subSection').html('').append('<section><button type="button" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button></section>');
var equipmentDetails = response.data.filters;
console.log(equipmentDetails)
$.each(equipmentDetails, function(i, value) {
L.marker([value.latitude, value.longitude]).addTo(map).bindPopup('<b><span> Name:</span>' + value.name + '</b>');
})
});
}
setInterval(function() {
getLatLng();
}, 5000)
我每 5 秒刷新一次方法。
所以我需要在更新的 latlng 中显示标记，并且应该隐藏旧标记。
setInterval(function() {
//L.marker.setOpacity(0);
//L.markerClusterGroup()
//markers.clearLayers();
//map.removeLayer(L.marker);
//markers.removeLayer()
//L.marker().removeTo(map);
getLatLng();
}, 5000)
我尝试了所有选项来实现这一目标，但我做不到。
有没有其他方法可以做到？
否则我应该再定义一个数组来存储初始 latlng 值，然后每次检查 latlng 是否更改（在这种情况下，我只能替换更新的 latlng 标记，对吗？不需要每次都替换所有标记，对吗？）
推荐指数
解决办法
查看次数
从父事件触发子组件方法
我是VueJS和JavaScript的新手,非常感谢您的帮助.
我的方法" greet"不起作用,我不确定为什么.当我点击"更改为栏"按钮时,我收到错误:
[Vue警告]:属性或方法"greet"未在实例上定义,但在呈现期间引用.通过初始化属性,确保此属性在数据选项或基于类的组件中是被动的.请参阅:https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
在发现
Run Code Online (Sandbox Code Playgroud)---> <Chatjsvue> at src\components\vueChartjs\Chatjsvue.vue <App> at src\App.vue <Root>
chartjs.vue
<template src="../../views/chartjshtml/chartsjs.html"></template>
<script>
import LineChart from '@/assets/javascripts/chartjsline'
export default {
components: {
'line-chart': LineChart
}
}
</script>
chartsjs.html
<div class="wrapper">
<div>
<ul>
<li><button v-on:click="greet()">change to bar</button></li>
<li><line-chart></line-chart></li>
</ul>
</div>
</div>
chartsjsline.js
import { Line } from 'vue-chartjs'
export default {
extends: Line,
data() {
return {
datacollection: {
//Data to be represented on x-axis
labels: ['January', 'February', 'March', 'April', 'May', 'June', …推荐指数
解决办法
查看次数
GeoJSON MultiPoint没有显示在地图上
var feature = {
"type": "feature",
"properties": {
"style": {
"color": "#004070",
"weight": 4,
"opacity": 1
}
},
"geometry": {
"type": "MultiPoint",
"coordinates": [[
[0.25, 51.47],
[0.26, 51.47],
[0.27, 51.47]
]]
}
};
var geojsonLayer = new L.GeoJSON(feature);
map.addLayer(geojsonLayer);
我正在尝试在地图上显示以上三点。为什么标记不出现？
推荐指数
解决办法
查看次数
使图像叠加的地图视图适合容器传单的大小
我正在使用 React Leaflet 创建自定义地图。
当前正在渲染卡片（图像叠加），但它不会填充放置卡片的容器。
容器的大小是严格设置的，我希望地图尽可能填充容器。所有使用 CSS 调整大小的尝试都失败了。
实例： https: //codesandbox.io/s/dark-worker-8qbzfr
我的代码：
import "./styles.css";
import { MapContainer, ImageOverlay } from "react-leaflet";
import "leaflet/dist/leaflet.css";
const M = ({ width, height, zoom, center }) => {
const wh = [width, 500];
const origin = [0, 0];
const bounds = [origin, wh];
return (
<div style={{ width: "1100px", height: "600px" }}>
<MapContainer
style={{ height: "100%", minHeight: "100%" }}
bounds={zoom ? undefined : bounds}
boundsOptions={{
padding: [0, 0]
}}
maxBounds={bounds}
zoom={center ? zoom : …推荐指数
解决办法
查看次数
全球地图消失
我在Leaflet.js中使用OpenStreetMap .
我有一张带有室内照片的地图.问题是当我放大,街道消失.你知道什么可以解决这个问题吗？技巧或提示!
编辑:
// Load the Map
this.map_ = L.map($(selector)[0], {
center: [
48.8459382,
2.2863024,
],
maxZoom: 24,
zoom: 20,
});
推荐指数
解决办法
查看次数
更新geojson的属性以将其与传单一起使用
我需要使用leaflet.js将地图添加到我的网站。该站点具有一个管理视图，管理员可以在其中添加标记，并向每个标记添加描述和图像。
我使用了leaflet.draw插件，并在创建事件上尝试更新event.layer.toGeoJSON()用来添加一些属性（例如图像和文本）的GeoJSON对象，但是没有运气。
谁可以帮我这个事？
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
map = new L.Map('map', {
layers: [osm],
center: new L.LatLng(31.9500, 35.9333),
zoom: 15
}),
drawnItems = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
}));
map.on('draw:created', function(event) {
var layer = event.layer;
var json = event.layer.toGeoJSON();
json.properties.desc = null;
json.properties.image = null;
drawnItems.addLayer(L.GeoJSON.geometryToLayer(json));
addPopup(layer);
});
function addPopup(layer) {
var content = '<input id="markerDesc" type="text"/ onblur="saveData(layer);">';
layer.bindPopup(content).openPopup(); …推荐指数
解决办法
查看次数
使用多个标记群集组显示重叠的群集
我正在使用几个L.markerClusterGroup({})，以便可以在“图层控件”中进行切换。
但是群集彼此隐藏。
我希望能够获得两个群集的总数。
我想念什么？
推荐指数
解决办法
查看次数
如何在Leaflet ImageOverlay中使用base64字符串而不是URL
我正在使用ImageOverlay图层使用Leaflet在地图上打印叠加图像.如果我使用可在线访问的图像,即使用Leaflet 示例:
var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
一切正常.但是,我想使用base64编码的字符串作为图像.此字符串在我的脚本中的其他位置预先计算.
我应该如何插入这样的字符串而不是URL路径？
PS:我正在使用angularjs.
推荐指数
解决办法
查看次数
标签 统计
leaflet ×12
javascript ×6
geojson ×2
angularjs ×1
cordova ×1
css ×1
gis ×1
jquery ×1
leaflet.draw ×1
mapbox ×1
marker ×1
onclick ×1
openlayers ×1
reactjs ×1
vue.js ×1