vue百度离线地图v3.0---区域划分

1. 效果图

2. 用到的工具和组件

请先下载下面js部分用到的工具和组件，css也放在这里，如有需要可以自行下载

百度地图下载：https://pan.baidu.com/s/1IUaissSB_xV0JZ2JSWhIiw 提取码：5l1u

3. 区域划分功能实现代码

3.1 html部分

<template><div><div class="division_main"><div class="nav" v-if="isCollapse"><h3>区划图层</h3><el-divider></el-divider><div class="content"><ul><li ref="li" v-for="(item, index) in areaArr" :key="index" tabindex="1" @click="getArea(item)"><span>{{ item.name }}</span></li></ul></div></div><div class="map" ref="map"><div class="collapseBtn" @click="isCollapse = !isCollapse"><img src="../../../assets/img/map/collapse.png" class="collapseImg" alt="" srcset="" /></div><init-map @mapObj="mapObj"></init-map></div><el-card class="options" v-if="isOptions"><div slot="header"><h4>属性设置</h4></div><div class="content"><div>区域名称：<el-input v-model="options.name" size="mini"></el-input></div><div>填充色：<el-color-picker v-model="options.fillColor" size="medium"></el-color-picker></div><div v-if="isUpdate">操作：<i class="el-icon-delete" @click="doDelete"></i></div><div><el-button size="mini" @click="doCancle">取消</el-button><el-button size="mini" @click="doSavePolygon">保存</el-button></div></div></el-card></div><div class="save"><el-button type="primary" v-show="isConfirm" size="mini" :disabled="disabled" @click="drawPolygon">划分区域</el-button><div v-show="!isConfirm"><el-button type="primary" size="mini" @click="clearAll">清除</el-button><el-button type="primary" size="mini" @click="finishPolygon">完成</el-button></div></div></div>
</template>

3.2 js部分

思路：
1. 把创建marker，polygon的函数封装在一个单独的utils.js文件中，方便维护
2. 把加载地图封装在一个单独的initMap.vue组建中，可以在多个页面中调用，减少代码冗余
3. 画多边形：
①点击页面右上角按钮，开始监听鼠标的getLngLat事件，根据用户点击的地方生成marker
②点击清除按钮，清除地图上用户创建的polygon；点击完成按钮保存用户创建的polygon，通过isOptions控制弹出设置名称和颜色的部分
③点击取消，清除用户地图上创建的polygon；点击保存，保存用户创建的polygon到左侧的列表中

