Mv Map

介绍

这里是感动科技有限公司软件研发部指挥调度线基于高德SDK和vue开发的一款适用于公司相关指挥调度项目的地图组件。

地图组件开发文档

特性

• 快速搭建地图页面，兼容高德2.0和1.4.15版本
• 多种图例选择，绘制海量点、路线等图层
• 地图各种sdk便捷使用
• 地图图标配置化
• 地图主题切换
• 地图弹框便捷使用，配置主题
• 用户可自定义业务sdk配置

后台服务地址

下载地址

ssh://[email protected]:8022/zhdd/xtzhdd-system.git 

git地址

快速开始

安装与使用

1.安装

npm i microvideo-map

2.使用

在程序执行入口配置文件 以vue2 main.js为例

// 引入microvideo-map
import MvMap from 'microvideo-map';

// 注册使用
Vue.use(MvMap,{
    initMapConfig: Object,
    fetchConfig: Object,
    mapIconConfig: Array,
    businessSdk:Array
})

在需要加载地图的页面里使用MvMap组件

<template>
  <mv-map>
    <!-- 这里可以放置其他的组件代码 -->
  </mv-map>
</template>

vue3 配置方式

main.js

import { createApp } from 'vue'
import App from './App.vue'

import MvMap from 'microvideo-map'

const app = createApp(App)

app.use(MvMap,{
    initMapConfig: Object,
    fetchConfig: Object,
    mapIconConfig: Array,
    businessSdk:Array
})

配置说明

1.initMapConfig 地图初始化配置参数

type:[Object] 非必传

initMapConfig:{
    key              地图 AppKey
    v                 地图版本号   默认 - 1.4.15
    uiVersion         地图版本对应的UI组件版本号  默认 - 1.1
    securityJsCode    地图安全密钥(自定义地图样式使用)
}

2.fetchConfig 地图业务层请求配置

type:[Object] 非必传

{
    baseUrl: '', // 请求地址 默认http://jtqg.gandongyun.cn/map
    headers:{},  // 请求头
}

3.mapIconConfig 地图打点图标配置

type:[Array] 非必传

例：

mapIconConfig:[
    {
        name: 'icon-zl-sn', // 图标名
        url: require('../assets/images/map/icon/icon-zl-sn.png') // 图标地址
    },
    {
        name: 'icon-zl-sfz',
        url: require('../assets/images/map/icon/icon-zl-sfz.png')
    }
]

4.businessSdk 全局业务Sdk配置

type:[Array] 非必传

// 组件已有mvSdk，可引入
import mvSdk from 'mv-map/lib/sdk/business-sdk/mv-sdk'
// 可自己创建sdk
import DemoSdk from './lib/demo-sdk'

// 业务sdk配置
businessSdk: [{
            sdkName: 'demo',
            sdkClass: DemoSdk
        },
        {
            sdkName: 'mv',
            sdkClass: mvSdk
        }
    ]

例：demo-sdk.js

/**
 * @description demo业务sdk配置
 * @author      朱琦
 * @date        2022/3/2
 */
class DemoSdk {

  init(mapSdk) {
      this.mapSdk = mapSdk;
      return this;
  }

}

const newInstance = () => {
  return new DemoSdk()
} 

export default newInstance

MvMap

MvMap 是mv-map插件最核心的组件，使用该组件可以调用地图相关的Api

使用

在需要应用地图的地方引入

<template>
  <mv-map 
    ref="mvMap"
    :mapConfig="mapConfig"
    :businessSdkConfig="businessSdkConfig"
    @map-load="mapLoad">
  </mv-map>
</template>

属性

props:id

type: [String:'mv-map'] 地图唯一标识

当页面只有一个地图时，id可不传，默认值为mv-map 多个地图时可设置不同的id来区分，以便调用不同地图的sdk

props:mapConfig

type:[Object] 创建地图配置项

mapConfig | 类型 | 说明 ---|:---:|--- theme | String | 地图主题配置 dark(默认), light zoom | Number |地图显示层级 zooms | Array |地图显示层级范围 center | Array |地图中心点

全部参数

props:businessConfig

type:[Object] 地图业务配置项

businessConfig | 类型 | 说明 ---|:---:|--- roadType | String | 地图业务路网类型 areaConfig | Object | 地图显示省市县地区配置 sdkConfig | Array | 地图业务sdk配置

areaConfig 详细配置说明

areaConfig | 类型 | 说明 ---|:---:|--- code | String | 区域code 默认江苏省 320000 depth | Number | 层级类型 0：省级 1：市级 2：县级 fillColor | String | 中国地级市填充色 cityBorderColor | String | 中国地级市边界颜色 countyBorderColor | String | 中国区县边界颜色 outsideFill | Object | 是否需要绘制外界遮罩 有该参数以下参数有效 outsideFill.strokeColor | String | 边界颜色 outsideFill.strokeBorderWidth | Number | 边界宽度 outsideFill.fillColor | String | 图层遮罩颜色 outsideFill.fillOpacity | String | 图层遮罩颜色 outsideFill.fillColor | Number | 图层遮罩透明度 outsideFill.bubble | String | 图层遮罩是否允许点击事件冒泡 默认false

事件

emit:map-load

/**
  * 地图初始化完成
  * @param {Object} map 地图实例
  */
mapLoad (map) {
  this.map = map
  // 这里可以开始调用地图初始化后需要执行的方法
},

方法

getBusinessSdk(sdkName)

根据业务名获取业务sdk

this.mvBusinessSdk = this.$refs.mvMap.getBusinessSdk('mv')

themeChange(theme)

主题切换 目前已有主题 dark，light 默认主题是dark

// 切换成light主题
this.$refs.mvMap.themeChange('ligh')

queryParamChange(params)

修改 图例接口传参

this.$refs.mvMap.queryParamChange({})

MvMapIcon

MvMapIcon 是一个可配置的图例按钮组件，可根据不同model来绘制海量点或路线等功能

使用

在MvMap组件内引入

例：

