VUE地图基础操作：放大、缩小、测距、测面、复位、切换地图底图，清除作图痕迹，画矩形框圆形等自定义图案
VUE地图基础操作：放大、缩小、测距、测面、复位、切换地图底图，清除作图痕迹，画矩形框圆形等自定义图案_vue百度地图测量面积_不想学习只想玩的博客-CSDN博客
data() {
return {
map: null,
size: 7,
markerLayer: null, //地点图层
toolLayer: null,
layer: null, //绘图图层
coordinate: [ //地点经纬度坐标
{ x: 117, y: 37, name: "a" },
{ x: 118, y: 38, name: "b" },
{ x: 117.5, y: 37.5, name: "c" },
{ x: 116.5, y: 36.5, name: "d" },
{ x: 118, y: 37.5, name: "e" },
{ x: 117.5, y: 38, name: "f" }],
flag: false, //测距离标志
areaflag: false, //测面积标志
drawflag: false, //绘图标志
areaTool: null, //测面积工具
distanceTool: null, //测距离工具
tool:null, //绘图工具
drawTool:null,
detail: { //弹窗
dialogVisible: false,
model: {
}
},
}
},
mounted() {
this.init()
this.start()
this.drawpic()
}
init() {
this.map = new maptalks.Map('yzMap', {
center: [117.174955, 37.941390], //地图的初始中心
zoom: this.size, //地图的初试缩放
pitch: 45,
// zoomControl: true, // add zoom control
scaleControl: true, // add scale control
// overviewControl: true, // add overview control
dragPitch: true, //是否可以倾斜（Ctrl+鼠标操作实现）
dragRotate: true, //是否可以旋转
dragRotatePitch: false, //是否旋转倾斜可以同时操作
baseLayer: new maptalks.GroupTileLayer('yzMap', [
new WMTSTileLayer('WMTS', {
urlTemplate: 'https://t5.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=自己申请的',
subdomains: ["a", "b", "c", "d"],
}),
new maptalks.TileLayer("dark-map", {
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: [0, 1, 2],
visible: false,
}),
]),
});
},
start() {
// 测量距离
this.distanceTool = new maptalks.DistanceTool({
'symbol': {
'lineColor': '#34495e',
'lineWidth': 2
},
'vertexSymbol': {
'markerType': 'ellipse',
'markerFill': '#1bbc9b',
'markerLineColor': '#000',
'markerLineWidth': 3,
'markerWidth': 10,
'markerHeight': 10
},
'labelOptions': {
'textSymbol': {
'textFaceName': 'monospace',
'textFill': '#fff',
'textLineSpacing': 1,
'textHorizontalAlignment': 'right',
'textDx': 15,
'markerLineColor': '#b4b3b3',
'markerFill': '#000'
},
'boxStyle': {
'padding': [6, 2],
'symbol': {
'markerType': 'square',
'markerFill': '#000',
'markerFillOpacity': 0.9,
'markerLineColor': '#b4b3b3'
}
}
},
'clearButtonSymbol': [{
'markerType': 'square',
'markerFill': '#000',
'markerLineColor': '#b4b3b3',
'markerLineWidth': 2,
'markerWidth': 15,
'markerHeight': 15,
'markerDx': 20
}, {
'markerType': 'x',
'markerWidth': 10,
'markerHeight': 10,
'markerLineColor': '#fff',
'markerDx': 20
}],
'language': 'en-US',
// once: true
}).addTo(this.map);
this.distanceTool.disable()
// 测量面积
this.areaTool = new maptalks.AreaTool({
'symbol': {
'lineColor': '#1bbc9b',
'lineWidth': 2,
'polygonFill': '#fff',
'polygonOpacity': 0.3
},
'vertexSymbol': {
'markerType': 'ellipse',
'markerFill': '#34495e',
'markerLineColor': '#1bbc9b',
'markerLineWidth': 3,
'markerWidth': 10,
'markerHeight': 10
},
'labelOptions': {
'textSymbol': {
'textFaceName': 'monospace',
'textFill': '#fff',
'textLineSpacing': 1,
'textHorizontalAlignment': 'right',
'textDx': 15
},
'boxStyle': {
'padding': [6, 2],
'symbol': {
'markerType': 'square',
'markerFill': '#000',
'markerFillOpacity': 0.9,
'markerLineColor': '#b4b3b3'
}
}
},
'clearButtonSymbol': [{
'markerType': 'square',
'markerFill': '#000',
'markerLineColor': '#b4b3b3',
'markerLineWidth': 2,
'markerWidth': 15,
'markerHeight': 15,
'markerDx': 22
}, {
'markerType': 'x',
'markerWidth': 10,
'markerHeight': 10,
'markerLineColor': '#fff',
'markerDx': 22
}],
language: '',
// once: true
}).addTo(this.map);
this.areaTool.disable()
},
// 测量距离
distance() {
this.flag = !this.flag
if (this.flag) {
this.areaflag = false
this.drawflag = false
this.areaTool.disable()
this.tool.disable()
}
// this.toolLayer.addGeometry(this.distanceTool).addTo(this.map)
if (this.flag) {
this.distanceTool.enable()
console.log("距离3", this.flag);
console.log("面积3", this.areaflag);
} else {
this.distanceTool.disable()
this.distanceTool.clear() //不再测量距离的时候清除痕迹
console.log("距离4", this.flag);
console.log("面积4", this.areaflag);
}
console.log("添加");
},
// 测量面积
area() {
this.areaflag = !this.areaflag
if (this.areaflag) {
this.flag = false
this.drawflag = false
this.distanceTool.disable()
this.tool.disable()
}
if (this.areaflag) {
this.areaTool.enable()
console.log("面积1", this.areaflag);
console.log("距离1", this.flag);
} else {
this.areaTool.disable()
this.areaTool.clear() //不再测量面积的时候清除痕迹
console.log("面积2", this.areaflag);
console.log("距离2", this.flag);
}
},
// 放大地图
add() {
this.map.setZoom(this.size += 1)
console.log(this.size);
},
// 缩小地图
jian() {
this.map.setZoom(this.size -= 1)
console.log(this.size);
},
// 复位
reset() {
let view = {
center: [117.174955, 37.941390]
}
this.map.setView(view);
this.map.setZoom(7)
},
// 清除作图痕迹
clear() {
if (this.areaTool != null) {
this.areaTool.clear()
console.log("面积清除", typeof this.areaTool);
}
if (this.distanceTool != null) {
this.distanceTool.clear()
console.log("距离清除", this.distanceTool);
}
if (this.layer != null) {
this.layer.clear()
console.log("绘图清除");
}
},
// 切换地图底图
change() {
var baseLayer = this.map.getBaseLayer()
baseLayer.layers.forEach((layer) => {
if (layer.getId() === 'WMTS') {
layer.hide()
} else {
layer.show()
}
})
console.log(baseLayer);
},
// 详情弹窗
devDisplay(x, y, name) {
this.detail.model.name = name
this.detail.model.x = x
this.detail.model.y = y
this.detail.dialogVisible = true
// alert(this.detail.model.y)
// console.log(e);
},
// 按钮绘制图形1，与2联合使用
drawpic(){
var layer = new maptalks.VectorLayer('draw').addTo(this.map);
var resultList = [];
var drawTool = new maptalks.DrawTool({
mode: 'Polygon',
symbol: {
'lineColor': '#000',
'lineWidth': 2
}
}).addTo(this.map).disable();
drawTool.on('drawend', function (param) {
console.log("按钮画图", param.geometry.toGeoJSON().geometry.coordinates[0][2][0]); //获取坐标
resultList.push(param.geometry.toGeoJSON().geometry.coordinates);
console.log(resultList.length);
layer.addGeometry(param.geometry);
});
this.tool=drawTool
this.layer=layer
// layer.addGeometry(drawTool)
// layer.addGeometry(drawTool.setMode("Rectangle").enable());
// drawTool.setMode("Rectangle").enable();
},
// 按钮绘制图形2，与1联合使用
pic(){
this.drawflag=!this.drawflag
if (this.drawflag) {
this.areaflag = false
this.flag = false
this.distanceTool.disable()
this.areaTool.disable()
this.tool.setMode("Rectangle").enable();
}else{
this.tool.disable()
console.log("绘图：",this.drawflag);
}
}