<script>
import initMap from './initMap.vue'import { createMarker, createPolygon } from './utils'export default {name: 'division',components: {initMap},data() {return {map: undefined,tempMarkerArr: [], // 新增polygon时的marker数据isCollapse: true,isConfirm: true, // 是否确认画的多边形isOptions: false, // polygon配置信息面板isUpdate: false,disabled: false, // 划分区域按钮// polygon的配置信息options: {polygon: undefined,name: '区域',fillColor: '#409EFF',polygonArr: []},// 模拟polygon数组areaArr: [{polygon: undefined,name: '区域一',fillColor: '#409EFF',polygonArr: [new window.BMap.Point(117.158469, 31.781578),new window.BMap.Point(117.15236, 31.779982),new window.BMap.Point(117.15272, 31.778201),new window.BMap.Point(117.152756, 31.775316),new window.BMap.Point(117.15908, 31.774917),new window.BMap.Point(117.162637, 31.778662)]},{polygon: undefined,name: '区域二',fillColor: '#ea969c',polygonArr: [new window.BMap.Point(117.174207, 31.790448),new window.BMap.Point(117.179848, 31.790141),new window.BMap.Point(117.180855, 31.78655),new window.BMap.Point(117.178303, 31.783174),new window.BMap.Point(117.173524, 31.784095),new window.BMap.Point(117.169105, 31.788668)]}]}},created() {// 获取初始化地图map对象this.mapObj()},methods: {mapObj(data) {this.map = data},clearAll() {this.tempMarkerArr.forEach(item => {this.map.removeOverlay(item)})this.map.setDefaultCursor('pointer')this.map.removeEventListener('click', this.getLngLat)this.isConfirm = truethis.disabled = false},// 开始绘制多边形drawPolygon() {this.map.setDefaultCursor('crosshair')this.map.addEventListener('click', this.getLngLat)this.disabled = true // 防止创建多个addEventListenerthis.isConfirm = falsethis.isOptions = falsethis.options = {polygon: undefined,name: '区域',fillColor: '#409EFF',polygonArr: []}},// 完成绘制多边形finishPolygon() {this.options.polygon = createPolygon(this.map, this.options.polygonArr)this.map.removeEventListener('click', this.getLngLat)this.map.setDefaultCursor('pointer')this.isOptions = truethis.isUpdate = falsethis.isConfirm = true},// 取消doCancle() {if (!this.isUpdate) {this.map.removeOverlay(this.options.polygon)this.tempMarkerArr.forEach(item => {this.map.removeOverlay(item)})}this.isOptions = falsethis.disabled = false},// 删除doDelete() {this.map.removeOverlay(this.options.polygon)this.areaArr.forEach((item, index) => {if (item.name === this.options.name) {this.areaArr.splice(index, 1)}})this.isOptions = falsethis.disabled = false},// 保存doSavePolygon() {if (this.isUpdate) {this.areaArr.forEach(item => {if (item.name === this.options.name) {item.polygon.setFillColor(this.options.fillColor)}})} else {this.tempMarkerArr.forEach(item => {this.map.removeOverlay(item)})this.options.polygon.setFillColor(this.options.fillColor)this.areaArr.push(this.options)}this.isOptions = falsethis.isConfirm = truethis.disabled = false},// 点击导航getArea(data) {if (data.polygon === undefined) {data.polygon = createPolygon(this.map, data.polygonArr)data.polygon.setFillColor(data.fillColor)}this.map.panTo(data.polygonArr[2])this.options = datathis.isOptions = truethis.isUpdate = true},// 根据用户点击的经纬度标点getLngLat(e) {const point = new window.BMap.Point(e.point.lng, e.point.lat)const markerIcon = require('../../../assets/img/map/square.png')const marker = createMarker(this.map, markerIcon, point)this.tempMarkerArr.push(marker)this.options.polygonArr.push(point)}}
}
</script>

vue百度离线地图v3.0---区域划分相关推荐

Vue-cli3实现web百度离线地图(v3.0)开发
需求实现基于Vue-cli3的web百度离线地图(v3.0)开发 Vue-cli3,目录如下,注意:需要把地图相关的文件放在public下,vue-cli2需要放在static下!!! 参考主要参 ...
vue百度离线地图v3.0---初始化地图
1. 百度离线文件百度网盘下载:https://pan.baidu.com/s/1Lz5BGeKD6lr4x36hRLyepQ 提取码:rnij 2. 百度离线地图瓦片下载器百度网盘下载:http ...
百度离线地图API2.0 百度离线地图api,已经修改源码
百度离线地图API2.0 百度离线地图api,已经修改源码,绕过服务端验证,除了路书等需要服务端数据支持的功能外,其余功能已经全部实现,包括常用的:地图示例.地图控件添加.覆盖物添加.信息窗口展示等等 ...
百度离线地图JSAPIV3.0
原文地址::百度离线地图JSAPIV3.0 - 百度文库相关文章 1.百度离线地图API V2.1 内含示例Demo,亲测可用----百度离线地图API V2.1 内含示例Demo,亲测可用 - 开 ...
vue整合百度离线地图api3.0
文章目录前言一.场景二.操作步骤 1.引入3.0js文件 2.创建map_load.js 3.修改bmap_offline_api_v3.0_min.js文件 3.1屏蔽ak验证 3.2加载mo ...
百度离线地图APIV2.0
离线地图资源,完全可脱离互联网访问,正在发愁局域网或内网使用地图定位的小伙伴们福音来了......哈哈哈哈哈!!! 支持各大主流浏览器 IE7.8.9.10.11,火狐.360浏览器.谷歌浏览器如果 ...
百度离线地图 api3.0
仅自己记录,参照博客为以下地址: https://blog.csdn.net/wml00000/article/details/82219015 1.链接:https://pan.baidu.com/ ...
VUE 百度离线地图的下载与使用
演示demo链接: https://pan.baidu.com/s/1rk1k6BCpZK9CpJqHF-DApg 提取码: 2ciq 下载后结构为: 将该文件放在static下新建一个Map文件夹 ...
百度离线地图示例之三：矢量图
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...