|
|
@ -48,6 +48,7 @@ let dotLayer2; |
|
|
|
let countTextLayer; |
|
|
|
let countTextBgLayer; |
|
|
|
let searchMarker; |
|
|
|
let searchBgLayer; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "l7", |
|
|
@ -146,25 +147,12 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
computed: {}, |
|
|
|
|
|
|
|
components: { |
|
|
|
cptCard, |
|
|
|
cptTb, |
|
|
|
cptPopup, |
|
|
|
}, |
|
|
|
|
|
|
|
watch: {}, |
|
|
|
|
|
|
|
async mounted() { |
|
|
|
// 临时这么用吧 |
|
|
|
window._AMapSecurityConfig = { |
|
|
|
securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2", |
|
|
|
}; |
|
|
|
|
|
|
|
this.iniMap(); |
|
|
|
}, |
|
|
|
|
|
|
|
computed: { |
|
|
|
polygonData() { |
|
|
|
const { srcGridData } = this; |
|
|
@ -313,6 +301,20 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
async mounted() { |
|
|
|
console.log("指挥调度map初始化啦"); |
|
|
|
// 临时这么用吧 |
|
|
|
window._AMapSecurityConfig = { |
|
|
|
securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2", |
|
|
|
}; |
|
|
|
|
|
|
|
this.iniMap(); |
|
|
|
|
|
|
|
// 为了避免刷新残留 |
|
|
|
searchMarker = null; |
|
|
|
searchBgLayer = null; |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
iniMap() { |
|
|
|
const { darkStyle, lightStyle, srcGridData } = this; |
|
|
@ -627,8 +629,83 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
drawSearchBg(lng, lat) { |
|
|
|
function getPoints(lng, lat) { |
|
|
|
// lng 经度;lat 纬度;dis 距离(千米) |
|
|
|
let r = 6371; //地球半径千米 |
|
|
|
let dis = 1.5; //3千米距离 |
|
|
|
let dlng = |
|
|
|
2 * |
|
|
|
Math.asin(Math.sin(dis / (2 * r)) / Math.cos((lat * Math.PI) / 180)); |
|
|
|
dlng = (dlng * 180) / Math.PI; // 经度半径 |
|
|
|
let dlat = dis / r; |
|
|
|
dlat = (dlat * 180) / Math.PI; // 纬度半径 |
|
|
|
// 圆形每一度 都算出一个经纬度 |
|
|
|
for (let sides = 1; sides <= 360; sides++) { |
|
|
|
var angle = Math.PI * (1 / sides - 1 / 2); |
|
|
|
var rotatedAngle, x, y; |
|
|
|
var points = []; |
|
|
|
for (var i = 0; i < sides; ++i) { |
|
|
|
rotatedAngle = angle + (i * 2 * Math.PI) / sides; |
|
|
|
x = lng + dlng * Math.cos(rotatedAngle); |
|
|
|
y = lat + dlat * Math.sin(rotatedAngle); |
|
|
|
points.push([x, y]); |
|
|
|
} |
|
|
|
} |
|
|
|
console.log("points=======", points); |
|
|
|
return points; |
|
|
|
} |
|
|
|
|
|
|
|
let sourceData; |
|
|
|
if (lng) { |
|
|
|
sourceData = { |
|
|
|
type: "FeatureCollection", |
|
|
|
features: [ |
|
|
|
{ |
|
|
|
type: "Feature", |
|
|
|
properties: { |
|
|
|
center: [lng, lat], |
|
|
|
}, |
|
|
|
geometry: { |
|
|
|
type: "Polygon", |
|
|
|
coordinates: [getPoints(lng, lat)], |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
} else { |
|
|
|
sourceData = { |
|
|
|
type: "FeatureCollection", |
|
|
|
features: [], |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
if (searchBgLayer) { |
|
|
|
console.log("searchBgLayer已经存在了", searchBgLayer); |
|
|
|
searchBgLayer.setData(sourceData); |
|
|
|
} else { |
|
|
|
searchBgLayer = new PolygonLayer({ |
|
|
|
// autoFit: true, |
|
|
|
}) |
|
|
|
.source(sourceData) |
|
|
|
.color("#f0f") |
|
|
|
.shape("fill") |
|
|
|
.style({ |
|
|
|
opacityLinear: { |
|
|
|
enable: true, // true - false |
|
|
|
dir: "out", // in - out |
|
|
|
}, |
|
|
|
opacity: 0.3, |
|
|
|
raisingHeight: 0, |
|
|
|
}); |
|
|
|
|
|
|
|
scene.addLayer(searchBgLayer); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
async setDotMarker(item, posArr) { |
|
|
|
this.removeDotMarker(); |
|
|
|
this.drawSearchBg(...posArr); |
|
|
|
const marker = new Marker({ |
|
|
|
offsets: [0, -20], |
|
|
|
}).setLnglat(posArr); |
|
|
@ -652,15 +729,20 @@ export default { |
|
|
|
}); |
|
|
|
|
|
|
|
scene.addMarker(marker); |
|
|
|
scene.setZoomAndCenter(18, posArr); |
|
|
|
scene.setZoomAndCenter(14, posArr); |
|
|
|
marker.openPopup(); |
|
|
|
searchMarker = marker; |
|
|
|
}, |
|
|
|
|
|
|
|
removeDotMarker() { |
|
|
|
console.log("removeDotMarker"); |
|
|
|
if (searchMarker) { |
|
|
|
searchMarker.remove(); |
|
|
|
} |
|
|
|
if (searchBgLayer) { |
|
|
|
console.log("removeDotMarker-----searchBgLayer"); |
|
|
|
this.drawSearchBg(); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 把地图缩放等级在原来基础上大一点 |
|
|
@ -743,6 +825,13 @@ export default { |
|
|
|
border-radius: 10px; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
/deep/ .l7-popup-content { |
|
|
|
background: rgba(#020340, 0.58); |
|
|
|
} |
|
|
|
/deep/ .l7-popup-close-button { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
#app { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|