标签: leaflet
如何在Leaflet地图多边形上触发事件？
我正在试图弄清楚如何手动触发Leaflet多边形的事件(通过GeoJSON加载).
简而言之,我有一张带有多个多边形的Leaflet地图.我还在地图外部有一个常规超链接,当点击它时,应该触发特定多边形上的鼠标悬停事件(或任何事件).
如何为所有多边形分配ID,以便我可以将超链接绑定到特定多边形的事件？或者这甚至是最合乎逻辑的做法？
最终,我正在尝试创建一个包含大量多边形的地图以及与每个多边形相关联的HTML文本标签表.单击HTML表格文本时,我想在地图多边形上触发事件(反之亦然).我只是不知道如何引用每个多边形.
这是我非常简化的HTML:
<body>
<div id="map" style="height: 550px; width:940px"></div>
<a href="#" id="testlink">Click to trigger a specific polygon mouseover event</a>
</body>
这是我非常简化的JS:
$(document).ready(function () {
// build the map and polygon layer
function buildMap(data) {
var map = new L.Map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/***yourkeyhere***/66267/256/{z}/{x}/{y}.png',
cloudmadeAttribution = '',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var mapLoc = new L.LatLng(43.675198,-79.383287);
map.setView(mapLoc, 12).addLayer(cloudmade);
var geojsonLayer = new L.GeoJSON(null, {});
geojsonLayer.on("featureparse", function (e){
// apply the polygon style
e.layer.setStyle(polyStyle);
(function(layer, properties) …推荐指数
解决办法
查看次数
宣传单进一步放大并拉伸瓷砖
当我在地图上放大得足够远时,TileLayer消失了,我看到一堆瓷砖说"地图数据尚未可用".我相信这些瓷砖可能来自提供商,但我不确定(我使用的是ESRI WorldImagery数据集).
有没有办法,在某个缩放级别,只是强制瓷砖拉伸,而不是请求该缩放级别的瓷砖？我有一些模糊,但我确实需要进一步放大.
我尝试使用zoomOffset选项,但每当我放置0以外的东西时,我的瓷砖就永远不会加载(全灰色).
谢谢!
推荐指数
解决办法
查看次数
寻找Leaflet多边形的中心？
我在我创建的地图上有一堆传单多边形.每个多边形代表不同的东西 根据用户所在的页面,弹出窗口中会显示一组特定信息.我需要找到一种方法,使"popup"气泡在它所代表的多边形的中心打开.
使用以下代码绘制每个多边形:
var L20 = [
[74.0995, -99.92615],
[74.14008, -99.4043],
[74.07691, -99.33838],
[74.03617, -99.86023]
];
var L19 = [
[74.02559, -99.84924],
[74.06636, -99.32739],
[74.0029, -99.26147],
[73.96197, -99.77783]
];
var L18 = [
[73.95142, -99.76684],
[73.99235, -99.25048],
[73.92889, -99.18456],
[73.8878, -99.69543]
];
var set1 = L.polygon([L20, L19, L18], {
color: "#fff",
weight: 1,
stroke: true,
opacity: 0.05,
fillColor: "#346B1F",
}).addTo(map);
使用以下代码绘制弹出窗口:
var popup = L.popup({})
.setLatLng([73.64017, -100.32715])
.setContent(content).openOn(map);
var popup = L.popup();
所以我需要找到一种方法.setLatLang来确定或给出多边形的中心.
我想出了3个可能有用的解决方案,不知道如何去做.
找到一种方法来使用多边形的坐标来确定弹出窗口打开的多边形的中心.
调用多边形的一个点,然后偏移弹出窗口的位置.
对每个多边形使用id,因此每个弹出窗口都知道可以打开的框区域(多边形).
有谁可以帮助我吗？
推荐指数
解决办法
查看次数
如何使用R中的Leaflet将两个坐标与一条线连接起来
我试图用宣传单封装中的R画一个放大器和连接给出下表中的经度和纬度信息的标记.
| Observation | InitialLat | InitialLong | NewLat | NewLong |
|-------------|------------|-------------|-----------|-----------|
| A | 62.469722 | 6.187194 | 51.4749 | -0.221619 |
| B | 48.0975 | 16.3108 | 51.4882 | -0.302621 |
| C | 36.84 | -2.435278 | 50.861822 | -0.083278 |
| D | 50.834194 | 4.298361 | 54.9756 | -1.62179 |
| E | 50.834194 | 4.298361 | 54.9756 | -1.62179 |
| F | 50.834194 | 4.298361 | 51.4882 | -0.302621 |
| … 推荐指数
解决办法
查看次数
Mapbox瓷砖和Leafletjs
我正在尝试在地图上加载一些额外的图块层,但我无法弄明白.我目前拥有的那些我只感谢有人提供了一个教程,但没有说明其他的选项是什么.有人可以帮我弄这个吗？
var mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}';
var accessToken = 'mySuperSecretToken';
var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox.light', attribution: '', maxZoom: 20, accessToken: accessToken}),
streets = L.tileLayer(mapboxUrl, {id: 'mapbox.streets', attribution: '', maxZoom: 20, accessToken: accessToken});
我似乎无法弄清楚如何获得任何额外的图层,甚至使用我今天收到的电子邮件的新街道版本.
推荐指数
解决办法
查看次数
如何在'popupopen`事件中识别Leaflet的标记？
单击标记时,我需要执行一些代码,找到id与被单击的标记对应的代码,从后端API检索数据,然后将新检索的数据添加到content将打开的弹出窗口中.
能够在标记上收听点击事件的唯一方法是
map.on('popupopen', function(e){
// How to retrieve marker?
// eg: Assign an id on creation, retrieve it now during popupopen
};)
我怎样才能找出这是哪个标记？是否可以为id每个标记添加属性,然后id在popupopen事件期间检索它？
推荐指数
解决办法
查看次数
如何使用传单js在地图上精确放置div元素？
我尝试了这几种方法,但一直无法使其正常工作.我想在多个时区内将时钟放在地图的顶部.我有一个javascript来创建时钟,我将时钟放在一个div元素中.
这是我尝试过的:
- 用
0,0坐标创建一个点. - 从这一点开始,获取地图顶部的纬度值
containerPointToLatLng. LatLng使用上面的lat和long 创建时区.- 将其转换
LatLng为Point,然后使用x,y此点定位div元素.
我首先渲染页面然后在body调整大小时执行逻辑.但是,如果我更改浏览器窗口的大小,时钟将无法正确定位.
有什么建议？
推荐指数
解决办法
查看次数
如何将一个类添加到Leaflet标记？
我正在使用自定义divIcons作为我的Leaflet标记.我想为我点击的任何标记添加边框,使用一些简单的CSS:
.selectedMarker {
border: 10px solid gold;
}
但是,以下jQuery不起作用:
$(marker).addClass('selectedMarker');
然后我尝试使用Leaflet自己的addClass()方法.我尝试通过以下方式调用它:
marker.addClass('selectedMarker');
L.addClass(marker, 'selectedMarker');
addClass(marker, 'selectedMarker');
DomUtil.addClass(marker, 'selectedMarker');
这些都不起作用.如何将selectedMarker类添加到标记中？
推荐指数
解决办法
查看次数
R和Leaflet:如何跨多行排列标签文本
假设您有以下数据框:
cities = data.frame( name = c('Madrid','Barcelona','Sevilla'),
country = c('Spain','Spain','Spain'),
region = c('Comunidad de Madrid','Cataluña','Andalucia'),
data = c(100, 200, 300),
lng = c(-3.683333,2.166667,-6.083333),
lat = c(40.433333,41.383333,37.446667))
我的想法是拥有这些城市和标签的地图,可以在悬停相应的城市圈时显示一些相关信息.我想将标签文字排成几行.下面的第一种方法失败了:
library( leaflet )
map = leaflet( cities ) %>%
addTiles() %>%
addCircles( lng = ~lng, lat = ~lat, fillColor = 'darkBlue', radius = 10000,
stroke = FALSE, fillOpacity = 0.8, label = paste0( cities$name,'\n', cities$region, '\n', cities$country, '\n', cities$data ) )
以及其他类似的尝试.谷歌搜索了一段时间后,我通过涉及htmltools包找到了一个可能的解决方案:
library( htmltools )
map2 = leaflet( cities ) %>% …推荐指数
解决办法
查看次数
单张中心弹出窗口和标记到地图
我希望中心我的标记在弹出窗口打开..并且中心地图不在标记latlng中,而是在标记和弹出窗口的中心!问题是popup有dinamic内容(点击加载).
地图大小是移动设备中的完整显示尺寸!我刚刚在弹出窗口中使用了autoPanPadding选项,但还不够
参考下图:
此解决方案集成在KeplerJs框架代码中.
推荐指数
解决办法
查看次数