Mv Map

介绍

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

特性

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

后台服务地址

下载地址

ssh://git@lab.microvideo.cn: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绘制内容