wh-map v1.1.0
wh-map
封装了多种地图的加载
npm插件地址: https://www.npmjs.com/package/wh-map 开发项目代码地址: http://192.168.30.124/plugins/template.git
源码: wh-map 在 src -> components -> whMap 文件夹下
使用
npm install wh-map --save
快速开始
import WHMap from 'wh-map';
const whMap = new WHMap(options);
参数
名称 | 类型 | 必填 | 说明 | |
---|---|---|---|---|
container | string | 是 | 地图容器元素 | | |
type | number | 是 | 1 高德 2 天地图 3 maptalks 4 百度地图 | |
loadConfig | object | 是 | 加载地图的配置参数 | |
mapConfig | object | 是 | 地图的初始化参数 |
例子:
this.mapOptions = {
container: 'mapId',
type: 3,
loadConfig: {
offline: false,
tileUrl: ''
},
mapConfig: {
center: [110.68554,35.28374],
zoom: 13
}
}
loadConfig配置
| 名称 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| securityJsCode|string| 否 | 高德地图最好加上 |
| key|string| 是 | 地图 api 请求的 key(maptalks 不需要) |
| tileUrl|string| 否 | 自定义瓦片的地址 |
| version|string| 否 | 天地图版本默认 4.0,高德地图默认版本 2.0 百度地图默认版本 3.0 |
| customUrl|string| 否 | 请求 api 的私服地址 (maptalks 不需要) |
mapConfig配置
| 名称 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| center| array | 否 | 地图的中心点 |
| zoom | number | 否 | 地图的缩放级别 |
| minZoom | number | 否 | 地图的最小缩放级别 |
| maxZoom | number | 否 | 地图的最大缩放级别 |
| bounds | array | 否 | 地图的展示边界西南点, 东北点eg:[lng, lat, lng, lat] |
方法
const whMap = new WHMap(options, callback);
名称 | 参数 |
---|---|
loadedMap | map实例 |
loadMarker | array<markerList> |
loadPolygon | array<polygonObj> |
loadPath | object |
onClickMarker | function(e, data){} |
onClickPolygon | function(e, data){} |
onClickMap | function (e){} |
loadedMap 返回的参数是实例 map 根据对应的官网自定义操作 map
各自的官网
===
加载 marker 等需要 map 操作的均在 loadedMap 中进行(此方法中 map 才会生成),
markerList 参数格式 | 名称 | 参数 | 描述 | | --- | --- | --- | | list | array | marker 数据| | options| object | 自定义marker; icon: 图标, width:图标宽度, height:图标高度,opacity:图标透明度, zIndex:图标层级,coordinateFrom:坐标系来源,showInfoWindow: 是否自定义弹窗,customInfoWindow:自定义弹窗元素 |
coordinateFrom 参考值 | 名称 | 描述 | | --- | --- | | GCJ02 | 中国国家测绘局创建的坐标系统 | | WGS84 | GPS全球定位系统使用的坐标系统。 | | BD09 | 百度坐标 |
markerObj 参数 | 名称 | 参数 | 描述 | | --- | --- | --- | | position | array | marker 位置 eg:lng, lat| | properties| object | 自定义的 marker 属性,eg:{title: 弹窗的标题, content: 弹窗的内容} |
例子:
this.whMap.loadMarker([
{
list: [
{
position: [110.615416,35.304756],
properties: {
id: 1,
label: '类型7-1',
title: '设备7',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
},
{
position: [110.648719,35.304056],
properties: {
id: 2,
label: '类型8-2',
title: '设备8',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
},
{
position: [110.648719,35.271828],
properties: {
id: 2,
label: '类型9-3',
title: '设备9',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
}
],
options: {
coordinateFrom: 'GCJ02',
icon: require('@/components/whMap/assets/marker/marker-1.png'), // marker icon
width: 28, // marker 宽
height: 28, // marker 高
opacity: 1, // marker 透明度
zIndex: 20, // marker 层级
showInfoWindow: true
}
},
{
list: [
{
position: [110.670922,35.2965296],
properties: {
id: 1,
label: '类型2-1',
title: '设备4',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
},
{
position: [110.7124448,35.294674],
properties: {
id: 2,
label: '类型2-2',
title: '设备5',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
},
{
position: [110.7236001,35.317771],
properties: {
id: 3,
label: '类型2-3',
title: '设备6',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
}
],
options: { // marker 配置
coordinateFrom: 'GCJ02',
icon: require('@/components/whMap/assets/marker/marker-2.png'), // marker icon
width: 28, // marker 宽
height: 28, // marker 高
opacity: 1, // marker 透明度
zIndex: 20, // marker 层级
showInfoWindow: true,
customInfoWindow: this.$refs.customInfoWindow
}
}
])
loadPolygon 参数格式 | 名称 | 参数 | 描述 | | --- | --- | --- | | path | array | 坐标集合 [lng, lat, lng, lat...]| | properties| object | 用户自定义属性 eg:{title: 弹窗的标题, content: 弹窗的内容} | | options| object | 自定义polygon; lineColor: 边框颜色, lineWidth:边框宽度, lineOpacity:边框透明度,lineStyle:边框样式(solid/dashed), color:多边形填充颜色,opacity: 填充透明度,zIndex: 多边形层级(天地图无效),showInfoWindow: 是否显示弹窗,customInfoWindow:弹窗的元素 |
例子
this.whMap.loadPolygon([
{
path: [
[110.673929,35.271195],
[110.709806,35.269233],
[110.714098,35.249889],
[110.64921,35.240076]
],
properties: {
id: 1,
title: '区域1',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
},
{
path: [
[110.615416,35.304756],
[110.648719,35.304056],
[110.648719,35.271828],
[110.625544,35.275192]
],
properties: {
id: 1,
title: '区域2',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
},
options: {
lineColor: 'yellow',
lineWidth: 5,
lineOpacity: 0.1,
lineStyle: 'solid' ,//
color: 'yellow',
opacity: 1,
zIndex: 10, // 天地图无效
showInfoWindow: true,
customInfoWindow: this.$refs.customInfoWindow
},
}
])
loadPath中 config 配置参数 | 名称 | 参数 | 描述 | | --- | --- | --- | | options | object | 渲染配置项| | list| array | 渲染数据项|
options参数说明 | 名称 | 参数 | 描述 | | --- | --- | --- | | start | object | 起点对象{icon: '', width: 28, height: 28}| | end| object | 终点对象{icon: '', width: 28, height: 28}| | point| object | 移动点对象{icon: '', width: 28, height: 28}| | line| object | 轨迹对象{defaultColor: '默认颜色', width: 轨迹宽度, color: '走过的颜色'}| | speed| number | point移动速度| | autoMove| boolean | 是否自动移动, 默认:false | | loop| boolean | 是否 循环播放, 默认:false |
list参数说明 | 名称 | 参数 | 描述 | | --- | --- | --- | | path | array | 轨迹点集合| | properties| object | 自定义属性{name: '路径 1'}暂时不用|
例子:(天地图的轨迹回放无效)
this.whMap.loadPath({
options: {
start: {},
end: {},
point: {},
line: {},
speed: 1000,
autoMove: true,
loop: false
},
list: [
{
path: [
[110.60340003112788,35.3272378804613],
[110.61507300476069,35.32737793246983],
[110.6264026556396,35.32681772297977],
[110.63790396789545,35.32569729235317],
[110.65318183044428,35.32485695919283],
[110.66451148132319,35.32569729235317],
[110.67755774597163,35.325417182270286],
[110.69506720642084,35.32485695919283],
[110.7120616827392,35.32443678933723],
[110.72459296325678,35.32485695919283],
[110.73575095275874,35.3247169028169],
[110.74690894226069,35.32443678933723]
],
properties: {
name: '路径1'
}
},
{
path: [
[110.60168341735834,35.28479094903727],
[110.60889319519038,35.284510697294394],
[110.621252814331,35.28549157415037],
[110.63859061340327,35.28465082328708],
[110.65335349182124,35.283810063693494],
[110.66657141784663,35.28395019089871],
[110.6791026983642,35.283389680622946],
[110.69094733337397,35.28366993624584],
[110.70227698425288,35.28366993624584],
[110.71412161926264,35.28352980855564],
[110.72167471984858,35.28366993624584],
[110.73042945007319,35.28366993624584],
[110.74296073059077,35.283389680622946],
[110.75257376770014,35.283109424030016],
[110.75978354553217,35.283109424030016],
],
properties: {
name: '路径2'
}
}
]
})
点击 marker 的事件onClickMarker
this.whMap.onClickMarker = (e, data) => {
// e 点击的元素
// data 点击对象携带的自定义属性数据
}
点击 polygon 的事件onClickPolygon
this.whMap.onClickPolygon = (e, data) => {
// e 点击的元素
// data 点击对象携带的自定义属性数据
}
点击 map 的事件onClickMap
this.whMap.onClickMap = (e) => {
// e 点击的元素
}
2. Use wh-map in the vue component
<template>
<div class="map-wraper">
<div class="map-wraper" id="mapId" v-if="show"></div>
<div ref="customInfoWindow" class="customInfoWindow" v-if="show">
<p>{{currentInfo.title || '标题'}}</p>
<img @click="onCloseInfoWindow" src="@/components/whMap/assets/close.png" alt="">
</div>
</div>
</template>
<script>
import WHMap from 'wh-map'
export default {
data() {
return {
mapOptions: null,
map: null,
whMap: null,
currentInfo: {},
infoWindow: null,
show: false
}
},
watch:{
'$route'(val, from) {//监听到路由(参数)改变
// 拿到目标参数 val.query.typeCode 去再次请求数据接口
this.show = false
setTimeout(() => {
this.loadMap()
}, 500)
}
},
created() {
},
mounted() {
this.loadMap()
},
methods: {
loadMap () {
this.show = true
this.$nextTick(() => {
const type = Number(this.$route.query.type) || 1
if (type === 1) {
// 高德
this.mapOptions = {
container: 'mapId',
type: 1,
coordinateFrom: 'BD09',
loadConfig: {
securityJsCode: '******',
key: '******',
customUrl: '', // api 接口地址
tileUrl: 'https://webst01.is.autonavi.com/appmaptile?style=6&x=[x]&y=[y]&z=[z]'
},
mapConfig: {
center: [110.68554,35.28374],
zoom: 13,
minZoom: 4,
maxZoom: 20,
bounds: [[110.5928039844627, 35.23751088933946], [110.78367593922282, 35.35488007592691]] // sw表示矩形区域的西南角,参数ne表示矩形区域的东北角(左下 -> 右上)
}
}
} else if (type === 2) {
// 天地图
this.mapOptions = {
container: 'mapId',
type: 2,
coordinateFrom: 'BD09',
loadConfig: {
key: '******',
version: '4.0',
customUrl: null,
tileUrl: ''
},
mapConfig: {
center: [110.68554,35.28374],
zoom: 13,
minZoom: 4,
maxZoom: 20,
bounds: [[110.5928039844627, 35.23751088933946], [110.78367593922282, 35.35488007592691]] // sw表示矩形区域的西南角,参数ne表示矩形区域的东北角(左下 -> 右上)
}
}
} else if (type === 3) {
// maptalks
this.mapOptions = {
container: 'mapId',
type: 3,
loadConfig: {
customUrl: null,
tileUrl: ''
},
coordinateFrom: 'BD09',
mapConfig: {
center: [110.68554,35.28374],
zoom: 13,
minZoom: 4,
maxZoom: 20,
bounds: [[110.5928039844627, 35.23751088933946], [110.78367593922282, 35.35488007592691]] // sw表示矩形区域的西南角,参数ne表示矩形区域的东北角(左下 -> 右上)
}
}
} else if (type === 4) {
// 百度
this.mapOptions = {
container: 'mapId',
type: 4,
coordinateFrom: 'BD09',
loadConfig: {
key: '*****', // key
version: '3.0', // 版本
tileUrl: '', // 瓦片地址
customUrl: '' // api 接口地址
},
mapConfig: {
center: [110.68554,35.28374],
zoom: 13,
minZoom: 4,
maxZoom: 20,
bounds: [[110.5928039844627, 35.23751088933946], [110.78367593922282, 35.35488007592691]] // sw表示矩形区域的西南角,参数ne表示矩形区域的东北角(左下 -> 右上)
}
}
}
this.whMap = new WHMap(this.mapOptions)
this.whMap.loadedMap = this.loadedMap
this.whMap.onClickMarker = this.onClickMarker
this.whMap.onClickPolygon = this.onClickPolygon
this.whMap.onClickMap = this.onClickMap
})
},
loadedMap (map) {
console.log('地图加载完成');
this.map = map
this.initMarker()
this.initPolygon()
this.initPath()
},
initMarker () {
setTimeout(() => {
this.markerList = [
{
list: [
{
position: [110.673929,35.271195],
properties: {
id: 1,
label: '类型1-1',
title: '设备1',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
},
{
position: [110.709806,35.269233],
properties: {
id: 2,
label: '类型1-2',
title: '设备2',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
},
{
position: [110.714098,35.249889],
properties: {
id: 3,
label: '类型1-3',
title: '设备3',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
}
],
options: {}
},
{
list: [
{
position: [110.615416,35.304756],
properties: {
id: 1,
label: '类型7-1',
title: '设备7',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
},
{
position: [110.648719,35.304056],
properties: {
id: 2,
label: '类型8-2',
title: '设备8',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
},
{
position: [110.648719,35.271828],
properties: {
id: 2,
label: '类型9-3',
title: '设备9',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
}
],
options: {
coordinateFrom: 'GCJ02',
icon: require('@/components/whMap/assets/marker/marker-1.png'), // marker icon
width: 28, // marker 宽
height: 28, // marker 高
opacity: 1, // marker 透明度
zIndex: 20, // marker 层级
showInfoWindow: true
}
},
{
list: [
{
position: [110.670922,35.2965296],
properties: {
id: 1,
label: '类型2-1',
title: '设备4',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
},
{
position: [110.7124448,35.294674],
properties: {
id: 2,
label: '类型2-2',
title: '设备5',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
},
{
position: [110.7236001,35.317771],
properties: {
id: 3,
label: '类型2-3',
title: '设备6',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
}
],
options: { // marker 配置
coordinateFrom: 'GCJ02',
icon: require('@/components/whMap/assets/marker/marker-2.png'), // marker icon
width: 28, // marker 宽
height: 28, // marker 高
opacity: 1, // marker 透明度
zIndex: 20, // marker 层级
showInfoWindow: true,
customInfoWindow: this.$refs.customInfoWindow
}
}
]
this.whMap.loadMarker(this.markerList)
}, 2000)
},
initPolygon () {
setTimeout(() => {
this.polygonList = [
{
path: [
[110.673929,35.271195],
[110.709806,35.269233],
[110.714098,35.249889],
[110.64921,35.240076]
],
properties: {
id: 1,
title: '区域1',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
}
},
{
path: [
[110.615416,35.304756],
[110.648719,35.304056],
[110.648719,35.271828],
[110.625544,35.275192]
],
properties: {
id: 1,
title: '区域2',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
},
options: {
lineColor: 'yellow',
lineWidth: 5,
lineOpacity: 0.1,
lineStyle: 'solid' ,//
color: 'yellow',
opacity: 1,
zIndex: 10, // 天地图无效
showInfoWindow: true,
customInfoWindow: this.$refs.customInfoWindow
},
},
{
path: [
[110.670922,35.2965296],
[110.7124448,35.294674],
[110.7236001,35.317771],
[110.6657578,35.315242]
],
options: {
lineColor: 'red',
lineWidth: 5,
lineOpacity: 0.1,
lineStyle: 'solid' ,//
color: 'red',
opacity: 1,
zIndex: 10, // 天地图无效
},
properties: {
id: 1,
title: '区域3',
content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
showInfoWindow: true,
}
}
]
this.whMap.loadPolygon(this.polygonList)
}, 2000)
},
initPath () {
setTimeout(() => {
this.whMap.loadPath({
options: {
start: {},
end: {},
point: {
icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
// icon: "https://lbsyun.baidu.com/jsdemo/img/car.png",
width: 26,
height: 52
},
line: {},
speed: 1000,
autoMove: true,
loop: false
},
list: [
{
path: [
[110.60340003112788,35.3272378804613],
[110.61507300476069,35.32737793246983],
[110.6264026556396,35.32681772297977],
[110.63790396789545,35.32569729235317],
[110.65318183044428,35.32485695919283],
[110.66451148132319,35.32569729235317],
[110.67755774597163,35.325417182270286],
[110.69506720642084,35.32485695919283],
[110.7120616827392,35.32443678933723],
[110.72459296325678,35.32485695919283],
[110.73575095275874,35.3247169028169],
[110.74690894226069,35.32443678933723],
[110.7464797888183, 35.31239099165688],
[110.74630812744135, 35.29964290320916]
],
properties: {
name: '路径1'
}
},
{
path: [
[110.60168341735834,35.28479094903727],
[110.60889319519038,35.284510697294394],
[110.621252814331,35.28549157415037],
[110.63859061340327,35.28465082328708],
[110.65335349182124,35.283810063693494],
[110.66657141784663,35.28395019089871],
[110.6791026983642,35.283389680622946],
[110.69094733337397,35.28366993624584],
[110.70227698425288,35.28366993624584],
[110.71412161926264,35.28352980855564],
[110.72167471984858,35.28366993624584],
[110.73042945007319,35.28366993624584],
[110.74296073059077,35.283389680622946],
[110.75257376770014,35.283109424030016],
[110.75978354553217,35.283109424030016],
],
properties: {
name: '路径2'
}
}
]
})
}, 2000)
},
onClickMarker (e, data, infoWindow) {
console.log('点击了标记', e);
console.log(data);
console.log(infoWindow);
this.currentInfo = data
// this.infoWindow = infoWindow
},
onCloseInfoWindow () {
this.whMap.closeInfoWindow()
},
onClickPolygon (e, data, infoWindow) {
console.log('点击了多边形', e);
console.log(data);
this.currentInfo = data
this.infoWindow = infoWindow
},
onClickMap (e) {
console.log(e);
}
},
}
</script>
<style scoped>
.map-wraper {
width: 100%;
height: 100%;
}
.customInfoWindow {
width: 200px;
position: relative;
background: cyan;
}
.customInfoWindow>p {
width: 100%;
text-align: center;
padding: 16px;
box-sizing: border-box;
}
.customInfoWindow>img {
width: 28px;
height: 28px;
position: absolute;
right: 16px;
top: 16px;
cursor: pointer;
}
</style>