标签: leaflet
多变量javascript
我想为我的地图添加多个属性,但一次只能使用一个属性:
var map = L.map('map', {zoomControl: false}, {dragging: false})
这不起作用.我不知道Javascript,所以它可能只是一个语法错误.
推荐指数
解决办法
查看次数
如何通过单击按钮更改geojson样式
您好基于这个传单教程http://leafletjs.com/examples/choropleth.html我正在尝试创建20个按钮,以便我可以更改行:fillColor:getColor(feature.properties.density)到不同(例如通过按btn#1 fillColor:getColor(feature.properties.btn1),btn#2 fillColor:getColor(feature.properties.btn1)等
function style(feature) {
return {
fillColor: getColor(feature.properties.density),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
L.geoJson(statesData, {style: style}).addTo(map);
我想要的只是按下一个按钮,显示一个不同的geojson属性.
推荐指数
解决办法
查看次数
Mapbox.js以错误的顺序返回tile
在最新的Chrome浏览器中使用Mapbox-gl.js时,一切正常.当我想使用默认的mapbox.js实现时,地图图块会混淆并显示完全错误.见截图
我完全不知道为什么这对mapbox.js不起作用,而我没有遇到mapbox-gl.js的任何问题
推荐指数
解决办法
查看次数
从另一个数组更新对象数组
我的主要任务是更新地图上的标记.
符号:
在地图上实时显示的标记:
var markers = [
{ 'lat':10, 'lng':10, 'type':'simple'},
{ 'lat':20, 'lng':20, 'type':'simple'},
{ 'lat':40, 'lng':40, 'type':'cluster'}
]
应该在地图上的新标记:
var newMarkers = [
{ 'lat':10, 'lng':10, 'type':'simple'},
{ 'lat':20, 'lng':20, 'type':'simple'},
{ 'lat':30, 'lng':30, 'type':'simple'},
{ 'lat':50, 'lng':50, 'type':'simple'}
]
因此,问题被简化为我想要找到解决方案的子任务:
更新对象数组 - markers来自另一个对象数组 - newMarkers.
因此,需要使用markers数组执行以下操作:
- 删除对象
markers未在newMarkers(由三个属性相比:lat,lng,type). - 从对象添加
newMarkers到markers,如果不存在(通过比较lat,lng).如果标记存在(由两个属性: …
推荐指数
解决办法
查看次数
宣传单:平移,居中,缩放地图到标记位置
我是Leaflet的新手,到目前为止玩得很开心.我有一个交互式地图,在世界各地有170个左右的标记.每个标记在弹出窗口中都有一个标题.我还想在弹出窗口中添加一个"缩放到"链接.当用户点击缩放到时,我希望地图以标记为中心并放大到某个缩放级别(见图)
标记在PHP中生成为带有标题和纬度/长度的标记数组,并注入到名为"items"的javascript var中.
for (var i = 0; i < items.length; i++) {
marker = new L.marker([items[i][1],items[i][2]])
.bindPopup(items[i][0])
.addTo(map);
}
推荐指数
解决办法
查看次数
如何在传单Map R上创建一个等值线
问题
我加载了英国的shapefile,没问题.让我们称呼它FILE1.我还有一个包含2列的数据框文件:经度,纬度.我打电话给这个FILE2.我试图绘制FILE2shapefile地图上的坐标FILE1并创建一个等值区域图
我也收到以下错误:
polygonData.default(data)出错:不知道如何从类tbl_df的对象获取路径数据
码
我从这个问题中得到了代码:Choropleth使用传单包在R中进行映射 并对其进行调整以适合我的数据
#Plot the Leaflet map----
mymap <- leaflet() %>%
addProviderTiles("OpenStreetMap.Mapnik") %>%
addPolygons(data = coords, #This is data frame of U.K long and lat
fillColor = ~palette(file$TotalByPostcode),
fillOpacity = 0.6,
color = "darkgrey",
weight = 1.5,
popup = popup1)%>%
addLegend(position = 'topleft',
colors = c('#fee0d2',
'#fcbba1',
'#fc9272',
'#fb6a4a',
'#ef3b2c',
'#cb181d',
'#a50f15',
'#67000d'),
labels = c('0',"","","","","","",'100'),
opacity = 0.6,
title = "Totals")
print(map)
这是我的数据框:
推荐指数
解决办法
查看次数
宣传单/ OSM地图无法在我的网站上使用,为什么？
stackoverflow上的某个人试图帮助我在我的网站上实现OSM.代码snippit在这里运行正常,但我的网站页面上没有显示任何内容,请访问www.livehazards.com/sidebar-test.有谁知道问题是什么.谢谢
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#mapid { position:absolute; top:0%; bottom:0%; left:0%; width:100%; }
</style>
</head>
<body>
<div id='mapid'></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
maxZoom: 18,
});.addTo(mymap);
</script>
</body>
</html>
推荐指数
解决办法
查看次数
如何在Stamen地图中使用Leaflet.js插件？
我正在尝试将以下Leaflet.js滑块添加到我的地图中：https : //github.com/Eclipse1979/leaflet-slider
我最初只是在安装Carto时安装了传单
<!-- cartodb.js comes with Leaflet @0.7 and jQuery -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
但是，当我尝试安装更高版本的Leaflet以使用Slider时，出现以下类型错误：
TypeError: L.StamenTileLayer is not a constructor
我尝试使用快速入门指南安装Leaflet：
<!-- cartodb.js comes with Leaflet @0.7 and jQuery -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
并直接从插件主目录安装文件
<link rel="stylesheet" href="leaflet.css">
<link rel="stylesheet" href="example.css">
<link rel="stylesheet" href="leaflet-slider.css">
<script src="leaflet.js"></script>
<script src="leaflet-slider.js"></script>
两种情况都会导致相同的错误。我使用以下内容加载雄蕊层：
var map = L.map('map').setView([51.47, 0.25], 10);
map.on('click', onMapClick);
//create a tile layer for our toner basemap
var tonerLayer = new L.StamenTileLayer("toner");
map.addLayer(tonerLayer);
我使用以下代码添加了微调器：
slider = L.control.slider(function(value) …推荐指数
解决办法
查看次数
如何在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.
推荐指数
解决办法
查看次数
如何更改折线的笔触颜色？
我的Web应用程序允许用户在其上绘制折线。我想为用户提供更改折线的笔触颜色的选项。
我在控制台日志中查看了折线对象。在options属性中，有一个称为color的属性。我已经试过了。
selectedLayer.options.color = "#2196F3";
和这个。
selectedLayer.color = "#2196F3";
和这个。
selectedLayer.setStyle({ color: "#2196F3"});
笔触颜色应该已更改，但未更改。创建折线后，设置折线笔触颜色的正确方法是什么？据我所知，这与多边形的fillColor属性无关。
推荐指数
解决办法
查看次数
标签 统计
leaflet ×10
javascript ×7
algorithm ×1
angularjs ×1
arrays ×1
cartodb ×1
choropleth ×1
d3.js ×1
leaflet.draw ×1
lodash ×1
map ×1
mapbox ×1
pan ×1
r ×1
stamen-maps ×1
syntax ×1
wordpress ×1
zoom ×1