标签: leaflet

我想用输入(冥想滚动等)和按钮限制用户的最大缩放级别.换句话说,我将"maxZoom"限制为-lets say-level9.但我仍然希望能够在特殊条件下放大到10级.当我设置maxZoom时,它显然不会让我以任何方式放大更多,所以在这种情况下我的解决方案是什么？

我的传单地图看起来像这样:

library(sp)
library(leaflet)
circleFun <- function(center = c(0,0),diameter = 1, npoints = 100){
  r = diameter / 2
  tt <- seq(0,2*pi,length.out = npoints)
  xx <- center[1] + r * cos(tt)
  yy <- center[2] + r * sin(tt)
  Sr1 = Polygon(cbind(xx, yy))
  Srs1 = Polygons(list(Sr1), "s1")
  SpP = SpatialPolygons(list(Srs1), 1:1)
  return(SpP)
}
Circle.Town <- circleFun(c(1,-1),2.3,npoints = 100)

df1 <- data.frame(long=c(0.6,1,1.4), lat=c(-2, -.8, -0.2), other=c('a', 'b', 'c'), VAM=c(10,8,6), 
                  type=c('Public', 'Public', 'Private'), id=c(1:3)) %>% 
  mutate(X=paste0('<strong>id: </strong>', 
                  id,
                  '<br><strong>type</strong>: ',
                  type,
                  '<br><strong>VAM</strong>: ',
                  VAM)) …

我试图在传单中插入标记之间的行(从JSON数据生成).我看到了一个示例,但它不适用于JSON数据.我可以看到标记,但没有出现任何线条.

var style = {
  color: 'red',
  fillColor: "#ff7800",
  opacity: 1.0,
  fillOpacity: 0.8,
  weight: 2
};

$.getJSON('./server?id_dispositivo=' + id_device + '', function(data) {
  window.geojson = L.geoJson(data, {
    onEachFeature: function (feature, layer) {
      var Icon = L.icon({
        iconUrl: './images/mymarker.png',
        iconSize: [18, 28], // size of the icon
        style: style,
      });
      layer.setIcon(Icon);
      layer.bindPopup(feature.properties.date + '<br />' + feature.properties.id);
    }
  });
});
map.addLayer(geojson);

我的JSON数据:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -70.219841,
          8.6310997
        ]
      },
      "properties": …

我目前正在使用Leaflet和Mapbox来创建自定义地图.一直都很好,直到我开始研究弹出窗口.

我的情况:我有一个将使用的自定义导航/控制面板,但它需要在任何打开的弹出窗口后面(它目前不是).

我准备了一个JSFiddle和这个截图

我的部分CSS是

#map-nav {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
}
.leaflet-popup-pane, .leaflet-popup {
  z-index: 1000 !important;
}

默认的传单类有z-index7个(我想),我只是把它写成100%肯定.当检查在浏览器的代码(FF /铬),我看到的z索引被正确设置,并在没有其他元件.leaflet-popup具有任何z-index集合.

我已经读到负面z-index可以解决这个问题,但是当我使用多个元素时,我真的非常喜欢一个不那么"hacky"的解决方案 - 如果有的话.(欢迎JavaScript解决方案,因此标签)

我可以从代码检查看到,宣传单设置一些属性.leaflet-popup,其位置而言是:transform: translate3d(..),bottom和left.

任何帮助表示赞赏.

编辑:

我可以放在#map-nav里面#map-content,它仍然不会工作小提琴.然而,当我试图模仿这个而不是地图的东西,它确实有效.

所以我在传单中有一个geojson图层,我可以将geojson对象添加到此图层以在结果图上显示.

现在我想添加一个文本标签来显示在对象附近.

此示例显示使用自定义L.control()对象在地图上显示其他信息.这似乎接近我想做的事情.

在这个例子中,我想添加位于每个状态上的State初始文本标签(即"TX","FL").可以L.control()用来做这个,还是有另一种方式？

http://leaflet.cloudmade.com/examples/choropleth.html

var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this.update();
    return this._div;
};

// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
        '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
        : 'Hover over a state'); …

好吧,标题说明了一切,但这里有一些代码,所以你明白我的意思.

