使用leaflet绘制地图，地图包含站点

const map = L.map("map", {
        center: [41.486904, 122.621087], // 中心lo&la
        zoom: 7.25, // 缩放级别
        zoomControl: false, // 是否将zoom控件放入图中
        minZoom: 7,
        maxZoom: 11,
        zoomSnap: 0.25, // 缩放级别倍数，默认接近整数，这里允许更大颗粒度
        scrollWheelZoom: false, // can scroll everywhere
        smoothWheelZoom: true, // enable smooth zoom ?这个文档里没找到
        smoothSensitivity: 0.4, // zoom speed. default is 1 同上
        attributionControl: false, // 是否显示归属版权
        maxBounds: [ // 指定边界，超出弹回
          [47.709761542666, 139.81201171875],
          [33.063924198121, 104.21630859375],
        ],
      });

/* 部分事件回调 */
// 高亮图层事件
const highlightFeature = (e) => {
  if (this.shadowLayer) {
    this.map.removeLayer(this.shadowLayer);
  }
  this.city = e.target.feature.properties.name;
  // 阴影层
  this.shadowLayer = L.geoJson(e.target.toGeoJSON(), {
    style: {
      fillColor: "#f2f9ff",
      fillOpacity: 0.4,
      color: "#f2f9ff",
      weight: 0,
    },
  }).addTo(this.map);
  let obj = this.shadowLayer._layers;
  const values = Object.values(obj);
  const container = values[0]._path;
  container.style.transform = "translateY(10px)"; // 使立体
  this.shadowLayer.bringToFront();
  
  // 高亮层
  let originalLayer = e.target;
  originalLayer.setStyle({
    color: "#C2F7FF ", // 边界线颜色
    fillColor: "#82E0FF", // 区域填充颜色
    fillOpacity: 0.5, // 区域填充的透明度
    weight: 2, // 边界线宽度
  });
  originalLayer.bringToFront();
};
   
// 祛除高亮事件
const resetHighlight = (e) => {
  geojson.resetStyle(e.target); // 还原地图样式
  if (this.shadowLayer) { // 删去阴影层
    this.map.removeLayer(this.shadowLayer);
  }
};

// 鼠标事件
const onEachFeature = (feature, layer) => {
  this.cityLayerMap[feature.properties.name] = layer;
  layer.on({
    mouseover: highlightFeature,
    mouseout: resetHighlight,
  });
};