<template>
  <mv-map 
    ref="mvMap">
    <!-- 路况图例 -->
    <mv-map-icon
      iconConfig="lk"
      @layer-click="layerClick"
    ></mv-map-icon>
    <!-- 摄像头图例 -->
    <mv-map-icon
      :iconConfig="{type:'sxt',tooltipPostiton:'bottom'}"
      @layer-click="layerClick"
      @point-click="pointClick"
      @load-layer="loadLayer"
    ></mv-map-icon>
    <!-- 自定义图例 -->
    <mv-map-icon :iconConfig="iconConfig"></mv-map-icon>
  </mv-map>
</template>

<script>
export default {
  data () {
    return {
      iconConfig:{
        type:'custom',
        name:'自定义图例',
        img:[require('@/assets/images/mv-map-img/icon-fwq.png'),require('@/assets/images/mv-map-img/icon-ddzx-active.png')]
      }
    }
  }
}
</script>

业务图例公用配置

name | type | mode ---|---|--- 路况 | lk | lk 摄像头 | sxt | point 情报板 |qbb | point 交调点 | jdd | point 道路事件 | dlsj | point 清障 | qz | point 工区| gq | point 服务区| fwq | point 收费站| sfz | point 汽渡| qd | point ETC| etc | point 停车区| tcq | point 枢纽| sn | point 桥梁| ql | point 隧道| sd | point 路线| lx | line 桩号| zh | point 救援车辆 | jycl | point 警车 | jc | point 执法车 | zfc | point 雷雨云层| lyyc | point 气象点| qxd | point

属性

props:iconConfig

type: [String | Object] 图例配置

iconConfig 为String 代表图例类型

iconConfig 为Object时参数：

iconConfig | 类型 | 说明 ---|:---:|--- type | String | 图例类型 model | String | 图层类型 非必传，可取'point'（海量点），'line'（路线），'lk'（路况） img | Array | 图例图片配置，默认和选中两个图片 active | Boolean | 图例是否默认选中加载数据 默认false cache | Boolean | 图例是否缓存数据 默认false tooltipShow | Boolean | 图例是否显示提示框 默认true tooltipPostiton | String | 提示框位置 可选 'top'(默认),'bottom' width | String | 图例宽度 默认'2.5vw' height | String | 图例高度 默认'2.5vw' fitView | Boolean | 是否在绘制后自动调整地图视野以适合全部轨迹，默认false。 iconFilter | Array | model为point时图层 打点尺寸 iconSize | Array 或 Function | model为point时图层 打点尺寸 queryParam | Object | 图例接口传参 queryData | Promise | 图例获取数据方法

queryData 是一个Promise对象 返回数据格式如下：

{
  status:0,
  data:[]
}

// iconConfig.model = 'point',data 的数据格式
[{
  id:'1',
  name:'名称',
  path:[119.206742, 32.464552],
  icon:'icon-gl-qbb'
}]

// iconConfig.model = 'line',data 的数据格式
[{
  id:'1',
  name:'名称',
  path:[[119.206742, 32.464552],[119.206742, 32.464552]],
  config:{
    lineWidth:'6', // 线宽度
    lineColor:'red', // 线颜色
    selectWidth:'red', // 选中线宽度
    selectColor:'red', // 选中线颜色
  }
}]

isChecked

type:[Boolean] 图例是否选中

data

type:[Array] 图例数据

layer

type:[Object] 图例图层

事件

emit: layer-click

图例点击事件触发

参数

• config:[Object] 图例的iconConfig
• isChecked:[Boolean] 图例是否选中

emit: load-layer

图例加载数据queryData 回调

参数

• status:[String] 'start' 开始加载数据 'error' 数据加载报错 'end' 数据加载结束

emit: point-click

图例图层点位点击回调

参数

• event:{type:String} 事件
• point:{pointIndex:number, pathIndex:number, pathData:* } 节点相关信息
• config:[Object] 图例的iconConfig

emit: query-callback

model 未定义 （或者不是 'point','line','lk'） 加载数据queryData 回调

参数

• res:[Object] 加载数据queryData 返回结果
• config:[Object] 图例的iconConfig

方法

onIconClick

切换图例是否选中状态，图层显示与否

MvMapMenu

MvMapMenu 是一个可配置的菜单组件，将多个MvMapIcon组合成而成，默认显示所有基础功能图例

使用

在MvMap组件内引入

例：

<template>
  <mv-map 
    ref="mvMap">
    <!-- 默认菜单 -->
    <mv-map-menu
      @layer-click="layerClick"
      @point-click="pointClick"
      @load-layer="loadLayer"
      @query-callback="queryCallback"
    ></mv-map-menu>
    <!-- 自定义菜单 -->
    <mv-map-menu
      :menuConfig="menuConfig"
      @layer-click="layerClick"
      @point-click="pointClick"
      @load-layer="loadLayer"
      @query-callback="queryCallback"
    ></mv-map-menu>
  </mv-map>
</template>

<script>
export default {
  data () {
    return {
      menuConfig:{
        topConfig: [
          'lk','sxt',
          {
            type:'custom',
            name:'自定义图例',
            img:[require('@/assets/images/mv-map-img/icon-fwq.png'),require('@/assets/images/mv-map-img/icon-ddzx-active.png')]
          }
        ],
        leftConfig: ['gq', 'fwq'],
        bottomConfig: ['sn', 'ql'],
        className: 'demo-menus-box' // 图标菜单组件class
      }
    }
  }
}
</script>

<style scoped>
.demo-menus-box{
  left: 70%;
}
</style>

默认菜单配置参数

{
  topConfig: ['lk','sxt','qbb','jdd','dlsj','jycl','jc','zfc'],
  leftConfig: ['gq', 'fwq', 'sfz', 'qd', 'etc', 'tcq'],
  bottomConfig: ['sn', 'ql', 'sd', 'lx', 'zh'],
  menuWidth: '2.5vw', // 菜单按钮宽
  menuHeight: '2.5vw', // 菜单按钮高
  className: 'mv-menu-box' // 图标菜单组件class
}

