leaflet在vue2中标点 加载geoJSON

this.map = L.map(this.mapId, mapInitOptionNew)  //this.mapId 是容器的id
let center = [32.666, 129.547]

const mapInitOptionNew = {
  crs: L.CRS.EPSG4326,   //坐标系 根据实际需求来
  zoomControl: false,    //缩放控件
  closePopupOnClick: false,  //点击地图是否关闭弹出窗口
  center,     //中心点
  maxBounds: [[27.971730, 103.988246], [32.471166, 114.300393]],  //地图的视角
  zoom: MIN_ZOOM,  //默认层级
  minZoom: MIN_ZOOM,  //最小层级
  maxZoom: MAX_ZOOM,  //最大层级  //最大最小层级根据加载的瓦片图来决定
}

如果不需要这些配置，简单写法

this.map = L.map(this.mapId).setView(center, zoom)

//可以用L.tileLayer来加载地图底图 
//如果是esri 就安装esri-leaflet 来加载

① let marker = L.marker(center, {
        icon: L.icon({
          iconUrl: '本地图片路径',
          iconSize: [24, 24]
        })
      })
② let marker = L.marker(center, {
     icon: this.makeSvgIcon()
})

makeSvgIcon() {
   //自定义html
   return L.divIcon({

  className: `marker-svg`,
  html: `<div class="box"></div>`,
  iconSize: [30, 30],
  iconAnchor: [15, 30],
  tooltipAnchor: [0, -20],
  popupAnchor: [0, -20]
})

}

marker.bindTooltip('名称', { direction: 'top' })
marker.bindPopup('内容')或marker.bindPopup(pop)

let pop = L.popup({
  minWidth: 300,
  maxWidth: 600,
  className: 'layer-popup',
  autoPanPadding: [200, 100],
  keepInView: true
}).setContent(this.$refs.school.$el)  //直接放一个html

marker.on('click', e => { '点击事件' })

//一般是多个标点 将多个标点添加到数组中 最后添加到地图中去

let markers = []
markers.push(marker)
let layers = L.layerGroup(markers)
this.map.addLayer(layers)
 

let layer = L.geoJSON(geojson数据, { weight: 6, ...style })   //可以自定义geojson的样式  //在数组里返回 给每一项定义一个layer  然后绑定对应事件

layer.on('mouseover', _ => {   //鼠标经过
  layer.setStyle({ ...style, weight: 8 })
})
layer.on('mouseout', _ => {    //鼠标离开
  layer.resetStyle()
})
layer.on('click', _ => {
  //点击事件
})
layer.bindTooltip('名称', { direction: 'top', sticky: true })

let regionLayer = L.layerGroup()
let layer2 = L.geoJSON('返回的数组', {    //循环数组 
  style: {},
  onEachFeature: (feature, item) => {

item.on('mouseover', _ => {   //鼠标经过
       layer.setStyle({ ...style, weight: 8 })
     })
     item.on('mouseout', _ => {    //鼠标离开
       layer.resetStyle()
     })
     item.on('click', _ => {
       //点击事件
      })
     item.bindTooltip('名称', { direction: 'top', sticky: true })

     //有些展示地级市边界的geojson 中心点需要加上地级市的名字
     regionLayer.addLayer(item)
     const { properties: { name } } = feature

     const nameMarker = L.marker(center, {
        interactive: false,
        icon: L.divIcon({
           html: `<div class="region-name">${name}</div>`,
           iconSize: [0, 0]
        })
     })
     regionLayer.addLayer(nameMarker)

  }
})
this.map.addLayer(layer2)

let imgLayer = L.tileLayer.wms('你的url', {
          //要求的一些参数
          layers: '',
          format: 'image/png',
          transparent: true
        })this.map.addLayer(imgLayer)

this.map.removeLayer(layer)

this.map.setView([经纬度], zoom)