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,
scaleControl: true,
dragPitch: true,
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',
}).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: '',
}).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()
}
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
},
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
},
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);
}
}