初始化leaflet地图并绘制市区轮廓

首先安装leaflet依赖：

"dependencies": {
   "leaflet": "^1.5.0",
   "leaflet.chinatmsproviders": "^2.0.2",
   "proj4leaflet": "^1.0.2",

     "leaflet-basemaps": "^0.3.4",

     "leaflet-label": "^0.2.1-0"

}

 

  <div class="map-box">

    <div id="map-container" class="map-container" />

  </div>

<script>
import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'proj4leaflet'
import 'leaflet.chinatmsproviders'
import '@/assets/map/leaflet.ChineseTmsProviders'

export default {
  name: 'APictureOverview',
  data() {
    return {
      mapOptions: {
        origin: [35.4202251931, 119.507179943],
        initZoom: 10
      }
    }
  },

  mounted() {
    this.initMap()
  },

  methods: {
    initMap() {
      this.map = L.map('map-container', {
        minZoom: 4,
        maxZoom: 16,
        attributionControl: false,
        center: this.mapOptions.origin, // 地图初始化时的中心点位置
        zoom: this.mapOptions.initZoom, // 地图初始化时的缩放等级
        zoomControl: false // 默认情况下，是否将 zoom 缩放控件添加到地图中。
      })

      this.tileLayer = [
        L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
          maxZoom: 16,
          minZoom: 4
        })
      ]
      this.tileLayer.map(layer => {
        this.map.addLayer(layer)
      })
      this.setAreaLayer('rizhao', true)
    },

    // 绘制日照市的地图
    setAreaLayer(jsonName, isBounds) {
      if (this.areaLayer) {
        this.map.removeLayer(this.areaLayer)
      }
      const wfAllGeoJson = require(`@/assets/geoJson/${jsonName}.json`)
      this.areaLayer = L.geoJSON(wfAllGeoJson, {
        style: feature => {
          return {
            fillOpacity: 0.1,
            fillColor: 'rgb(27, 242, 245)',
            weight: 4,
            color: 'rgb(27, 242, 245)'
          }
        }
      })
      this.map.addLayer(this.areaLayer)
      if (isBounds) {
        this.map.fitBounds(this.areaLayer.getBounds())
      }
    }
  }
}

<style lang="scss" scoped>
    .map-box {
      width: 100%;
      height: calc(100vh);
      background: #000000;
      overflow: hidden;
      #map-container {
        width: 100%;
        height: 100%;
      }
    }
</style>