在传单地图上选择多个重叠要素(此处为多边形)中的一个要素

Flugmango

我有一张地图,上面绘制了多个可相互重叠的多边形。我用leafletPip.pointInLayer(点,层)https://github.com/mapbox/leaflet-pip用于确定哪些多边形确实重叠。这是在过程中发生的点击功能。在Vue对象中,创建带有多边形的地图和GeoJSON图层。我现在想要的是以下功能:如果您单击地图上的一个点,并且该点包含在多个多边形中,则您会拥有诸如选择工具之类的功能(例如在弹出窗口中),以单击这些多边形之一并触发.on('click')函数仅适用于此特定多边形。我搜索了所有Leaflet功能,但找不到任何真正有用的功能。现在,如果单击包含在多个多边形中的点,则只触发空间上包含其他多边形的多边形的.on('click')。

var mapVue = new Vue({
  parent: vue_broadcaster,
  el: '#map',
  data: {
    map: null,
    layer: null
  },
  created: function () {
   // Adding Leaflet map here
    var map = L.map('map').setView([51.959, 7.623], 14);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    this.$set('map', map);
    this.get_zones();
  },
  methods: {
    switch_zone: function (zoneid) {
      this.$dispatch('zoneSelected', zoneid)
    },
    get_zones: function () {
      this.$http.get('/api/zones/', function (data) {
      // Creation of the GeoJSON layer
        var geoZone = {
          "type": "FeatureCollection",
          "features": []
        };
        for (var i = 0; i < data['Zones'].length; i++) {
          geoZone.features.push({
            "type": "Feature",
            "geometry": {
              "type": "Polygon",
              "coordinates": [[]]
            },
            "properties": {
              "name": ""
            }
          })
          geoZone.features[i].properties.name = data['Zones'][i]['Name'];
          for (var j = 0; j < data['Zones'][i]['Geometry']['Coordinates'].length; j++) {
            geoZone.features[i].geometry.coordinates[0].push([data['Zones'][i]['Geometry']['Coordinates'][j][1], data['Zones'][i]['Geometry']['Coordinates'][j][0]])
          }
          this.layer = new L.geoJson(geoZone)
            .bindPopup(data['Zones'][i]['Name'])
            .on('click', dispatchZoneID(data['Zones'][i]['Zone-id'], this))
            .on('click', function (e) {
              processClick(e.latlng.lat, e.latlng.lng)
            })
            .addTo(this.map)
        };
      })
    }
  }
});
// function for processing the clicks on the map
function processClick(lat, lng) {
  var info = '';
  var point = [lng, lat];
  var match = leafletPip.pointInLayer(point, mapVue.layer, false);
  if (match.length) {
    for (var i = 0; i < match.length; i++) {
      info +=
      "<b>" + match[i].feature.properties.name + "<br>"
    }
  }
  if (info) {
    mapVue.map.openPopup(info, [lat, lng]);
  }
};
// not important for this one
function dispatchZoneID(id, vue) {
  return function () {
    vue.$dispatch('zoneSelected', id)
  }
};
Flugmango

我找到了一种对我有用的解决方案,但这可能不是最优雅的解决方案。如果单击的点包含在多个多边形中(match.length> 1),则生成此信息字符串。在每次迭代中,for循环都会创建一个可点击的链接,然后根据id调用click上的函数因此,我基本上必须在一个字符串中生成大量HTML,并使用文字和字符串连接。然后,我将openPopup函数以info作为我的html参数。

