leaflet加载geojson叠加显示功能代码

这篇文章主要介绍了leaflet加载geojson叠加显示功能代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。 创新互联建站是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于网站设计、成都做网站、软件开发、设计服务业务。我们始终坚持以客户需求为导向,结合用户体验与视觉传达,提供有针对性的项目解决方案,提供专业性的建议,创新互联建站将不断地超越自我,追逐市场,引领市场!

geojson需要先制作shp,然后导入下面网站生成geojson。

https://mapshaper.org/

geojson,最好放后台,前台通过异步请求去加载json,然后显示。

getGeojsonByName({name:geojson_name}).then(data=>{
     if (this.bondarylayer) {
      if (this.map.hasLayer(this.bondarylayer))
      {
       this.map.removeLayer(this.bondarylayer);
      }
     }
     this.bondarylayer = L.geoJSON(data, {
      style: {
       color: '#E066FF',
       fillOpacity: 0,
       weight: 4,
      },
      pane: 'overlayPane'
     });
     this.map.addLayer(this.bondarylayer);
    });

叠加地图之后,

this.map.flyTo([34.22, 109.114], 9, { animate: true, duration: 0.2 });

将地图的视野范围添加到相应区域。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


本文标题:leaflet加载geojson叠加显示功能代码
新闻来源:http://scyanting.com/article/jcdeid.html