地图 - leaflet入门

[wuyuedefeng]

leaflet简单实用

leaflet和echarts类似可以实现地图图表，其配置颗粒度更加精细，灵活性高。

• leaflet

  import * as Leaflet from 'leaflet'
  import 'leaflet/dist/leaflet.css'
  // import 'leaflet-draw'
  // 引入China GeoJson
  import chinaJson from './assets/100000.json'
  export default {
  mounted() {
  const myMap = Leaflet.map(this.$el, {drawControl: false}).setView([30.5, 105], 3.25);
  Leaflet.geoJSON(chinaJson, {
    style: (feature) => {
      const extOptions = {}
      switch (feature.properties.name) {
        case '浙江省':
          Object.assign(extOptions, {
            color: "#f00", /*#3388ff*/
            weight: 0, /*3*/
            fillColor: '#00F0F0',
            fillOpacity: 0.8}) /*0.2*/
          break
      }
      // https://leafletjs.com/reference-1.7.1.html#path-option
      return {
        weight: 1,
        ...extOptions
      }
    },
    // eslint-disable-next-line no-unused-vars
    filter: function(feature, layer) {
      // return feature.properties.name === '浙江省'
      return true
    },
    onEachFeature: (feature, layer) => {
      const defaultOptions = {...layer.options}
      layer.bindPopup(`<div class="abc" style="color: red">${feature.properties.name}<br>${feature.properties.adcode}</div>`, {closeButton: false, offset: Leaflet.point(0, -20)})
      // eslint-disable-next-line no-unused-vars
      layer.on('mouseover', function(e) {
        this.setStyle({
          'fillColor': '#0000ff',
          'fillOpacity': 1
        })
        layer.openPopup()
      })
      // eslint-disable-next-line no-unused-vars
      layer.on('mouseout', function(e) {
        this.setStyle({
          'fillColor': defaultOptions.fillColor,
          'fillOpacity': defaultOptions.fillOpacity
        })
        layer.closePopup()
      })
      //bind click
      layer.on({
        click: (e) => {
          console.log('click event:', e, feature)
        },
      })
    },
  }).addTo(myMap)
  }
  }