SOURCE

/*
为了方便，远程加载了：
Leaflet: https://unpkg.com/leaflet@1.8.4/dist/leaflet.js

为了方便，电站的信息通过远程的json加载，实际使用时要加载本地的json

*/


// 加载地图
const map = L.map('leaflet-map', {
  scrollWheelZoom: false
}).setView([30.00, 110.00], 4);
map.attributionControl.setPrefix('Leaflet.js');
L.tileLayer('https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
  minZoom: 2,
  maxZoom: 16,
  attribution: "Basemap © AutoNavi",
}).addTo(map);

//定义图标样式
var plantIcon = L.icon({
    iconUrl: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBzdHlsZT0iZmlsbDojMDA5Y2RjOyIgZD0iTTEyIDEuMWE2Ljg0NyA2Ljg0NyAwIDAgMC02LjkgNi45MzJjMCAzLjg4MiAzLjc4OSA5LjAxIDYuOSAxNC45NjggMy4xMTEtNS45NTcgNi45LTExLjA4NiA2LjktMTQuOTY4QTYuODQ3IDYuODQ3IDAgMCAwIDEyIDEuMXptMCA5LjlhMyAzIDAgMSAxIDMtMyAzIDMgMCAwIDEtMyAzeiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L3N2Zz4=',
    //shadowUrl: 'leaf-shadow.png',

    iconSize:     [36, 36], // size of the icon
    //shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [18, 36], // point of the icon which will correspond to marker's location
    //shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -36] // point from which the popup should open relative to the iconAnchor
});

//加载json获取电站信息并绘制点位
fetch('https://fastly.jsdelivr.net/gh/estds/gef-china-shp-cap-website-small-and-green/data/all-demo-plants.json')
  .then(response => response.json())
  .then(data => createMarkers(data)); 

function createMarkers(data) {
  for (var i = 0; i < data.length; i++) {
    marker = new L.marker([data[i].plantLat, data[i].plantLon], {icon: plantIcon}).bindPopup('<h3>' + data[i].plantName + '</h3><p>'+data[i].plantDesc+'<a target="_blank" href="/docs/'+data[i].csReport+'">案例分析</a></p><table cellspacing="0" cellpadding="0" border="0" style="width:100%;text-align:right;"> <thead> <tr> <th></th> <th>改造前</th> <th class="text-unido-blue">改造后</th> </tr> </thead> <tbody> <tr> <td style="text-align:left;"><strong>总装机</strong> / 千瓦</td> <td>'+data[i].capBefore.toLocaleString('en')+'</td> <td class="text-unido-blue">'+data[i].capAfter.toLocaleString('en')+'</td> </tr> <tr> <td style="text-align:left;"><strong>年发电</strong> / 亿度</td> <td>'+data[i].outputBefore.toLocaleString('en')+'</td> <td class="text-unido-blue">'+data[i].outputAfter.toLocaleString('en')+'</td> </tr> <tr> <td colspan="2" style="text-align:left;"><strong>'+data[i].emNote+'年均减排</strong> / 吨</td> <td class="text-unido-blue">'+data[i].emCut.toLocaleString('en')+'</td> </tr> </tbody> </table>')
      .addTo(map);
  }
}

<div id="leaflet-map"></div>

/*
为了方便，远程加载了：
ELement UI: https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css
Leaflet：https://unpkg.com/leaflet@1.9.4/dist/leaflet.css
*/

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
} /* 为了演示，将html和body都设置为全屏了 */

#leaflet-map {
  width: 100%;
  height: 100%;
  background-color: #000;
} /* 为了演示，将#leaflet-map都设置为全屏了 */

.bg-unido-blue {
  background-color: #009cdc;
}

.bg-unido-orange {
  background-color: #f47a42;
}

.text-unido-blue {
  color: #009cdc;
}

.text-unido-orange {
  color: #f47a42;
}

/* 将leaflet默认的弹出窗口圆角覆盖掉 */
.leaflet-popup-content-wrapper {
  border-radius: 0;
}