事件

emit: layer-click

图例点击事件触发

参数

• config:[Object] 图例的iconConfig
• isChecked:[Boolean] 图例是否选中

emit: load-layer

图例加载数据queryData 回调

参数

• status:[String] 'start' 开始加载数据 'end' 数据加载完成

emit: point-click

图例图层点位点击回调

参数

• event:{type:String} 事件
• point:{pointIndex:number, pathIndex:number, pathData:* } 节点相关信息
• config:[Object] 图例的iconConfig

emit: query-callback

model 未定义 （或者不是 'point','line','lk'） 加载数据queryData 回调 参数

• res:[Object] 加载数据queryData 返回结果
• config:[Object] 图例的iconConfig

MvMapDialog

MvMapDialog 是地图弹框，可传递经纬度在相应的地方打开弹框，已配置两种主题

使用

在MvMap组件内引入

例：

<template>
  <mv-map 
    ref="mvMap">
    <!-- 图例 -->
    <mv-map-icon
      v-for="item in iconConfigArr"
      :key="item.type"
      :iconConfig="item"
      @layer-click="layerClick"
      @point-click="pointClick"
      @load-layer="loadLayer"
    ></mv-map-icon>

    <!-- 弹框 -->
    <mv-map-dialog
      ref="mapDialog"
      v-show="currentType"
      :title="currentData.name"
    >
      <div>{{ currentData.name }}</div>
    </mv-map-dialog>
  </mv-map>
</template>

<script>
export default {
  data () {
    return {
      iconConfigArr: ['sxt', 'qbb'],
      currentType: null,
      currentData: {}
    }
  },
  methods: {
    /**
     * 图例点击事件
     */
    layerClick (config, checked) {
      if (checked) {
        // 打开图例
      } else {
        // 关闭图例
        this.currentType === config.type && (this.currentType = null)
      }
    },

    /**
     * 图例 图层接口调用状态回调
     */
    loadLayer (status) {
      console.log('图层加载数据' + status)
    },

    /**
     * 图例 图层 地图点位 点击事件回调
     */
    pointClick (e, data, config) {
      this.currentType = config.type
      this.currentData = { ...data.data }

      this.$refs.mapDialog.openDialog(['20vw', '20vh'], data.data.path)
    }
  }
}
</script>

事件

emit: closeMapDialog

关闭弹框触发

方法

openDialog

显示弹框

参数

• size:[Array] 弹框尺寸 默认['5vw', '10vh']
• lngLat:[Array] 弹框显示经纬度 [lon,lat]
• offset:[Array] 弹框偏移量 [Int,Int] 默认[15, 0]
• className:[String] 弹框class 默认是当前主题class

基础操作

使用

例：

<template>
  <div>
    <!-- 引入地图 设置地图id -->
    <mv-map ref="demoMap" @map-load="mapLoad" id="demoMap"> </mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="mapMove">地图移动(设置中心点)</a-button>
    <a-button type="primary" @click="getMapCenter">获取中心点</a-button>
    <a-button type="primary" @click="setMapZoom">设置层级</a-button>
    <a-button type="primary" @click="setBounds">设置显示范围</a-button>
    <a-button type="primary" @click="setLimitBounds">设置可拖动区域</a-button>
    <a-button type="primary" @click="clearLimitBounds">取消可拖动区域</a-button>
    <a-button type="primary" @click="setMvMapFitView(null)">设置视野范围</a-button>
    <a-button type="primary" @click="setMvMapFitView(markers2)">设置指定视野范围</a-button>
    <a-button type="primary" @click="getMvMap()">获取地图实例</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      map:null,
      markers1:null,
      markers2:null
    }
  },
  methods:{
    /**
     * 地图初始化完成
     */
    mapLoad (map) {
      this.createAddMarkers()
    },
    /**
     * 地图移动
     */
    mapMove () {
      let lnglat = [119.378231 + 0.48058 * 1.5 * Math.random(), 32.458852 + 0.60079 * 1.5 * Math.random()]
      this.$mapSdk('demoMap').setMvMapCenterAndZoom(lnglat)
    },
    /**
     * 获取中心点
     */
    getMapCenter () {
      alert('当前地图中心点：' + this.$mapSdk('demoMap').getMvMapCenter())
    },
    /**
     * 设置层级
     */
    setMapZoom () {
      this.$mapSdk('demoMap').setMvMapCenterAndZoom(null, Math.floor(Math.random() * 7) + 5)
    },
    /**
     * 获取层级
     */
    getMapZoom () {
      alert('当前地图层级：' + this.$mapSdk('demoMap').getMvMapZoom())
    },
    /**
     * 设置显示范围
     */
    setBounds () {
      this.$mapSdk('demoMap').setMvMapBounds([118.27467, 32.255442], [119.609509, 31.714976])
    },
    /**
     * 设置可拖动区域
     */
    setLimitBounds () {
      this.$mapSdk('demoMap').setMvMapLimitBounds([118.27467, 32.255442], [119.609509, 31.714976])
    },
    /**
     * 取消可拖动区域
     */
    clearLimitBounds () {
      this.$mapSdk('demoMap').clearMvMapLimitBounds()
    },
    /**
     * 设置视野范围
     */
    setMvMapFitView (layers) {
      this.$mapSdk('demoMap').setMvMapFitView(layers)
    },
    /**
     * 创建标记点
     */
    createAddMarkers () {
      let points1 = [
        { icon: 'icon-gs-sxt', path: [118.206742, 32.464552], name: 'test1'},
      ]
      let points2 = [
        { icon: 'icon-gs-qbb', path: [120.396572, 32.391775], name: 'test3' },
        { icon: 'icon-gl-qbb', path: [119.393509, 32.323953], name: 'test4' },
      ]
      this.markers1 = this.$mapSdk('demoMap').createMvMapMarkerLayer(points1)
      this.markers2 = this.$mapSdk('demoMap').createMvMapMarkerLayer(points2)
    },
    /**
     * 获取地图实例
     */
    getMvMap() {
      this.map = this.$mapSdk('demoMap').getMvMap()
    }
  }
}
</script>