function processClick(lat, lng) {
  var info = '';
  var point = [lng, lat];
  var match = leafletPip.pointInLayer(point, mapVue.layer, false);
  if (match.length > 1) {
    for (var i = 0; i < match.length; i++) {
      id = match[i].feature.properties.zoneid;
      name = match[i].feature.properties.name;
      info +=
      "<b><a onclick='dispatchZoneID(\"" + id + "\")();'>"+ name + "</a><br>"
    }
  }
  else dispatchZoneID(mapVue.zoneid)();

  if (info) {
    mapVue.map.openPopup(info, [lat, lng]);
  }
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

传单绘制出多边形是否包含另一个多边形

来自分类Dev

我必须在地图上实现一个矩形和多边形。将矩形分成网格,删除所有不属于多边形的网格

来自分类Dev

向rCharts传单地图添加多个多边形

来自分类Dev

将MULTILINESTRING的要素集合组合到R中的一个封闭多边形中

来自分类Dev

如何使用Leaflet一次仅编辑一个要素/多边形?

来自分类Dev

分割自相交多边形仅在Shapely中返回一个多边形

来自分类Dev

将多个点放在列表中?- 创建一个多边形

来自分类Dev

悬停在传单地图上时如何更改多边形的高亮颜色

来自分类Dev

选择与另一个多边形相交(或完全在另一个多边形内)的多边形[R sf]

来自分类Dev

在Google地图上绘制多边形

来自分类Dev

检查一个多边形是否在PHP中的另一个多边形内

来自分类Dev

用另一个多边形分割一个多边形

来自分类Dev

用另一个多边形分割一个多边形

来自分类Dev

从单个要素图层中选择相交多边形

来自分类Dev

多边形内的SQL选择要素

来自分类Dev

Google地图绘制多边形并删除前一个

来自分类Dev

在R中为地图着色的多边形?

来自分类Dev

如何选择一个多边形并将其用作Folium中其他图层的剪贴蒙版?

来自分类Dev

如何在开放层3中为每个多多边形显示一个标签?

来自分类Dev

为每个多边形要素生成与每个多边形要素面积成比例的随机点

来自分类Dev

如何从R中的另一个shapefile中获取包含多边形质心的shapefile的多边形?

来自分类Dev

选择选项后,将活动类添加到SVG地图上的多边形

来自分类Dev

将多边形添加到地图R传单

来自分类Dev

Python PIL中的重叠多边形

来自分类Dev

使用ggplot在一个轴上的多个多边形

来自分类Dev

如何从多多边形中删除同一多边形的多个条目?

来自分类Dev

多边形中的点,多个多边形

来自分类Dev

如何在python文件中从一个多边形移动到另一个多边形?

来自分类Dev

如何使用传单addGeoJSON()函数一次显示多个多边形?

Related 相关文章

  1. 1

    传单绘制出多边形是否包含另一个多边形

  2. 2

    我必须在地图上实现一个矩形和多边形。将矩形分成网格,删除所有不属于多边形的网格

  3. 3

    向rCharts传单地图添加多个多边形

  4. 4

    将MULTILINESTRING的要素集合组合到R中的一个封闭多边形中

  5. 5

    如何使用Leaflet一次仅编辑一个要素/多边形?

  6. 6

    分割自相交多边形仅在Shapely中返回一个多边形

  7. 7

    将多个点放在列表中?- 创建一个多边形

  8. 8

    悬停在传单地图上时如何更改多边形的高亮颜色

  9. 9

    选择与另一个多边形相交(或完全在另一个多边形内)的多边形[R sf]

  10. 10

    在Google地图上绘制多边形

  11. 11

    检查一个多边形是否在PHP中的另一个多边形内

  12. 12

    用另一个多边形分割一个多边形

  13. 13

    用另一个多边形分割一个多边形

  14. 14

    从单个要素图层中选择相交多边形

  15. 15

    多边形内的SQL选择要素

  16. 16

    Google地图绘制多边形并删除前一个

  17. 17

    在R中为地图着色的多边形?

  18. 18

    如何选择一个多边形并将其用作Folium中其他图层的剪贴蒙版?

  19. 19

    如何在开放层3中为每个多多边形显示一个标签?

  20. 20

    为每个多边形要素生成与每个多边形要素面积成比例的随机点

  21. 21

    如何从R中的另一个shapefile中获取包含多边形质心的shapefile的多边形?

  22. 22

    选择选项后,将活动类添加到SVG地图上的多边形

  23. 23

    将多边形添加到地图R传单

  24. 24

    Python PIL中的重叠多边形

  25. 25

    使用ggplot在一个轴上的多个多边形

  26. 26

    如何从多多边形中删除同一多边形的多个条目?

  27. 27

    多边形中的点,多个多边形

  28. 28

    如何在python文件中从一个多边形移动到另一个多边形?

  29. 29

    如何使用传单addGeoJSON()函数一次显示多个多边形?

热门标签

归档