基础
说明
组件集成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 | 自定义数据 |