shapefile on leaflet，在leaflet上加载shapefile文件

一，插件

leaflet的官网上，plugins很多。但是这个插件：Leaflet.Shapefile 不太管用，https://github.com/calvinmetcalf/leaflet.shapefile

可以启动的方法用了作者的另外一个插件：https://github.com/calvinmetcalf/shapefile-js，不是直接用L.Shapefile这个拓展结构，

需要引入shapefile-js的插件

下载地址：https://github.com/calvinmetcalf/leaflet.shapefile/blob/gh-pages/shp.js

var geo = L.geoJson({features:[]},{onEachFeature:function popUp(f,l){
            var out = [];
            if (f.properties){
                for(var key in f.properties){
                    out.push(key+": "+f.properties[key]);
                    } 
                l.bindPopup(out.join("<br />"));
            }
            }});//加载zip打包的shapefile类型文件
 var base=''
 shp(base).then(function(data){
        geo.addData(data);
          });

另，由于解析shp文件的异步方法，如下：

shp().then()

用到了AJAX，所以需要加载本地文件，便触发了同源约束，需要开启VScode的live server。

二，天地图上加载shapefile

//请求天地图服务
let tmaps=L.layerGroup([  
                L.tileLayer(),
                L.tileLayer()
                ])
//解析shapefile文件
var geo = L.geoJson({features:[]},{onEachFeature:function popUp(f,l){
       var out = [];
       if (f.properties){
       for(var key in f.properties){
             out.push(key+": "+f.properties[key]);
                 } 
             l.bindPopup(out.join("<br />"));
            }
            }});
//需要shapefile文件的zip压缩包
var base='地址.zip'
shp(base).then(function(data){
        geo.addData(data);
         });
//把两种图加载到地图容器
var map=L.map('map',{
      crs:L.CRS.EPSG4326,
      center: [], 
      zoom:4, 
      zoomControl: false, 
      attributionControl: false, 
      closePopupOnClick: false,
      layers:[tmaps,geo]
      })

天地图的投影方式是EPSG4326，leaflet的默认投影为EPSG3857，需要把对应的shapefile也投影成与匹配的投影，在arcgis里选择网络墨卡托

 

 

 

Web Mercator与EPSG4326的关系在这里：https://www.cnblogs.com/E7868A/p/11460865.html