多边形
<!-- 地图组件 -->
<template>
<div :id="id" class="container"></div>
</template>
<script>
import _ from "lodash";
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
export default {
//import引入的组件需要注入到对象中才能使用
name: "Map",
props: {
id: {
type: String,
default: () => {
return "map";
},
},
mapSet: {
type: Object,
default: () => {
return {};
},
},
color: {
type: String,
default: () => {
return "";
},
},
},
components: {},
data() {
//这里存放数据
return {
dataLis: [],
layer: null,
layer2: null,
map: null,
polygon: null,
drawTool: null,
// 默认中心点点位
center: [121.044372, 30.575405],
// 缩放层级
zoom: 14,
// 倾斜度
pitch: 0,
// 轴承
// bearing: 90,
// 最小缩放层级
minZoom: 1,
// 最大缩放层级
maxZoom: 18.5,
symbol: {
polygonFill: "#ff0000", // 图形覆盖颜色
polygonOpacity: 0.3, // 图形覆盖区域透明度
lineColor: "#ff0000", // 线条颜色
lineWidth: 2, // 线条宽度
},
pointSymbol: {
markerFile: "@/assets/logo/logo.png",
markerWidth: 20,
markerHeight: 20,
},
layerSwitcherControl: {
position: "top-right",
// title of base layers
baseTitle: "地图类型",
// title of layers
overlayTitle: "图层",
// layers you don't want to manage with layer switcher
excludeLayers: [],
// css class of container element, maptalks-layer-switcher by default
containerClass: "maptalks-layer-switcher",
},
// 电子地图图层
// urlTemplate: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
// subdomains: ["a", "b", "c", "d"],
// attribution:
// '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
// urlTemplate:
// "https://gss{s}.bdstatic.com/8bo_dTSlRsgBo1vgoIiO_jowehsv/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20170927",
// subdomains: [0, 1, 2, 3],
// attribution:
// '© <a target="_blank" href="http://map.baidu.com">Baidu</a>'
drawMap: {
Point: "点",
LineString: "线",
Polygon: "多边形",
Circle: "圆",
Ellipse: "椭圆",
Rectangle: "长方形",
},
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {
mapSet: {
deep: true,
immediate: true,
async handler(val) {
if (Object.keys(val).length) {
let { drawMapType, drawMapArray, editable, draggable } = val;
if (this.map != undefined) this.map.remove();
await this.init();
// 循环插入多边形
if (drawMapArray && drawMapArray.length > 0) {
// console.log("回显", editable);
drawMapArray.forEach(item => {
let obj = {
// 编辑图形
drawMapArray: () => {
this.startEdit(item, {
drawMapType,
editable,
draggable,
drawMapArray: item
});
},
// 绘制图形
drawMapType: () => {
this.drawMapType({
drawMapType,
editable,
draggable,
drawMapArray: item
});
},
};
let arrayKeys = Object.keys({
drawMapType,
editable,
draggable,
drawMapArray: item
});
arrayKeys.map((item) => {
if (obj[item]) return obj[item]();
});
})
if (editable) {
// 打开新增多边形
let obj = {
// 绘制图形
drawMapType: () => {
this.drawMapType({
drawMapType,
editable,
draggable,
// drawMapArray
});
},
};
let arrayKeys = Object.keys({
drawMapType,
editable,
draggable,
// drawMapArray
});
arrayKeys.map((item) => {
if (obj[item]) return obj[item]();
});
}
} else {
// console.log("新增");
let obj = {
// 绘制图形
drawMapType: () => {
this.drawMapType({
drawMapType,
editable,
draggable,
// drawMapArray
});
},
};
let arrayKeys = Object.keys({
drawMapType,
editable,
draggable,
// drawMapArray
});
arrayKeys.map((item) => {
if (obj[item]) return obj[item]();
});
}
} else {
// console.log("销毁地图");
if (this.map != undefined) this.map.remove();
}
},
},
color: {
immediate: true,
handler(val) {
// console.log("🚀 ~ Date:2023/06/15 17:14 ~ File: index.vue ~ Line:118 ----- ", val);
if (val) {
let { drawTool, polygon } = this;
if (drawTool) this.changeSymbol("drawTool", drawTool, val);
if (polygon) this.changeSymbol("polygon", polygon, val);
// if (drawTool) {
// drawTool.setSymbol({
// polygonFill: val, // 图形覆盖颜色
// polygonOpacity: 0.3, // 图形覆盖区域透明度
// lineColor: val, // 线条颜色
// lineWidth: 2 // 线条宽度
// });
// }
// if (polygon) {
// polygon.updateSymbol({
// polygonFill: val, // 图形覆盖颜色
// lineColor: val // 线条颜色
// });
// }
}
},
},
},
//生命周期 - 创建完成（可以访问当前this实例）
// created() { },
//生命周期 - 挂载完成（可以访问DOM元素）
// mounted() {
// let a = "rgb(255, 69, 0)";
// console.log(a.slice(5, a.length - 1));
// },
// beforeDestroy() {
// let { map } = this;
// // console.log(
// // "🚀 ~ Date:2023/07/11 14:37 ~ File: index.vue ~ Line:154 ----- ",
// // 销毁地图
// // );
// if (map) map.remove();
// },
//方法集合
methods: {
// 获取到图层所有的点位
getSent(data) {
let array = []
data.forEach(res => {
let arrray2 = []
res._coordinates.forEach(res2 => {
arrray2.push({
"lngWgs": res2.x,
"latWgs": res2.y,
// "sort": index2
})
})
array.push(arrray2)
})
return array;
},
init() {
this.$nextTick(() => {
let { center, zoom, pitch, minZoom, maxZoom, symbol, layerSwitcherControl, id } = this;
this.map = new maptalks.Map(id, {
center,
zoom,
pitch,
minZoom,
maxZoom,
centerCross: true,
seamlessZoom: true,
attribution: false,
zoomControl: true, // add zoom control
scaleControl: true, // add scale control
layerSwitcherControl,
symbol,
// baseLayer 表示基础图层，它可以添加多个,逗号隔开
baseLayer: new maptalks.GroupTileLayer("Base TileLayer", [
new maptalks.TileLayer("卫星图", {
urlTemplate:
"https://t5.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=074d4a21c8f34a3a20cd1f69f81b26bf",
subdomains: ["a", "b", "c", "d"
