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。
//请求天地图服务 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
shapefile on leaflet，在leaflet上加载shapefile文件
原文：https://www.cnblogs.com/guoguocode/p/13393166.html