10 changed files with 468 additions and 85 deletions
@ -1,20 +1,215 @@ |
|||||
<template> |
<template> |
||||
<div class=''>1111</div> |
<div style="width: 100% ;height: 100%;"> |
||||
|
<div id="myMap"> |
||||
|
<screen-map-header :data="headerList"></screen-map-header> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import { Scene, PolygonLayer, LineLayer, } from "@antv/l7"; |
||||
|
import { GaodeMap } from "@antv/l7-maps"; |
||||
|
import yifengJson from './yifeng.json'; |
||||
|
import chinaMap from "./chinaMap.vue" |
||||
|
import { mapActions } from 'vuex' |
||||
|
let myMap; |
||||
|
let scene; |
||||
|
let polygonLayer; |
||||
|
let lineLayer; |
||||
|
let textLayer; |
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return {}; |
return { |
||||
|
darkStyle: { |
||||
|
style: "amap://styles/blue", |
||||
|
polygonColor: [ |
||||
|
// "rgba(255, 100, 60, 0.5)", |
||||
|
// "rgba(43, 231, 253, 0.35)", |
||||
|
"rgba(0, 127, 241, .5)", |
||||
|
// "rgba(255, 255, 50, 0.35)", |
||||
|
], |
||||
|
lineColor: [ |
||||
|
// "rgba(255, 180, 150, 0.9)", |
||||
|
// "rgba(43, 231, 253, 0.7)", |
||||
|
"rgba(0, 127, 241, .6)", |
||||
|
// "rgba(255, 255, 50, 0.7)", |
||||
|
], |
||||
|
circleColor: [ |
||||
|
// "rgba(255, 180, 150, 0.99)", |
||||
|
// "rgba(43, 231, 253, 0.99)", |
||||
|
"rgba(0, 127, 241, 0.99)", |
||||
|
// "rgba(255, 255, 50, 0.99)", |
||||
|
], |
||||
|
textColor: [ |
||||
|
// "rgba(255, 100, 60, 0.99)", |
||||
|
// "rgba(43, 231, 253, 0.99)", |
||||
|
"rgba(126, 187, 255, 1)", |
||||
|
// "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(155, 212, 242, 1)", |
||||
|
// "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", |
||||
|
}, |
||||
|
headerList: [ |
||||
|
{ name: '镇域面积', units: '公里²', num: '199' }, |
||||
|
{ name: '耕地面积', units: '万亩', num: '17.4' }, |
||||
|
{ name: '新村', units: '个', num: '10' }, |
||||
|
{ name: '网格村', units: '个', num: '99' }, |
||||
|
{ name: '辖区人口', units: '万人', num: '9.3' } |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.init(); |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
init() { |
||||
|
if (!yifengJson) return false; |
||||
|
myMap = new GaodeMap({ |
||||
|
pitch: 40.24716321414439, |
||||
|
mapStyle: "amap://styles/darkblue", |
||||
|
// style: styleConfig.style, |
||||
|
showLabel: false, |
||||
|
center: [120.220563, 36.496127], |
||||
|
token: "fc14b42e0ca18387866d68ebd4f150c1", |
||||
|
zoom: 7, |
||||
|
isHotspot: false, |
||||
|
showIndoorMap: false, |
||||
|
showBuildingBlock: false, |
||||
|
resizeEnable: true, |
||||
|
doubleClickZoom: false, |
||||
|
showRoad: false, |
||||
|
viewMode: "3D", |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
scene = new Scene({ |
||||
|
id: "myMap", |
||||
|
logoVisible: false, |
||||
|
map: myMap, |
||||
|
}); |
||||
|
scene.on("loaded", () => { |
||||
|
this.initPolygonLayer() |
||||
|
}); |
||||
|
// scene.on("click", (feature) => { |
||||
|
// // console.log(feature); |
||||
|
// }); |
||||
|
}, |
||||
|
initPolygonLayer() { |
||||
|
const { darkStyle } = this; |
||||
|
let styleConfig = darkStyle; |
||||
|
let data = yifengJson |
||||
|
// 画区域面积 |
||||
|
polygonLayer = new PolygonLayer({ |
||||
|
autoFit: true, |
||||
|
}) |
||||
|
.size(300) |
||||
|
.source(data) |
||||
|
.color("name", styleConfig.polygonColor) |
||||
|
.shape("extrude") |
||||
|
// .shape("fill") |
||||
|
.style({ |
||||
|
opacityLinear: { |
||||
|
enable: true, // true - false |
||||
|
dir: "out", // in - out |
||||
}, |
}, |
||||
created() {}, |
opacity: 0.8, |
||||
methods: {}, |
heightfixed: true, |
||||
components:{}, |
sourceColor: '#4ee8fc', |
||||
|
targetColor: '#00284e', |
||||
|
}); |
||||
|
scene.addLayer(polygonLayer); |
||||
|
|
||||
|
// 画区域边 |
||||
|
lineLayer = new LineLayer({ |
||||
|
zIndex: 2, |
||||
|
name: "line2", |
||||
|
}) |
||||
|
.source(data) |
||||
|
.shape("line") |
||||
|
.size(1) |
||||
|
.color("name", styleConfig.lineColor) |
||||
|
.style({ |
||||
|
opacity: 1, |
||||
|
raisingHeight: 300, |
||||
|
}) |
||||
|
.animate({ |
||||
|
interval: 1, // 间隔 |
||||
|
duration: 2, // 持续时间，延时 |
||||
|
trailLength: 2, // 流线长度 |
||||
|
}); |
||||
|
scene.addLayer(lineLayer); |
||||
|
|
||||
|
textLayer = new PolygonLayer({ |
||||
|
zIndex: 20, |
||||
|
}) |
||||
|
.source(data) |
||||
|
.color("name", styleConfig.textColor) |
||||
|
.shape("name", "text") |
||||
|
.size(14) |
||||
|
.style({ |
||||
|
textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left |
||||
|
textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直] |
||||
|
spacing: 2, // 字符间距 |
||||
|
padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 |
||||
|
stroke: styleConfig.textStrokeColor, // 描边颜色 |
||||
|
strokeWidth: 0.1, // 描边宽度 |
||||
|
strokeOpacity: 0.8, |
||||
|
raisingHeight: 300, |
||||
|
textAllowOverlap: true, |
||||
|
}) |
||||
|
.active(true); |
||||
|
scene.addLayer(textLayer); |
||||
|
let _this = this |
||||
|
polygonLayer.on("click", (e) => { |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
components: { chinaMap }, |
||||
computed: {}, |
computed: {}, |
||||
watch: {}, |
watch: {}, |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
|
.map-header { |
||||
|
position: absolute; |
||||
|
top: 100px; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%); |
||||
|
width: 745px; |
||||
|
height: 58px; |
||||
|
z-index: 10; |
||||
|
} |
||||
|
#myMap { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
</style> |
</style> |
||||
Loading…
Reference in new issue