Vue项目使用leaflet加载arcgis server发布的自定义服务

前提:使用cnpm在项目中安装leaflet和esri-leaflet，npm安装较慢，在这里使用cnpm进行安装

全局引入淘宝的cnpm镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install leaflet

cnpm install esri-leaflet

 

全局引入leaflet：

在main.js文件中输入下面代码

import leaflet from 'leaflet'  //引入leaflet
import 'leaflet/dist/leaflet.css'  //引入leaflet的样式文件
Vue.prototype.L = leaflet    //设置全局变量
import 'leaflet.chinatmsproviders'  //引入leaflet加载天地图插件

在要使用esri-leaflet插件的组件中输入下面代码，如map.vue文件：

<template>
  <div id="map" class="map"></div>
</template>

<script>
import { chinaRegion } from '../../../../../static/mapData/china'
// import provinceRegion from '../../../../../static/mapData/province'
var esri = require('esri-leaflet')
export default {
  data() {
    return {}
  },
  mounted() {
    //将引入的chinatmsproviders插件里的key值替换成自己的key值
    L.TileLayer.ChinaProvider.providers.TianDiTu.key =
      '替换成自己的key值'
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      const normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
        maxZoom: 18,
        minZoom: 4,
      })
      const normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
        maxZoom: 18,
        minZoom: 4,
      })
      const PurplishBlue = L.tileLayer.chinaProvider(
        'Geoq.Normal.PurplishBlue',
        {
          maxZoom: 18,
          minZoom: 4,
        }
      )
      const normal = L.layerGroup([normalm, normala])
      const map = L.map('map', {
        center: [39.939, 116.937],
        zoom: 10,
        layers: [PurplishBlue],
        zoomControl: false,
        attributionControl: false,
      })
      const region = L.geoJSON(chinaRegion, {
        style: function(feature) {
          return { color: '#3388ff',fillOpacity:0 }
        },
      }).addTo(map)
      map.fitBounds(region.getBounds())
      
      //调用arcgis server服务
      //esri.basemapLayer('Topographic').addTo(map)
      esri.dynamicMapLayer({url:'自己发布的arcgis服务地址'}).addTo(map)
    
    
    },
  },
}
</script>

<style lang="scss" scoped>
#map {
  height: calc(100vh - 86px);
  border: 1px solid #ddd;
  width: 40%;
  overflow: hidden;
}
</style>