leaflet在vue2中标点 加载geoJSON

lealfet版本1.9.4 vue版本2.6

引入: import L from 'leaflet'   import 'leaflet/dist/leaflet.css'   //记得引入样式 不然加载瓦片图后地图会错乱

1.初始化

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 来加载

2.标点

① 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)
 

3.加载GEOJSON

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)

4.加载wms

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

5.删除图层

this.map.removeLayer(layer)

6.视角移动到某个标点并放大层级

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

7.定义一个marker按照固定的路线移动(如按照河流路线移动)

安装   leaflet.AnimatedMarker(1.0.0)

引入  import 'leaflet.AnimatedMarker/src/AnimatedMarker'

使用  L.animatedMarker

8.计算两个点的直线距离(不考虑高度)

let a = L.latLng(纬度, 经度)

let b = L.latLng(纬度, 经度)

a.distanceTo(b)

//或者引入turfjs  链接: https://turfjs.fenxianglu.cn/category/#cdn%E9%93%BE%E6%8E%A5