Vue集成高的地图

说明

组件集成OpenLayers，Leaflet，高德地图API将地图操作封装为统一出入口，方便程序快速切换地图模式

npm安装

npm i map-integration

1 采用leaflet 模式

安装leaflet

npm install --save leaflet esri-leaflet proj4leaflet

配置leaflet全局变量

// 全局引入leaflet
import L from 'leaflet'
import 'proj4leaflet'
require('esri-leaflet')
require('leaflet/dist/leaflet.css')
Vue.prototype.$L = L

2 采用高德地图模式

安装高德地图

npm i @amap/amap-jsapi-loader --save

配置高德地图全局变量

//  全局引入amap
import AMapLoader from '@amap/amap-jsapi-loader'
Vue.prototype.$AMapLoader = AMapLoader

使用示例代码

<!--
 * @Descripttion: 使用示例
 * @Author: xuyanqi
 * @Date: 2022-06-01 17:30:58
-->
<template>
  <div class="index">
    <map-integration type="leaflet" :options="options" @initMap="initMap"></map-integration>
    <div class="btn-group">
      <button @click="clearLayers">清除图层</button>
      <button @click="removeLayer">清除点</button>
    </div>
  </div>
</template>

<script>
import mapIntegration from 'map-integration'
export default {
  components: {
    mapIntegration,
  },
  data() {
    return {
      mapData: null,
      marker: null,
      options: {},
    }
  },
  mounted() {},
  methods: {
    initMap(data) {
      this.mapData = data
      // 打点
      this.marker = data.addMarker({
        extData: '点',
      })
      // 画线
      data.addPolyline({
        path: [
          [117.127328, 36.673561],
          [117.130263, 36.674951],
          [117.131277, 36.673591],
          [117.131443, 36.672989],
          [117.131384, 36.672705],
          [117.131282, 36.67233],
          [117.131325, 36.671608],
          [117.131325, 36.671556],
          [117.130048, 36.671741],
          [117.128691, 36.672274],
          [117.127908, 36.672834],
          [117.127908, 36.672834],
        ],
        extData: '线',
      })
      // 图层点击
      data.clickLayer((e) => {
        console.log(e)
      })
      // 地图点击
      data.clickMap((e) => {
        console.log(e)
      })
    },
    // 清除地图上所有图层
    clearLayers() {
      this.mapData.clearLayers()
    },
    // 删除指定图层
    removeLayer() {
      this.mapData.removeLayer(this.marker)
    },
  },
}
</script>

<style scoped>
.index {
  height: 100%;
}
.btn-group {
  position: absolute;
  top: 20px;
  right: 10px;
  z-index: 999;
  background-color: #ffffff;
  padding: 10px;
  box-shadow: 0 0 4px #b9b9b9;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
button {
  margin: 5px;
}
</style>

插件属性