API

getMvMap() 获取地图实例

返回

map 地图实例

setMvMapCenterAndZoom(center, zoom) 地图中心点移动

参数

• center [lng,lat] 中心点坐标
• zoom [Array] 层级 非必传

getMvMapCenter() 获取地图中心点

返回

center:[lng,lat] 地图当前中心点经纬度坐标

getMvMapZoom() 获取地图层级

返回

center:[Number] 地图当前层级

setMvMapBounds(southWest, northEast) 设置地图显示范围

参数

• southWest [lng,lat] 西南角
• northEast [lng,lat] 东北角

setMvMapLimitBounds(southWest, northEast) 设置地图可拖动区域

参数

• southWest [lng,lat] 西南角
• northEast [lng,lat] 东北角

clearMvMapLimitBounds() 清除地图限制拖动区域

setMvMapFitView(layers) 设置视野范围

参数

• layers [Array] 图层集合

仅支持标记点图层和折线图层

点标记

使用

例：

<template>
  <div>
    <mv-map 
      ref="mvMap">
    </mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="createAddMarkers" >创建标记点</a-button >
    <a-button type="primary" @click="hideMarkers">隐藏标记点</a-button>
    <a-button type="primary" @click="showMarkers">显示标记点</a-button>
    <a-button type="primary" @click="removeMarkers">移除标记点</a-button>
    <a-button type="primary" @click="setMarkerIcon">修改标记点图标</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      markers: null,
    }
  },
  methods:{
    /**
     * 创建标记点
     */
    createAddMarkers () {
      let points = [
        { icon: 'icon-gs-sxt', path: [119.206742, 32.464552], name: 'test1', size: [38, 42] },
        { icon: 'icon-gl-sxt', path: [119.349907, 32.388627], name: 'test2' },
        { icon: 'icon-gs-qbb', path: [119.401749, 32.386017], name: 'test3' },
        { icon: 'icon-gl-qbb', path: [119.393509, 32.323953], name: 'test4' },
        <!-- 自定义内容 标记点 -->
        { content: '<div class="marker-icon">点</div>', path: [119.493416, 32.410657], name: 'test5', offset: [-15, -30] }
      ]
      this.markers && this.removeMarkers()
      this.markers = this.$mapSdk().createMvMapMarkerLayer(points, (e, data) => {
        alert('你点击了' + data.name)
      })
    },
    /**
     * 隐藏标记点
     */
    removeMarkers () {
      this.markers = this.$mapSdk().removeMvMapMarkerLayer(this.markers)
    },
    /**
     * 显示标记点
     */
    showMarkers () {
      this.$mapSdk().showMvMapMarkerLayer(this.markers)
    },
    /**
     * 移除标记点
     */
    hideMarkers () {
      this.$mapSdk().hideMvMapMarkerLayer(this.markers)
    },
    /**
     * 修改标记点图标
     */
    setMarkerIcon() {
      if (!this.markers) return
      this.markers.map(marker => {
        this.$mapSdk().setMvMapMarkerStyle(marker,'icon-gs-fwq')
      })
    }
  }
}
</script>
<style>
.marker-icon {
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  color: #4e4e4e;
  border-radius: 50%;
  text-align: center;
}
</style>

API

createMvMapMarkerLayer(data, callback) 创建标记点

参数

1.data:[Array]

data | 类型 | 说明 ---|---|--- name | String | 标记点名称 icon | String | 标记点图标名 size | String | 标记点图标 尺寸 path | Array | 经纬度 [lng,lat] offset | Array | 偏移量 callback:[Function] 标记点 click触发

2.callback(e, point)

• event:{type:String,lnglat} 触发事件对象
• point:{name,path...} 标记点相关信息

返回

markers [Array] 多个标记点实例

removeMvMapMarkerLayer(markers) 移除标记点

参数

markers:[Array] 多个标记点实例

showMvMapMarkerLayer(markers) 显示标记点

参数

markers:[Array] 多个标记点实例

hideMvMapMarkerLayer(markers) 隐藏标记点

参数

markers:[Array] 多个标记点实例

setMvMapMarkerStyle(marker, icon) 修改标记点图标

参数

• marker:[Object] 标记点实例
• icon:[String | Object] 图标名称，或图标配置

icon | 类型 | 说明 ---|---|--- icon | String | 图标名称 size | Array | 图标尺寸

文本标记

使用

例：

<template>
  <div>
    <mv-map ref="mvMap" :mapConfig="mapConfig"> </mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="createTextMarker" >创建文本标记</a-button>
    <a-button type="primary" @click="hideTextMarker">隐藏文本标记</a-button>
    <a-button type="primary" @click="showTextMarker">显示文本标记</a-button>
    <a-button type="primary" @click="removeTextMarker">移除文本标记</a-button>
    <a-button type="primary" @click="setTextMarker">设置文本标记</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mapConfig: {
        zoom: 11,
        center: [120.235403, 31.420177]
      },
      textMarkers: null
    }
  },
  methods:{
    
    /**
     * 创建文本标记
     */
    createTextMarker () {
      this.textMarkers && this.removeTextMarker()
      const data = [{
        text: '太湖隧道',
        offset: [0, 20],
        path: [120.178245, 31.447435],
        style: {
          width: '100px',
          height: '30px',
          backgroundColor: 'rgba(6,253,201,0.3)',
          border: '1px solid #06fdc9',
          color: '#c3fff2',
          fontSize: '16px',
          borderRadius: 0,
          lineHeight: '28px',
          textAlign: 'center'
        }
      }, {
        text: '邀贤山隧道',
        offset: [0, 30],
        path: [120.054289, 31.517331],
        style: {
          'width': '100px',
          'height': '30px',
          'background-color': 'rgba(225,157,0,0.4)',
          'border': '1px solid rgba(225,157,0,1)',
          'color': '#c3fff2',
          'font-size': '16px',
          'border-radius': 0,
          'line-height': '28px',
          'text-align': 'center'
        }
      },]
      this.textMarkers = this.$mapSdk().createMvMapTextMarker(data, (e, data) => {
        alert('你点击了文本标签：' + data.text)
      })
    },
    /**
     * 移除文本标记
     */
    removeTextMarker () {
      this.$mapSdk().removeMvMapTextMarker(this.textMarkers)
    },
    /**
     * 隐藏文本标记
     */
    hideTextMarker () {
      this.$mapSdk().hideMvMapTextMarker(this.textMarkers)
    },
    /**
     * 显示文本标记
     */
    showTextMarker () {
      this.$mapSdk().showMvMapTextMarker(this.textMarkers)
    },
    /**
     * 设置文本标记
     */
    setTextMarker () {
      if (this.textMarkers) {
        const config = {
          text: '更改文本',
          style: {
            backgroundColor: 'red'
          }
        }
        this.textMarkers.forEach(textMarker => {
          this.$mapSdk().setMvMapTextMarker(textMarker, config)
        })
      }

    },
  }
}
</script>

