一，外掛

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