Vue集成地图第三方插件

基础

说明

---

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

安装

---

npm安装

目前只支持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>

props

属性名	是否必填	默认值	可选值	说明
type	否	amap	openLayers,leaflet,amap	地图类型
options	否	-	-	配置参数

options参数

该工具目前只实现了以下通用属性，如果需要其他属性可根据官网map对象属性自定义填写，只是在切换地图模式时无法同步使用。

属性名	是否必填	默认值	可选值	说明
center	否	[116.75199, 36.55358]		地图中心点坐标值
zoom	否	8		地图显示的缩放级别
minZoom	否	1		地图缩放最小值
maxZoom	否	16		地图缩放最大值
...	...	...	...	...

events

事件	回调值	说明
initMap	mapData	地图初始化完成后触发

mapData Attribute

属性	返回类型	说明
map	Map对象	map对象

mapData Methods

方法名	返回值	传参	说明
addMarker(marker: Object)	Layer	Marker	添加点坐标
addpolyline(polyline: Object)	Layer	polyline	添加线绘制
clickLayer(callback: Function)	callback(polyline|Marker)		图层点击
clickMap(callback: Function)	callback({lng: 117.22323,lat: 38.23423})		地图点击
clearLayers()			清除所有图层
removeLayer(layer: any)		Layer	删除指定图层

polyline

属性	类型	说明
path	number[][] 二维数组	经纬度数据
borderWeight	number	线的粗细
strokeColor	string	线的颜色
extData	object	自定义数据

Marker

属性	类型	说明
lng	number	精度
lat	number	纬度
icon	string	图标地址，可以是网络地址
size	number	图标大小
title	string	鼠标划过文字提示
extData	object	自定义数据

• 博客地址1：https://www.biyiniaolove.work/blogDesc?id=5
• 博客地址2：https://www.cnblogs.com/xyqbk/p/16360783.html
• NPM： https://www.npmjs.com/package/map-integration