API

createMvMapTextMarker(data, callback) 创建文本标记

参数

1.data:[Array]

data | 类型 | 说明 ---|---|--- text | String | 文本标记内容 path | Array | 经纬度 [lng,lat] offset | Array | 偏移量 style | Object | 样式 callback:[Function] 文本标记 click触发

2.callback(e, data)

• event:{type:String,lnglat} 触发事件对象
• data:{text,path...} 文本标记相关信息

返回

textMarkers [Array] 多个文本标记实例

removeMvMapTextMarker(textMarkers) 移除文本标记

参数

textMarkers:[Array] 多个文本标记实例

showMvMapTextMarker(textMarkers) 显示文本标记

参数

textMarkers:[Array] 多个文本标记实例

hideMvMapTextMarker(textMarkers) 隐藏文本标记

参数

textMarkers:[Array] 多个文本标记实例

setMvMapMarkerStyle(textMarker, config) 修改文本标记

参数

• textMarker:[String] 文本标记实例

• config:[Object] 文本标记配置

config | 类型 | 说明 ---|---|--- text | String | 文本内容 style | Object | 文本样式

点聚合

使用

例：

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建点聚合</a-button>
    <a-button type="primary" @click="remove">移除点聚合</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cluster: null,
    }
  },
  methods:{
    /**
     * 创建点聚合
     */
    create () {
      let points = []
      for (let i = 0; i < 100; i++) {
        points.push({
          name: '情报板',
          icon: 'icon-gl-qbb',
          path: [119.206742 + 0.48058 * 0.1 * Math.random(), 32.464552 + 0.60079 * 0.1 * Math.random()],
          size: [20, 20],
          type: 0
        })
      }
      const config = {
        className:'demo-cluster',
        backgroundColor:'green',
        color:'#fff'
      }
      this.cluster = this.$mapSdk().createMvMapMarkerCluster(points, config, (e, data) => {
        alert('你点击了点聚合')
      })
    },
    /**
     * 移除点聚合
     */
    remove () {
      this.cluster && this.$mapSdk().removeMvMapMarkerCluster(this.cluster)
    },
  }
}
</script>

<style>
// 点聚合样式
.demo-cluster{
  border: 1px solid #fff;
}
</style>

API

createMvMapMarkerCluster(data,config, callback) 创建点聚合

参数

1.data [Array] 点数据

data | 类型 | 说明 ---|---|--- name | String | 点标记名称 path | [lng,lat] | 经纬度 icon | String | 图标名称 size | Array | 图标大小

2.config [Object] 点聚合自定义样式

config | 类型 | 说明 ---|---|--- className | String | class名 backgroundColor | String | 背景色 color | String | 字体色

3.callback [Function] 点点聚合击回调

callback(e,data) -e [Object] 触发事件对象 -data [Array] 点聚合数据

返回

cluster [Object] 点聚合实例

removeMvMapMarkerCluster(cluster) 移除点聚合

参数

• cluster 点聚合实例

折线

使用

例：

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建折线</a-button>
    <a-button type="primary" @click="remove">移除折线</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      lineList: null,
    }
  },
  methods:{
    /**
     * 创建折线
     */
    create () {
      let data = [
        {
          name: 'test',
          path: [
            [120.338348, 31.458074],
            [120.332769, 31.453736],
            [120.328542, 31.450551],
            [120.32498, 31.448391],
            [120.317899, 31.444949],
            [120.301848, 31.437736],
            [120.294016, 31.434166],
            [120.286227, 31.430907],
            [120.275048, 31.427264],
            [120.26552, 31.423913],
            [120.257281, 31.42135],
            [120.245779, 31.420086],
            [120.236338, 31.420709],
            [120.234514, 31.421093],
            [120.234514, 31.421093],
          ],
          config: {
            lineWidth: 8,
            lineColor: '#FF0000',
            selectWidth: 10,
            selectColor: '#2eff00',
          }
        }, {
          name: 'test1',
          path: [
            [120.234514, 31.421093],
            [120.217949, 31.426238],
            [120.208078, 31.431603],
            [120.201621, 31.43504],
            [120.155938, 31.459442],
            [120.138493, 31.46885],
            [120.137227, 31.469344],
          ],
          config: {
            lineWidth: 8,
            lineColor: '#00B2D5',
            selectWidth: 10,
            selectColor: '#FFEA00',
            lineStyle: 'dashed'
          }
        }]
      this.lineList = this.$mapSdk().createMvMapLineLayer(data, (e, data) => {
        if (e.type === 'click') {
          alert('你点击了折线：' + data.name)
        }
        if (e.type === 'mouseover') {
          console.log('line mouseover')
        }
        if (e.type === 'mouseout') {
          console.log('line mouseout')
        }
      })
    },
    /**
     * 移除折线
     */
    remove () {
      this.lineList && this.$mapSdk().removeMvMapLineLayer(this.lineList)
    }
  }
}
</script>

API

createMvMapLineLayer(data, callback) 创建点聚合

参数

1.data [Array] 点数据

