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