function eachFeature(feature, layer) {
     layer.on({
         mouseover: highlightFeature,
         mouseout: resetHighlight,
     });
}
geojson = L.geoJson(geojson_raw, { style: style, onEachFeature: eachFeature });
geojson.addTo(map);

geojson_raw是一个geojson对象,它保存在一个javascript变量中. style只是返回具有某些样式属性的对象的函数. highlightFeature/ resetHighlight是根据mousein/out事件更改这些样式的函数.

所以这段代码有效,我已经知道如何通过对用户事件做出反应来改变样式.但是如何在从我的geojson数据创建的路径上设置实际的css-classname？稍后在我的代码中,我想按特定的类名选择路径.

UPDATE

2年后,我再次偶然发现了这个问题.我花了2个小时来解开这个谜团.下面接受的答案确实有效,但有一个问题.它只适用于在调用图层之前设置cssClass addTo(map).最后在源代码中深入挖掘后,很明显传单只在每个路径初始化时设置cssClass.

我有一个包含~30k元素的数组,我需要为每个元素创建带有标记的地图.我使用markerclusters并尝试优化添加时刻.

for (var i = 0; i < myItems.length; i++) {
    var item = myItems[i];

    marker = new L.marker([item[2],item[3]], {
        icon: mapOpts.myIcon
    }).bindPopup(item[1]);

    markers.addLayer(marker);

}

甚至谷歌Chrome也需要大约40秒来完成这个循环.我不想看到FF的结果.

有没有办法优化添加许多元素来映射？

我正在使用Angular.JS和Leaflet.JS作为我所在位置的地图,该地图具有与其绑定的弹出窗口的地图标记.我需要使用带有两个不同图标的span(一个在下面的代码中显示),您可以单击以调用不同的函数,如果满足某些条件,则使用ng-class更改类.这是我的代码:

var marker = L.marker([51.5, -0.09], {icon: blueIcon}).bindPopup('<br><span ng-class="thumbsUpClass(' + hotelsSelectedDates[i]['hotels'][s] + ')" ng-click="addChoice(' + hotelsSelectedDates[i]['hotels'][s] + ',' + hotels + ')"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>');

但是,当我检查元素时,我得到了这个:

<span ng-class="thumbsUpClass([object Object])" ng-click="addChoice([object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object])"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>

ng-click应该发送该功能的特定对象和对象数组,但是当我点击图标时没有任何反应.在我的研究中,我发现弹出窗口会阻止事件传播(更多信息,但我不知道如何覆盖它或修复它以使角度工作.有人会知道如何实现这一点？

更新:

由于ng-click/class计算了一个字符串,我修改了这个变量:

$scope.item = hotelsSelectedDates[i]['hotels'][s]
$scope.set …

我想知道是否有人知道在使用此约定添加它们之后如何或是否可以实际删除一层点:

var pointsLayer, someFeatures = [{
            //Hard coded for now
            "type": "Feature",
            "properties": {
                "name": "Company A",
                "show_on_map": true,
                "icon": 'img/violations.png'
            },
            "geometry": {
                "type": "Point",
                "coordinates": [43.22519, -107.69348]
            }
        }, {
            "type": "Feature",
           .
           .
           .
   }];
for(w=0; w < someFeatures.length; w++){
                pointsLayer = L.marker(someFeatures[w].geometry.coordinates, {icon: violations})   
                    .bindPopup("Company: "+someFeatures[w].properties.name);
                    //add map points 
                    map.addLayer(pointsLayer);
            }

典型的removeLayer(pointsLayer); 在类似的for循环中对我不起作用.但是,这并不意味着没有办法循环.我只是不确定如何.我正在尝试添加有效的点,然后在事件中删除它们(不工作).有任何想法吗？

谢谢大家.

PS如果您认为这个问题相关或有帮助,那么请不要忘了竖起大拇指,欢呼.

我正在用django构建一个应用程序,它将显示最高投票项目的地图.

我不是一个经验丰富的网络开发,我想知道在哪里,何时何地应该建立他们的地图.(这一行例如 - >)

map_osm.create_map(path='osm.html')

现在我放在我的views.py中,并且每次用户查看它时都在构建地图,问题是 - 它不会为服务器创建太多的开销计算吗？

我考虑过每次x票更新它,或者保留一个管理它的模型.

在这种情况下最好的做法是什么？