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 自定义数据
posted @ 2022-06-09 18:45  许言琪  阅读(1208)  评论(0)  编辑  收藏  举报