data | 类型 | 说明 ---|---|--- name | String | 线名称 path | [[lng,lat]] | 线 经纬度 数组过个点组成 lineColor | String | 线条颜色 lineWidth | String | 线条宽度 lineStyle | String | 线条样式 实线:solid，虚线:dashed

2.callback [Function] 线点击 悬浮回调函数 callback(e,data) -e [Object] 触发事件对象 e.type 是触发事件类型 -data [Array] 触发折线数据

返回

lineList [Array] 折线实例数组

removeMvMapLineLayer(line) 移除点聚合

参数

• line [Object | Array] 折线实例 可以是一条或多条折线

行政边界区域

使用

例：

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 表单 -->
    <a-form-model>
      <a-form-model-item label="地区code">
        <a-input v-model="areaConfig.code" placeholder="地区code" />
      </a-form-model-item>
      <a-form-model-item label="地区名">
        <a-input v-model="areaConfig.codeName" placeholder="地区名" />
      </a-form-model-item>
      <a-form-model-item label="区域类型">
        <a-radio-group v-model="areaConfig.depth">
          <a-radio :value="1"> 省级 </a-radio>
          <a-radio :value="2"> 市级 </a-radio>
          <a-radio :value="3"> 县级 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="填充色">
        <a-input v-model="areaConfig.fillColor" placeholder="填充色" />
      </a-form-model-item>
      <a-form-model-item label="地级市边界颜色">
        <a-input v-model="areaConfig.cityBorderColor" placeholder="地级市边界颜色" />
      </a-form-model-item>
      <a-form-model-item label="县边界颜色" v-show="areaConfig.depth !== 1">
        <a-input v-model="areaConfig.countyBorderColor" placeholder="县边界颜色" />
      </a-form-model-item>
      <a-form-model-item label="外界遮罩">
        <a-switch v-model="areaConfig.outsideFill" />
      </a-form-model-item>
      <a-form-model-item label="边界颜色" v-show="areaConfig.outsideFill">
        <a-input v-model="outsideFill.countyBorderColor" placeholder="边界颜色" />
      </a-form-model-item>
      <a-form-model-item label="边界宽度" v-show="areaConfig.outsideFill">
        <a-input v-model="outsideFill.strokeBorderWidth" placeholder="边界宽度" />
      </a-form-model-item>
      <a-form-model-item label="图层遮罩颜色" v-show="areaConfig.outsideFill">
        <a-input v-model="outsideFill.fillColor" placeholder="图层遮罩颜色" />
      </a-form-model-item>
      <a-form-model-item label="图层遮罩透明度" v-show="areaConfig.outsideFill">
        <a-input v-model="outsideFill.fillOpacity" placeholder="图层遮罩透明度" />
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="create">开始绘制</a-button>
        <a-button type="primary" @click="remove">清除</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
export default {
  data () {
    return {
      areaConfig: {
        codeName: "江苏省",
        code: "320000",
        depth: 1,
        fillColor: 'rgba(255,255,255,0.2)',
        cityBorderColor:'#E9F6FE',
        countyBorderColor:'rgba(255,255,255,0.1)',
        outsideFill:false
      },
      outsideFill:{
        strokeColor:'#fff',
        strokeBorderWidth:2,
        fillColor:'rgba(1,49,133,1)',
        fillOpacity:1,
        bubble:false,
      },
      provinceLayer: null,
    }
  },
  methods:{
    /**
     * 绘制行政边界区域
     */
    async create () {
      this.remove ()
      const config = this.areaConfig.outsideFill ? {...this.areaConfig, ...{ outsideFill:this.outsideFill }} : this.areaConfig
      this.provinceLayer = await this.$mapSdk().createMvMapProvince(config)
    },
    /**
     * 移除行政边界区域
     */
    remove () {
      this.$mapSdk().removeMvMapProvince(this.provinceLayer)
    },
  }
}
</script>

API

createMvMapProvince(config) 行政边界区域

type:[Promise] 参数

• config [Object] 配置

config | 类型 | 说明 ---|---|--- code | String | 区域code depth | Number | 区域类型 0：省级 1：市级 2：县级 fillColor | String | 行政区域填充色 fillFunction | Function | 行政区域填充色函数 return color cityBorderColor | String | 行政区域边界颜色 countyBorderColor | String | 县边界颜色 outsideFill | Object | 绘制外界遮罩 无该参数不绘制外界遮罩

默认以code为准，其次是codeName

outsideFill 配置

outsideFill | 类型 | 说明 ---|---|--- strokeColor | String | 边界颜色 strokeBorderWidth | Number | 边界宽度 fillColor | String | 图层遮罩颜色 fillOpacity | Number | 图层遮罩透明度 bubble | Boolean | 图层遮罩是否允许点击事件冒泡 默认false

返回

type:[Object] { province, polygon }

• province:[Object] 行政区域图层对象
• polygon:[Object] 外界遮罩图层对象

removeMvMapProvince(provinceLayer) 移除行政边界区域图层

参数

• provinceLayer { province, polygon }

热力图

使用

例：

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建热力图</a-button>
    <a-button type="primary" @click="hide">隐藏热力图</a-button>
    <a-button type="primary" @click="show">显示热力图</a-button>
    <a-button type="primary" @click="remove">移除热力图</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      heatLayer: null
    }
  },
  methods:{
    /**
     * 创建热力图
     */
    create () {
      const data = [{
        lat: 32.059703,
        lng: 118.795932,
        count: 8
      }, {
        lat: 32.464552,
        lng: 119.206742,
        count: 4
      }, {
        lat: 32.323953,
        lng: 119.393509,
        count: 11
      }]
      const heatConfig = {
        max: 10
      }
      this.remove()
      this.heatLayer = this.$mapSdk().createMvMapHeatMap(data, heatConfig)
    },
    /**
     * 隐藏热力图
     */
    hide () {
      this.heatLayer && this.heatLayer.hide()
    },
    /**
     * 显示热力图
     */
    show () {
      this.heatLayer && this.heatLayer.show()
    },
    /**
     * 移除热力图
     */
    remove () {
      this.$mapSdk().removeHeatMap(this.heatLayer)
    },
  }
}
</script>

