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

各自的官网

高德地图：

天地图：

maptalks：

百度地图：

=== 加载 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>