首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Leaflet.js -根据geojson类别数据创建图层并添加标记?

Leaflet.js -根据geojson类别数据创建图层并添加标记?
EN

Stack Overflow用户
提问于 2018-08-10 19:57:13
回答 1查看 2.5K关注 0票数 2

我有一个包含实习坐标的.js文件:

代码语言:javascript
复制
var internships = [{
  "features": [
    {"type":"Feature","properties":{"category":"entretient","Name":"green"},"geometry":{"type":"Point","coordinates":[50.807149, 3.162994]}},
    {"type":"Feature","properties":{"category":"securité","Name":"blue"},"geometry":{"type":"Point","coordinates":[50.334421, 3.290146]}},
    {"type":"Feature","properties":{"category":"secretaria","Name":"red"},"geometry":{"type":"Point","coordinates":[50.744787, 2.256216]}}
  ]
}];

我找到了这段代码,它允许我根据属性和JS的外观来创建层:

代码语言:javascript
复制
$.getScript("CoordinatesPdC.js");

function mapLoad() {
  var sécuritéLayer = new L.LayerGroup();
  var secrétariatLayer = new L.LayerGroup();
  var entretientLayer = new L.LayerGroup();

  var map = L.map('map').setView([50.2910, 2.7775], 8);

  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, '
  }).addTo(map);

  var marker = L.marker([50.2910, 2.7775]).addTo(map);

  var entretientLayer = L.geoJson(internships, {
    filter: function (feature, layer) {
      return (feature.properties.category === "entretient");
    }
  }).addTo(map);

  var sécuritéLayer = L.geoJson(internships, {
    filter: function (feature, layer) {
      return (feature.properties.category === "sécurité");
    }
  }).addTo(map);

  var secrétariatLayer = L.geoJson(internships, {
    filter: function (feature, layer) {
      return (feature.properties.category === "secrétariat");
    }
  }).addTo(map);

}

window.onload = mapLoad;

但是现在我必须创建分配给这些层的标记,我该如何实现呢?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-12 02:20:08

您的标记已在以后分配给每个标记。在您的示例中,您创建了一个层(带有它的所有标记),并使用.addTo(map);将其立即添加到地图中。

代码语言:javascript
复制
var sécurité = L.geoJson(internships, {
  filter: function (feature, layer) {
    return (feature.properties.category === "sécurité");
  }
}).addTo(map);

现在,您可能希望仅显示基于用户输入的某个层。如果是这样,我建议在单击事件时将相关图层添加到地图中。然后,当事件被触发时,会添加一个层。下面是实现这一点的代码。sécurité.addTo(map)

使用map.removeLayer(sécurité);移除图层

下面是一个基于您的初始代码的工作示例。(我确实是用jQuery写的,因为我的普通JavaScript会更好)你也可以在jsFiddle here上查看它。

我在代码中留下了一些注释来解释每个部分的作用。我希望这对你的理解有所帮助。

代码语言:javascript
复制
var internships = [{
  "features": [{
      "type": "Feature",
      "properties": {
        "category": "entretient",
        "Name": "green"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [3.162994, 50.807149]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "category": "securité",
        "Name": "blue"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [3.290146, 50.334421]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "category": "secretaria",
        "Name": "red"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [2.256216, 50.744787]
      }
    }
  ]
}];

$(document).ready(function() {

  // Create an object to keep track of active layers and each layer with its markers
  const layers = {
    active: [],
    entretientLayer: new L.LayerGroup(),
    sécuritéLayer: new L.LayerGroup(),
    secrétariatLayer: new L.LayerGroup(),
  };

  // create the map
  var map = L.map('map').setView([50.8010, 3.1675], 6,5);

  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, '
  }).addTo(map);

  // based on the category assign a marker to the layer
  layers.entretientLayer = L.geoJson(internships, {
    filter: function(feature, layer) {
      return (feature.properties.category === "entretient");
    }
  })

  layers.sécuritéLayer = L.geoJson(internships, {
    filter: function(feature, layer) {
      return (feature.properties.category === "securité");
    }
  })

  layers.secrétariatLayer = L.geoJson(internships, {
    filter: function(feature, layer) {
      return (feature.properties.category === "secretaria");
    }
  })

  // register click event
  $('button').on('click', function(e) {
    const layerName = e.target.name;

    // if a layer is already active, remove it from the map and the active array
    if (layers.active.includes(layerName)) {
      layers.active = layers.active.filter(layer => layer !== layerName);
      map.removeLayer(layers[layerName]);
    } else {
      // add the layer to the map and to the active array
      layers.active.push(layerName);
      layers[layerName].addTo(map);
    }
  });
});
代码语言:javascript
复制
#map {
  height: 140px;
  width: 100%;
}
代码语言:javascript
复制
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet-src.js"></script>


<div class="button-group">
  <button name="entretientLayer">entretient</button>
  <button name="sécuritéLayer">sécurité</button>
  <button name="secrétariatLayer">secrétariat</button>
</div>
<p></p>
<div id="map"></div>

更新:将leaflet.js更新到版本1.3.3。更新的不同之处在于每一层都需要使用new关键字进行初始化。更新代码以反映更改。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51786003

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档