一,插件
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