API

createMvMapHeatMap(data, config) 创建热力图

参数

• data [Array] 热力图数据

data | 类型 | 说明 ---|---|--- lng | Number | 经度 lat | Number | 纬度 count | Number | 总数

• config [Object] 配置

config | 类型 | 说明 ---|---|--- radius | Number | 热力图中单个点的半径 25 opacity | Array | 热力图透明度区间 [0,1] zooms | Array | 支持的缩放级别范围 [3,20] max | Number | 最大权重值 gradient | Object | 热力图的渐变区间

gradient: {
  0.5: 'blue',
  0.65: 'rgb(117,211,248)',
  0.7: 'rgb(0, 255, 0)',
  0.9: '#ffea00',
  1.0: 'red'
}

返回

type:[Object] 热力图 图层

removeHeatMap(layer) 移除热力图 图层

参数

• layer 热力图 图层

信息窗体

使用

例：

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 信息窗体 -->
    <div class="info-window" ref="windowInfo" v-show="windowInfoVisible">信息窗体</div>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建信息窗体</a-button>
    <a-button type="primary" @click="remove">移除信息窗体</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      windowInfoVisible:false,
      windowInfo:null
    }
  },
  methods:{
    /**
     * 创建信息窗体
     */
    create () {
      this.windowInfoVisible = true
      const path = [119.378231 + 0.48058 * 1.5 * Math.random(), 32.458852 + 0.60079 * 1.5 * Math.random()]
      let data = {
        content: this.$refs.windowInfo,
        path
      }
      
      this.windowInfo = this.$mapSdk().createMvMapWindowInfo(data, false)
    },
    /**
     * 关闭信息窗体
     */
    remove () {
      this.windowInfoVisible = false
      // 关闭
      this.windowInfo.close()
    },
  }
}
</script>

API

createMvMapWindowInfo(data, isCustom) 创建信息窗体

参数

• data [Array] 热力图数据

data | 类型 | 说明 ---|---|--- path | [lng,lat] | 弹框显示位置 content | HTML DOM | 弹框内容 offset | Array | 弹框偏移量

• isCustom [Boolean]] 是否使用自定义组件

返回

type:[Object] 信息窗体实例

windowInfo.close() 关闭信息窗体

图片图层

使用

例：

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建图片图层</a-button>
    <a-button type="primary" @click="hide">隐藏图片图层</a-button>
    <a-button type="primary" @click="show">显示图片图层</a-button>
    <a-button type="primary" @click="remove">移除图片图层</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageLayer:null
    }
  },
  methods:{
    /**
     * 创建图片图层
     */
    create () {
      this.imageLayer = this.$mapSdk().createMvMapImgLayer(
        require('@/assets/images/map.png'),
        [105.054228, 19.197873],
        [130.202934, 42.1416],
        [8, 10], 2
      )
    },
    /**
     * 隐藏图片图层
     */
    hide () {
      this.imageLayer && this.imageLayer.hide()
    },
    /**
     * 显示图片图层
     */
    show () {
      this.imageLayer && this.imageLayer.show()
    },
    /**
     * 移除图片图层
     */
    remove () {
      this.$mapSdk().removeMvMapImgLayer(this.imageLayer)
    },
  }
}
</script>

API

createMvMapImgLayer(img, southWest, northEast, zooms, zIndex) 创建图片图层

参数

• img [String] 图片地址
• southWest [lng,lat] 西南角
• northEast [lng,lat] 东北角
• zooms [Array] 显示层级范围 默认 [8, 18]
• zIndex [Number] 图层叠加的顺序值，0表示最底层。默认zIndex：1

返回

type:[Object] 图片 图层

removeMvMapImgLayer(layer) 移除图片 图层

参数

• layer 图片 图层

海量点

使用

例：

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建海量点</a-button>
    <a-button type="primary" @click="remove">移除海量点</a-button>
    <a-button type="primary" @click="setData">添加海量点数据</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data:[],
      layer:null
    }
  },
  methods:{
    /**
     * 创建海量点
     */
    create () {
      if (this.layer) {
        this.setData()
        return
      }
      businessApi.getSXTMapLayerList().then(res => {
        this.data = res.data.map(item => {
          return {
            ...item,
            icon: 'icon-gl-sxt',
            lnglat:item.path
          }
        })
        const config = {
          iconSize: [32, 30],
          offset: [-16, -15]
        }
        this.$mapSdk().createMvMapMassPoint(this.data, config, this.pointClick).then(res => {
          this.layer = res
        })
      })
    },
    /**
     * 移除海量点
     */
    remove () {
      this.$mapSdk().setMvMapMassPoint(this.layer, null)
    },
    /**
     * 添加海量点数据
     */
    setData () {
      this.$mapSdk().setMvMapMassPoint(this.layer, this.data)
    },
    /**
     * 海量点点击回调
     */
    pointClick (e, data) {
      alert('你点击了海量点：' + data.data.name)
    }
  }
}
</script>

API

createMvMapMassPoint(data, config, callBack) 创建海量点图层

参数

• data [Array] 数据

data | 类型 | 说明 ---|:---:|--- id | String | 点id name | String | 点提示信息 lnglat | Array | 点经纬度 icon | String | 点图标名 zooms | String | 点展示层级范围 zIndex | String | 点与其它图层的叠加顺序

• config 海量点配置

config | 类型 | 说明 ---|:---:|--- iconSize | Array 或 Function | 点图标 为函数时要返回一个数组 [width, height] offset | Array | 偏移量 fitView | Boolean | 是否在绘制后自动调整地图视野以适合全部轨迹，默认false

返回

type:[Object] 海量点图层

setMvMapMassPoint(layer, data) 设置海量点数据

参数

• layer 海量点 图层
• data 海量点 数据

海量线

使用

例：

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建海量线</a-button>
    <a-button type="primary" @click="remove">移除海量线</a-button>
    <a-button type="primary" @click="setData">添加海量线数据</a-button>
  </div>
