|
|
|
@ -1,6 +1,14 @@ |
|
|
|
<template> |
|
|
|
<div class="m-map"> |
|
|
|
<div id="map"></div> |
|
|
|
<div |
|
|
|
class="btn" |
|
|
|
v-if="mapStyleType == 'light'" |
|
|
|
@click="shiftMapStyle('dark')" |
|
|
|
> |
|
|
|
切换深色模式 |
|
|
|
</div> |
|
|
|
<div class="btn" v-else @click="shiftMapStyle('light')">切换浅色模式</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -22,10 +30,61 @@ let circleLayer; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "l7", |
|
|
|
inject: ["refresh"], |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
mapStyleType: localStorage.getItem("mapStyle") || "dark", |
|
|
|
// srcGridData: {}, |
|
|
|
darkStyle: { |
|
|
|
style: "amap://styles/blue", |
|
|
|
polygonColor: [ |
|
|
|
"rgba(255, 100, 60, 0.5)", |
|
|
|
"rgba(43, 231, 253, 0.35)", |
|
|
|
"rgba(255, 255, 50, 0.35)", |
|
|
|
], |
|
|
|
lineColor: [ |
|
|
|
"rgba(255, 180, 150, 0.9)", |
|
|
|
"rgba(43, 231, 253, 0.7)", |
|
|
|
"rgba(255, 255, 50, 0.7)", |
|
|
|
], |
|
|
|
circleColor: [ |
|
|
|
"rgba(255, 180, 150, 0.99)", |
|
|
|
"rgba(43, 231, 253, 0.99)", |
|
|
|
"rgba(255, 255, 50, 0.99)", |
|
|
|
], |
|
|
|
textColor: [ |
|
|
|
"rgba(255, 100, 60, 0.99)", |
|
|
|
"rgba(43, 231, 253, 0.99)", |
|
|
|
"rgba(255, 255, 50, 0.99)", |
|
|
|
], |
|
|
|
textStrokeColor: "#fff", |
|
|
|
}, |
|
|
|
|
|
|
|
lightStyle: { |
|
|
|
style: "amap://styles/whitesmoke", |
|
|
|
polygonColor: [ |
|
|
|
"rgba(255, 100, 60, 0.3)", |
|
|
|
"rgba(43, 231, 253, 0.3)", |
|
|
|
"rgba(255, 255, 50, 0.3)", |
|
|
|
], |
|
|
|
lineColor: [ |
|
|
|
"rgba(220, 150, 120, 0.9)", |
|
|
|
"rgba(33, 201, 223, 0.8)", |
|
|
|
"rgba(200, 200, 50, 0.9)", |
|
|
|
], |
|
|
|
circleColor: [ |
|
|
|
"rgba(255, 180, 150, 0.99)", |
|
|
|
"rgba(13, 181, 203, 0.8)", |
|
|
|
"rgba(255, 255, 50, 0.99)", |
|
|
|
], |
|
|
|
textColor: [ |
|
|
|
"rgba(200, 50, 10, 0.99)", |
|
|
|
"rgba(0, 130, 153, 0.99)", |
|
|
|
"rgba(120, 120, 0, 0.99)", |
|
|
|
], |
|
|
|
textStrokeColor: "#666", |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
@ -104,17 +163,20 @@ export default { |
|
|
|
|
|
|
|
methods: { |
|
|
|
iniMap() { |
|
|
|
const { srcGridData, polygonData } = this; |
|
|
|
const { darkStyle, lightStyle, srcGridData, polygonData } = this; |
|
|
|
if (!srcGridData) return false; |
|
|
|
|
|
|
|
let styleConfig = darkStyle; |
|
|
|
if (this.mapStyleType == "light") { |
|
|
|
styleConfig = lightStyle; |
|
|
|
} |
|
|
|
|
|
|
|
scene = new Scene({ |
|
|
|
id: "map", |
|
|
|
logoVisible: false, |
|
|
|
map: new GaodeMap({ |
|
|
|
pitch: 60, |
|
|
|
// style: "dark", |
|
|
|
// style: "grey", |
|
|
|
style: "amap://styles/blue", |
|
|
|
style: styleConfig.style, |
|
|
|
center: [ |
|
|
|
srcGridData.longitude || this.$store.state.user.longitude, |
|
|
|
srcGridData.latitude || this.$store.state.user.latitude, |
|
|
|
@ -134,11 +196,7 @@ export default { |
|
|
|
}) |
|
|
|
// .size(1000) |
|
|
|
.source(polygonData) |
|
|
|
.color("name", [ |
|
|
|
"rgba(255, 100, 60, 0.5)", |
|
|
|
"rgba(43, 231, 253, 0.35)", |
|
|
|
"rgba(255, 255, 50, 0.35)", |
|
|
|
]) |
|
|
|
.color("name", styleConfig.polygonColor) |
|
|
|
// .shape("extrude") |
|
|
|
.shape("fill") |
|
|
|
.style({ |
|
|
|
@ -163,11 +221,7 @@ export default { |
|
|
|
.source(polygonData) |
|
|
|
.shape("line") |
|
|
|
.size(1) |
|
|
|
.color("name", [ |
|
|
|
"rgba(255, 50, 50, 0.7)", |
|
|
|
"rgba(43, 231, 253, 0.7)", |
|
|
|
"rgba(255, 255, 50, 0.7)", |
|
|
|
]) |
|
|
|
.color("name", styleConfig.lineColor) |
|
|
|
.style({ |
|
|
|
opacity: 1, |
|
|
|
}) |
|
|
|
@ -182,11 +236,7 @@ export default { |
|
|
|
zIndex: 3, |
|
|
|
}) |
|
|
|
.source(polygonData) |
|
|
|
.color("name", [ |
|
|
|
"rgba(255, 50, 50, 0.99)", |
|
|
|
"rgba(43, 231, 253, 0.99)", |
|
|
|
"rgba(255, 255, 50, 0.99)", |
|
|
|
]) |
|
|
|
.color("name", styleConfig.circleColor) |
|
|
|
.shape("circle") |
|
|
|
.active(true) |
|
|
|
.animate(true) |
|
|
|
@ -223,24 +273,21 @@ export default { |
|
|
|
scene.addLayer(posLayer); |
|
|
|
|
|
|
|
textLayer = new PolygonLayer({ |
|
|
|
zIndex: 10, |
|
|
|
zIndex: 20, |
|
|
|
}) |
|
|
|
.source(polygonData) |
|
|
|
.color("name", [ |
|
|
|
"rgba(255, 100, 60, 0.99)", |
|
|
|
"rgba(43, 231, 253, 0.99)", |
|
|
|
"rgba(255, 255, 50, 0.99)", |
|
|
|
]) |
|
|
|
.color("name", styleConfig.textColor) |
|
|
|
.shape("name", "text") |
|
|
|
.size(16) |
|
|
|
.style({ |
|
|
|
textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left |
|
|
|
textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直] |
|
|
|
spacing: 2, // 字符间距 |
|
|
|
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 |
|
|
|
stroke: "#ffffff", // 描边颜色 |
|
|
|
strokeWidth: 0.3, // 描边宽度 |
|
|
|
strokeOpacity: 1.0, |
|
|
|
padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 |
|
|
|
stroke: styleConfig.textStrokeColor, // 描边颜色 |
|
|
|
strokeWidth: 0.1, // 描边宽度 |
|
|
|
strokeOpacity: 0.8, |
|
|
|
textAllowOverlap: true, |
|
|
|
}) |
|
|
|
.active(true); |
|
|
|
scene.addLayer(textLayer); |
|
|
|
@ -264,6 +311,12 @@ export default { |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
shiftMapStyle(type) { |
|
|
|
this.mapStyleType = type; |
|
|
|
localStorage.setItem("mapStyle", type); |
|
|
|
this.refresh(); |
|
|
|
}, |
|
|
|
|
|
|
|
updateMap() { |
|
|
|
const { polygonData } = this; |
|
|
|
if (polygonLayer) { |
|
|
|
@ -289,10 +342,6 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.g-cnt { |
|
|
|
margin-top: 40px; |
|
|
|
} |
|
|
|
|
|
|
|
.m-map { |
|
|
|
position: relative; |
|
|
|
padding: 20px 0; |
|
|
|
@ -302,5 +351,18 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
.btn { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
width: 100px; |
|
|
|
line-height: 36px; |
|
|
|
height: 36px; |
|
|
|
text-align: center; |
|
|
|
color: #ffffff; |
|
|
|
font-size: 14px; |
|
|
|
background-color: rgba(#000, 0.2); |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
dai
3 years ago