vueBaiDuMap实现多边形回显
https://blog.csdn.net/m0_74149462/article/details/130420789
完整示例代码
vueBaiDuMap/vueBaiDuMap.vue
<!--
* @Description: vueBaiDuMap 使用 页面
* @Author: mhf
* @Date: 2023-04-27 10:44:08
-->
<template>
<div class="map">
<baidu-map
class="map"
:center="mapCenter"
:zoom="mapZoom"
:scroll-wheel-zoom="true"
@ready="onMapReady"
>
<!-- 点聚合 -->
<bml-marker-clusterer :averageCenter="true">
<!-- 点 -->
<bm-marker
v-for="(item, index) in markerPoints"
:key="index"
:position="item"
:icon="markerIcon"
@click="markerClick(item)"
>
</bm-marker>
<!-- 点 -->
</bml-marker-clusterer>
<!-- 点聚合 -->
<!-- 多边形 -->
<bm-polygon
v-for="(item, index) in polygonPath"
:key="item.toString()"
:path="item"
stroke-color="#1492FF"
fill-color="#1492FF"
:fill-opacity="0.2"
:stroke-opacity="1"
:stroke-weight="3"
/>
<!-- 多边形 -->
<!-- 自定义控件 -->
<bm-control>
<el-button
style="margin: 20px 0 0 20px"
type="primary"
size="small"
@click="showDrawPolylineDialog"
>绘制折线</el-button
>
<el-button
style="margin: 20px 0 0 20px"
type="primary"
size="small"
@click="showDrawAreaDialog"
>绘制多边形弹窗</el-button
>
<el-button
style="margin: 20px 0 0 20px"
type="primary"
size="small"
@click="drawArea"
>{{ isDraw ? "删除多边形" : "绘制多边形" }}</el-button
>
<el-button
style="margin: 20px 0 0 20px"
type="primary"
size="small"
@click="getVisibleAreaPointsBtn"
>可视区坐标</el-button
>
</bm-control>
</baidu-map>
<!-- 自定义控件 -->
<!-- 弹窗 -->
<el-dialog
title="点位"
:visible.sync="dialogVisible"
width="39%"
:before-close="hideDialog"
>
<div>
{{ dialogData }}
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="hideDialog">取 消</el-button>
<el-button type="primary" @click="hideDialog">确 定</el-button>
</span>
</el-dialog>
<!-- 弹窗 -->
<drawPolylineDialog ref="drawPolylineDialog" />
<drawAreaDialog ref="drawAreaDialog" />
</div>
</template>
<script>
import drawPolylineDialog from "@/views/vueBaiduMap/drawPolylineDialog";
import drawAreaDialog from "@/views/vueBaiduMap/drawAreaDialog";
import { BmlMarkerClusterer } from "vue-baidu-map";
export default {
name: "vueBaiDuMap",
components: { drawPolylineDialog, drawAreaDialog, BmlMarkerClusterer },
props: {},
data() {
return {
mapCenter: { lng: 119.93344129237624, lat: 28.464762954747187 },
mapZoom: 13,
markerPoints: [
// {
// id: 1,
// name: "天安门",
// address: "北京市东城区东长安街",
// lng: "116.397515",
// lat: "39.908556",
// },
// {
// id: 2,
// name: "故宫博物馆",
// address: "北京市东城区景山前街4号",
// lng: "116.403369",
// lat: "39.924169",
// },
], // 存放点位数据, 数据格式如上（id，lng，lat必须）
points: require("./ponits.json").data, // 模拟接口数据
markerIcon: {
url: require("../../../public/img/forklift.png"),
size: {
width: 36,
height: 36,
},
}, // 点位图标
dialogVisible: false, // 是否展示弹窗
dialogData: null, // 弹窗中展示的数据
polygonPath: [], // 存放多边形数据
isDraw: false, // 绘制多边形/删除多边形
map: null, // 地图实例
visibleAreaPoints: {}, // 可视区坐标
};
},
methods: {
/**
* @Event 方法
* @description: 点位点击事件
* */
markerClick(data) {
// console.log(data)
this.dialogVisible = true;
this.dialogData = data;
},
/**
* @Interface 接口
* @description: 模拟数据请求 获取点位数据
* */
getPoints() {
// console.log(this.points)
this.points.forEach((item, index) => {
this.markerPoints.push({
id: item.clusterId,
lng: item.x,
lat: item.y,
});
});
},
/**
* @Event 方法
* @description: 关闭弹窗
* */
hideDialog() {
this.dialogVisible = false;
},
/**
* @Event 方法
* @description: 打开绘制折线弹窗
* */
showDrawPolylineDialog() {
this.$refs.drawPolylineDialog.showDialog();
},
/**
* @Event 方法
* @description: 打开绘制区域弹窗
* */
showDrawAreaDialog() {
this.$refs.drawAreaDialog.showDialog();
},
/**
* @Event 方法
* @description: 绘制区域
* */
drawArea() {
this.isDraw = !this.isDraw;
this.polygonPath = this.isDraw ? require("./areaPoints.json").data : [];
},
/**
* @Event 方法
* @description: 获取地图实例，并添加事件监听器
* */
onMapReady(map) {
this.map = map.map;
// console.log(map);
this.map.addEventListener("dragend", this.getVisibleAreaPoints); // 停止拖拽地图时触发
this.map.addEventListener("zoomend", this.getVisibleAreaPoints); // 地图更改缩放级别结束时触发触发此事件
},
/**
* @Event 方法
* @description: 获取可视区坐标
* */
getVisibleAreaPoints() {
// 当地图拖动结束后，获取地图的可视区坐标范围
const bounds = this.map.getBounds();
// 获取地图可视区域四个角的经纬度坐标
const northEast = bounds.getNorthEast();
const southEast = new BMap.Point(
northEast.lng,
bounds.getSouthWest().lat
);
const northWest = new BMap.Point(
bounds.getSouthWest().lng,
northEast.lat
);
const southWest = bounds.getSouthWest();
console.log("东北角的坐标：", northEast);
console.log("东南角的坐标：", southEast);
console.log("西北角的坐标：", northWest);
console.log("西南角的坐标：", southWest);
this.visibleAreaPoints = { northEast, southEast, northWest, southWest };
},
/**
* @Event 方法
* @description: 获取可视区坐标 --- 按钮点击
* */
getVisibleAreaPointsBtn() {
this.getVisibleAreaPoints();
this.$message.success(JSON.stringify(this.visibleAreaPoints));
},
},
created() {
this.getPoints();
},
mounted() {},
};
</script>
<style lang="scss" scoped>
.map {
width: 100%;
height: 100%;
}
</style>
vueBaiDuMap/areaPoints.json
{
"code": 1,
"message": "查询成功",
"data": [
[
{
"lng": 119.917344,
"lat": 28.510226
},
{
"lng": 119.868188,
"lat": 28.43961
},
{
"lng": 119.975123,
"lat": 28.424363
},
{
"lng": 119.99352,
"lat": 28.497783
},
{
"lng": 119.934591,
"lat": 28.467557
},
{
"lng": 119.954426,
"lat": 28.51632
}
],
[
{
"lng": 120.024565,
"lat": 28.513527
},
{
"lng": 119.971961,
"lat": 28.471114
},
{
"lng": 120.014504,
"lat": 28.413181
},
{
"lng": 120.009618,
"lat": 28.513019
},
{
"lng": 120.055898,
"lat": 28.454347
}
]
]
}
vueBaiDuMap/drawAreaDialog.vue
<!--
* @Description: vueBaiDuMap绘制自定义区域 弹窗 页面
* @Author: mhf
* @Date: 2023-04-27 11:37:11
-->
<template>
<el-dialog
title="绘制区域"
width="50%"
:visible.sync="dialogVisible"
:before-close="hideDialog"
:close-on-click-modal="false"
>
<div class="dialog-body">
<baidu-map
class="map"
:center="center"
:zoom="zoom"
:map-click="false"
:scroll-wheel-zoom="true"
@mousemove="syncPolygon"
@ready="handler"
@click="paintPolygon"
@rightclick="newPolygon"
>
<bm-polygon
:path="path"
v-for="path of polygonPath.paths"
:key="path.toString()"
stroke-color="#1492FF"
fill-color="#1492FF"
:fill-opacity="0.2"
:stroke-opacity="1"
:stroke-weight="3"
@click="alertpath"
/>
<bm-control>
<el-button type="danger" size="small" @click="toggle('polygonPath')">
{{ polygonPath.editing ? "停止绘制" : "开始绘制" }}
</el-button>
</bm-control>
</baidu-map>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="hideDialog">取 消</el-button>
<el-button type="primary" @click="hideDialog">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: "drawAreaDialog",
components: {},
props: {},
data() {
return {
dialogVisible: false,
haha: "百度地图",
center: { lng: 119.93344129237624, lat: 28.464762954747187 },
zoom: 13,
polygonPath: {
editing: false,
paths: [], // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
},
};
},
methods: {
handler({ BMap, map }) {
console.log(BMap, map);
},
getClickInfo(e) {
console.log(e.point.lng);
console.log(e.point.lat);
},
// 开启多边形绘制
toggle(name) {
this[name].editing = !this[name].editing;
// 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
if (this.polygonPath.paths && this.polygonPath.editing) {
this.polygonPath.paths = [];
}
},
// 鼠标移动时
syncPolygon(e) {
if (!this.polygonPath.editing) {
return;
}
const { paths } = this.polygonPath;
if (!paths.length) {
return;
}
const path = paths[paths.length - 1];
if (!path.length) {
return;
}
if (path.length === 1) {
path.push(e.point);
}
this.$set(path, path.length - 1, e.point);
},
// 鼠标左键点击时往路径里push一个点
newPolygon(e) {
if (!this.polygonPath.editing) {
return;
}
// 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
this["polygonPath"].editing = !this["polygonPath"].editing;
const { paths } = this.polygonPath;
if (!paths.length) {
paths.push([]);
}
const path = paths[paths.length - 1];
path.pop();
if (path.length) {
paths.push([]);
}
},
// 鼠标右键多边形绘制完成
paintPolygon(e) {
if (!this.polygonPath.editing) {
return;
}
const { paths } = this.polygonPath;
!paths.length && paths.push([]);
paths[paths.length - 1].push(e.point);
},
alertpath(e) {
console.log(e.currentTarget.so);
console.log(this.polygonPath.paths[0]);
},
/**
* @Event 方法
* @description: 关闭弹窗
* */
hideDialog() {
this.dialogVisible = false;
},
/**
* @Event 方法
* @description: 打开弹窗
* */
showDialog() {
this.dialogVisible = true;
},
},
created() {},
mounted() {},
};
</script>
<style lang="scss" scoped>
.dialog-body {
width: 100% !important;
height: 500px !important;
.map {
width: 100% !important;
height: 100% !important;
}
}
</style>
vueBaiDuMap/drawPolylineDialog.vue
<!--
* @Description: vueBaiDuMap绘制自定义折线 弹窗 页面
* @Author: mhf
* @Date: 2023-04-27 11:37:11
-->
<template>
<el-dialog
title="绘制折线"
width="43%"
:visible.sync="dialogVisible"
:before-close="hideDialog"
:close-on-click-modal="false"
>
<div class="dialog-body">
<baidu-map
class="map"
:center="mapCenter"
:zoom="mapZoom"
:scroll-wheel-zoom="true"
@mousemove="syncPolyline"
@click="paintPolyline"
@rightclick="newPolyline"
>
<bm-control>
<el-button size="small" type="danger" @click="toggle('polyline')">{{
polyline.editing ? "停止绘制" : "开始绘制"
}}</el-button>
</bm-control>
<bm-polyline :path="path" v-for="path of polyline.paths"></bm-polyline>
</baidu-map>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="hideDialog">取 消</el-button>
<el-button type="primary" @click="hideDialog">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: "drawAreaDialog",
components: {},
props: {},
data() {
return {
dialogVisible: false,
mapCenter: { lng: 119.93344129237624, lat: 28.464762954747187 },
mapZoom: 13,
polyline: {
editing: false,
paths: [],
},
};
},
methods: {
/**
* @Event 方法
* @description: 关闭弹窗
* */
hideDialog() {
this.dialogVisible = false;
},
/**
* @Event 方法
* @description: 打开弹窗
* */
showDialog() {
this.dialogVisible = true;
},
toggle(name) {
this[name].editing = !this[name].editing;
},
syncPolyline(e) {
if (!this.polyline.editing) {
return;
}
const { paths } = this.polyline;
if (!paths.length) {
return;
}
const path = paths[paths.length - 1];
if (!path.length) {
return;
}
if (path.length === 1) {
path.push(e.point);
}
this.$set(path, path.length - 1, e.point);
},
newPolyline(e) {
if (!this.polyline.editing) {
return;
}
const { paths } = this.polyline;
if (!paths.length) {
paths.push([]);
}
const path = paths[paths.length - 1];
path.pop();
if (path.length) {
paths.push([]);
}
},
paintPolyline(e) {
if (!this.polyline.editing) {
return;
}
const { paths } = this.polyline;
!paths.length && paths.push([]);
paths[paths.length - 1].push(e.point);
},
},
created() {},
mounted() {},
};
</script>
<style lang="scss" scoped>
.dialog-body {
width: 100% !important;
height: 500px !important;
.map {
width: 100% !important;
height: 100% !important;
}
}
</style>
vueBaiDuMap/points.json
{
"code": 1,
"message": "查询成功",
"data": [
{
"clusterId": 13,
"pointCount": 0,
"x": 119.94566899999997,
"y": 28.47721500000003,
"data": {
"id": 13,
"longitude": 119.945669,
"latitude": 28.477215,
"groupType": 7
},
"cluster": false
},
{
"clusterId": 18,
"pointCount": 0,
"x": 119.93474500000004,
"y": 28.441743000000002,
"data": {
"id": 18,
"longitude": 119.934745,
"latitude": 28.441743,
"groupType": 7
},
"cluster": false
},
{
"clusterId": 19,
"pointCount": 0,
"x": 119.97269,
"y": 28.498137,
"data": {
"id": 19,
"longitude": 119.97269,
"latitude": 28.498137,
"groupType": 7
},
"cluster": false
},
{
"clusterId": 23,
"pointCount": 0,
"x": 119.96535900000003,
"y": 28.463244000000017,
"data": {
"id": 23,
"longitude": 119.965359,
"latitude": 28.463244,
"groupType": 8
},
"cluster": false
},
{
"clusterId": 26,
"pointCount": 2,
"x": 119.93983495465487,
"y": 28.468624388296718,
"data": null,
"cluster": true
},
{
"clusterId": 27,
"pointCount": 0,
"x": 119.9667680079382,
"y": 28.47058781908956,
"data": {
"id": 27,
"longitude": 119.96676800793821,
"latitude": 28.47058781908956,
"groupType": 6
},
"cluster": false
},
{
"clusterId": 28,
"pointCount": 0,
"x": 119.94118426541667,
"y": 28.461185241132853,
"data": {
"id": 28,
"longitude": 119.9411842654167,
"latitude": 28.461185241132828,
"groupType": 6
},
"cluster": false
},
{
"clusterId": 29,
"pointCount": 2,
"x": 119.92901101598363,
"y": 28.46245138426704,
"data": null,
"cluster": true
},
{
"clusterId": 30,
"pointCount": 0,
"x": 119.93054725405256,
"y": 28.492017666758713,
"data": {
"id": 30,
"longitude": 119.93054725405253,
"latitude": 28.492017666758706,
"groupType": 6
},
"cluster": false
},
{
"clusterId": 56,
"pointCount": 3,
"x": 119.93524489214632,
"y": 28.465284122333628,
"data": null,
"cluster": true
},
{
"clusterId": 57,
"pointCount": 0,
"x": 119.95441515962155,
"y": 28.47167472473771,
"data": {
"id": 57,
"longitude": 119.95441515962155,
"latitude": 28.471674724737692,
"groupType": 8
},
"cluster": false
},
{
"clusterId": 69,
"pointCount": 0,
"x": 119.92249862655683,
"y": 28.487483056189433,
"data": {
"id": 69,
"longitude": 119.92249862655683,
"latitude": 28.48748305618944,
"groupType": 6
},
"cluster": false
},
{
"clusterId": 84,
"pointCount": 0,
"x": 119.9092751639679,
"y": 28.494904431177986,
"data": {
"id": 84,
"longitude": 119.9092751639679,
"latitude": 28.494904431178,
"groupType": 4
},
"cluster": false
},
{
"clusterId": 90,
"pointCount": 0,
"x": 119.90366782792837,
"y": 28.47566567969669,
"data": {
"id": 90,
"longitude": 119.90366782792837,
"latitude": 28.47566567969669,
"groupType": 4
},
"cluster": false
},
{
"clusterId": 91,
"pointCount": 0,
"x": 119.98417541060682,
"y": 28.5109908606465,
"data": {
"id": 91,
"longitude": 119.98417541060682,
"latitude": 28.510990860646483,
"groupType": 4
},
"cluster": false
},
{
"clusterId": 93,
"pointCount": 0,
"x": 119.90639897879473,
"y": 28.46788587181382,
"data": {
"id": 93,
"longitude": 119.90639897879471,
"latitude": 28.467885871813824,
"groupType": 4
},
"cluster": false
},
{
"clusterId": 96,
"pointCount": 0,
"x": 119.91905001626886,
"y": 28.478514031625764,
"data": {
"id": 96,
"longitude": 119.91905001626886,
"latitude": 28.478514031625757,
"groupType": 11
},
"cluster": false
},
{
"clusterId": 98,
"pointCount": 0,
"x": 119.90410846472986,
"y": 28.489474506510092,
"data": {
"id": 98,
"longitude": 119.90410846472986,
"latitude": 28.489474506510092,
"groupType": 4
},
"cluster": false
}
]
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