</template>

<script>
import roadJson from '@/assets/json/js-one-road.json'

export default {
  data () {
    return {
      data:[],
      layer:null
    }
  },
  methods:{
    /**
     * 创建海量线
     */
    create () {
      if (this.layer) {
        this.setData()
        return
      }
      this.data = roadJson.features.map((line, index) => {
        return {
          name:index,
          path: line.geometry.coordinates,
          // 路线样式配置
          config: {
            lineWidth: 5,
            lineColor: index % 2 ? 'yellow' : 'green',
            selectWidth: 6,
            selectColor: 'red'
          }
        }
      })
      const config = {
        fitView: true
      }
      this.$mapSdk().createMvMapMassLine(this.data, config, this.pointClick).then(res => {
        this.layer = res
      })
    },
    /**
     * 移除海量线
     */
    remove () {
      this.$mapSdk().setMvMapMassLine(this.layer, null)
    },
    /**
     * 添加海量线数据
     */
    setData () {
      this.$mapSdk().setMvMapMassLine(this.layer, this.data)
    },
    /**
     * 海量线点击回调
     */
    pointClick (e, data) {
      alert('你点击了海量线:' + data.pathData.name)
    }
  }
}
</script>

API

createMvMapMassLine(data, config, callBack) 创建海量线图层

参数

• data [Array] 数据

data | 类型 | 说明 ---|:---:|--- id | String | 线id name | String | 线提示信息 path | Array | 线 经纬度数组 [[lng,lat],[lng,lat],....] config | Object | 线样式配置

config 线样式配置 config | 类型 | 说明 ---|:---:|--- lineWidth | Number | 线宽度 lineColor | String | 线颜色 dirArrowStyle | Boolean | 线是否绘制箭头样式，默认false selectWidth | Number | 线选中宽度 selectColor | String | 线选中颜色

• config 海量线配置

config | 类型 | 说明 ---|:---:|--- fitView | Boolean | 是否在绘制后自动调整地图视野以适合全部轨迹，默认false

返回

type:[Object] 海量线图层

setMvMapMassLine(layer, data) 设置海量线数据

参数

• layer 海量线 图层
• data 海量线 数据

形状绘制

使用

例：

<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap" :mapConfig="mapConfig"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="drawRegion('rectangle')">绘制矩形</a-button>
    <a-button type="primary" @click="drawRegion('rectangle', true)">绘制可编辑矩形</a-button>
    <a-button type="primary" @click="drawRegion('circle')">绘制圆形</a-button>
    <a-button type="primary" @click="drawRegion('circle', true)">绘制可编辑圆形</a-button>
    <a-button type="primary" @click="drawRegion('polygon')">绘制多边形</a-button>
    <a-button type="primary" @click="drawRegion('polygon', true)">绘制可编辑多边形</a-button>
    <a-button type="primary" @click="removeCurrentId">移除指定id绘制内容</a-button>
    <a-button type="primary" @click="removeCurrentLayer">移除指定layer绘制内容</a-button>
    <a-button type="primary" @click="remove">移除所有绘制内容</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mapConfig: {
        zoom: 11,
        center: [119.201111, 32.391081]
      },
      markers: null,
      currentId: null,
      currentLayer: null
    }
  },
  methods:{
    /**
     * 创建标记点
     */
    createAddMarkers () {
      let points = [
        { icon: 'icon-gs-sxt', path: [119.206742, 32.464552], name: 'test1', size: [38, 42] },
        { icon: 'icon-gl-sxt', path: [119.349907, 32.388627], name: 'test2' },
        { icon: 'icon-gs-qbb', path: [119.396572, 32.391775], name: 'test3' },
        { icon: 'icon-gl-qbb', path: [119.393509, 32.323953], name: 'test4' },
      ]
      this.markers = this.$mapSdk().createMvMapMarkerLayer(points, (e, data) => {
        alert('你点击了' + data.name)
      })
    },
    /**
     * 创建形状绘制
     */
    drawRegion (type, edit) {
      const id = new Date().getTime()
      // 形状绘制配置
      const drawConfig = {
        type,
        id,
        edit,
        lineColor: '#ffffff',
        areaColor: edit ? '#ff0000' : '#00b0ff',
      }
      this.$mapSdk().drawMvMapRegion(drawConfig, this.markers, (layer, config, markers) => {
        // 保存当前绘制内容的id和图层
        this.currentId = config.id
        this.currentLayer = layer

        markers.forEach(item => {
          this.$mapSdk().setMvMapMarkerStyle(item, 'icon-gl-sn')
        })
        console.log("区域内点有" + markers.length + '个')
      })
    },
    /**
     * 移除所有绘制内容
     */
    remove () {
      this.$mapSdk().clearMvMapRegion()
    },
    /**
     * 移除指定id绘制内容
     */
    removeCurrentId () {
      this.currentId && this.$mapSdk().clearMvMapRegion(this.currentId)
    },
    /**
     * 移除指定layer绘制内容
     */
    removeCurrentLayer () {
      this.currentLayer && this.$mapSdk().clearMvMapRegion(this.currentLayer)
    }
  }
}
</script>

API

drawMvMapRegion(config, markers, callback) 绘制区域

参数

1.config [Object|String] 绘制配置

config 为string时，默认设置绘类型

config 为Object时：

config | 类型 | 说明 ---|:---:|--- type | String | 绘制类型 取值 'rectangle'、'circle'、'polygon' id | String | id areaColor | String | 区域颜色 lineColor | String | 边框颜色 edit | Boolean | 是否编辑

2.markers [Array] 标记点点集合

3.callback [Function] 回调函数

callback(layer, config, markers)

• layer [Object] 绘制图层
• config [Object] 绘制配置
• markers [Array] 绘制范围内的点标记数组

clearMvMapRegion(layer) 清除绘制内容

参数

• 不传时清除所有绘制图层
• 传id，移除指定id绘制内容
• 传layer，移除指定layer绘制内容