|
|
@ -1,101 +1,98 @@ |
|
|
|
<template> |
|
|
|
<div style="width: 100% ;height: 100%;"> |
|
|
|
<div style="width: 100%; height: 100%"> |
|
|
|
<div id="myMap"> |
|
|
|
<!-- <screen-map-header :data="headerList"></screen-map-header> --> |
|
|
|
</div> |
|
|
|
<div class="mapImage"> |
|
|
|
<div>事件处置流程图</div> |
|
|
|
|
|
|
|
<img src="@/assets/images/map/flow.png" alt=""> |
|
|
|
<img src="@/assets/images/map/flow.png" alt="" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
|
|
|
|
import { Scene, PolygonLayer } from '@antv/l7' |
|
|
|
import { GaodeMap } from '@antv/l7-maps' |
|
|
|
import yifengJson from './yifeng.json' |
|
|
|
import jdbandaoJson from './jdbandao.json' |
|
|
|
import chinaMap from './chinaMap.vue' |
|
|
|
import { mapActions } from 'vuex' |
|
|
|
let myMap |
|
|
|
let scene |
|
|
|
let polygonLayer |
|
|
|
import { Scene, PolygonLayer } from "@antv/l7"; |
|
|
|
import { GaodeMap } from "@antv/l7-maps"; |
|
|
|
import yifengJson from "./yifeng.json"; |
|
|
|
import jdbandaoJson from "./jdbandao.json"; |
|
|
|
import chinaMap from "./chinaMap.vue"; |
|
|
|
import { mapActions } from "vuex"; |
|
|
|
let myMap; |
|
|
|
let scene; |
|
|
|
let polygonLayer; |
|
|
|
export default { |
|
|
|
data () { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
darkStyle: { |
|
|
|
style: 'amap://styles/blue', |
|
|
|
style: "amap://styles/blue", |
|
|
|
polygonColor: [ |
|
|
|
// "rgba(255, 100, 60, 0.5)", |
|
|
|
// "rgba(43, 231, 253, 0.35)", |
|
|
|
'rgba(0, 127, 241, .5)' |
|
|
|
"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(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(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(126, 187, 255, 1)", |
|
|
|
// "rgba(255, 255, 50, 0.99)", |
|
|
|
], |
|
|
|
textStrokeColor: '#fff' |
|
|
|
textStrokeColor: "#fff", |
|
|
|
}, |
|
|
|
lightStyle: { |
|
|
|
style: 'amap://styles/blue', |
|
|
|
style: "amap://styles/blue", |
|
|
|
polygonColor: [ |
|
|
|
// "rgba(255, 100, 60, 0.3)", |
|
|
|
'rgba(43, 231, 253, 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(155, 212, 242, 1)", |
|
|
|
// "rgba(200, 200, 50, 0.9)", |
|
|
|
], |
|
|
|
circleColor: [ |
|
|
|
// "rgba(255, 180, 150, 0.99)", |
|
|
|
'rgba(13, 181, 203, 0.8)' |
|
|
|
"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(0, 130, 153, 0.99)", |
|
|
|
// "rgba(120, 120, 0, 0.99)", |
|
|
|
], |
|
|
|
textStrokeColor: '#666' |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
textStrokeColor: "#666", |
|
|
|
}, |
|
|
|
created () { |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted () { |
|
|
|
created() {}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.init() |
|
|
|
}) |
|
|
|
this.init(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
init () { |
|
|
|
if (!yifengJson) return false |
|
|
|
init() { |
|
|
|
if (!yifengJson) return false; |
|
|
|
myMap = new GaodeMap({ |
|
|
|
pitch: 40.24716321414439, |
|
|
|
// mapStyle: 'amap://styles/3bd5ec68d60de6542634c3e701f64523', |
|
|
|
style: this.darkStyle.style, |
|
|
|
showLabel: false, |
|
|
|
center: [120.220563, 36.496127], |
|
|
|
token: 'fc14b42e0ca18387866d68ebd4f150c1', |
|
|
|
token: "fc14b42e0ca18387866d68ebd4f150c1", |
|
|
|
zoom: 10, |
|
|
|
isHotspot: false, |
|
|
|
showIndoorMap: false, |
|
|
@ -103,29 +100,28 @@ export default { |
|
|
|
resizeEnable: true, |
|
|
|
doubleClickZoom: false, |
|
|
|
showRoad: false, |
|
|
|
viewMode: '3D' |
|
|
|
|
|
|
|
}) |
|
|
|
viewMode: "3D", |
|
|
|
}); |
|
|
|
|
|
|
|
scene = new Scene({ |
|
|
|
id: 'myMap', |
|
|
|
id: "myMap", |
|
|
|
logoVisible: false, |
|
|
|
map: myMap |
|
|
|
}) |
|
|
|
map: myMap, |
|
|
|
}); |
|
|
|
|
|
|
|
const data = yifengJson |
|
|
|
const data1 = jdbandaoJson |
|
|
|
const data = yifengJson; |
|
|
|
const data1 = jdbandaoJson; |
|
|
|
// 画区域面积 |
|
|
|
if (polygonLayer) { |
|
|
|
scene.removeLayer(polygonLayer) |
|
|
|
scene.removeLayer(polygonLayer); |
|
|
|
} |
|
|
|
polygonLayer = new PolygonLayer({ |
|
|
|
autoFit: true |
|
|
|
autoFit: true, |
|
|
|
}) |
|
|
|
.size(1000) |
|
|
|
.source(data1) |
|
|
|
.color('name', ['rgba(0, 127, 241, .5)']) |
|
|
|
.shape('fill') |
|
|
|
.color("name", ["rgba(0, 127, 241, .5)"]) |
|
|
|
.shape("fill") |
|
|
|
.style({ |
|
|
|
// opacityLinear: { |
|
|
|
// enable: true, // true - false |
|
|
@ -133,18 +129,18 @@ export default { |
|
|
|
// }, |
|
|
|
opacity: 0.6, |
|
|
|
// heightfixed: true, |
|
|
|
sourceColor: '#4ee8fc', |
|
|
|
targetColor: '#00284e' |
|
|
|
}) |
|
|
|
scene.addLayer(polygonLayer) |
|
|
|
sourceColor: "#4ee8fc", |
|
|
|
targetColor: "#00284e", |
|
|
|
}); |
|
|
|
scene.addLayer(polygonLayer); |
|
|
|
// 画区域面积 |
|
|
|
polygonLayer = new PolygonLayer({ |
|
|
|
autoFit: true |
|
|
|
autoFit: true, |
|
|
|
}) |
|
|
|
.size(1000) |
|
|
|
.source(data) |
|
|
|
.color('name', ['rgba(0, 127, 241, .0)']) |
|
|
|
.shape('fill') |
|
|
|
.color("name", ["rgba(0, 127, 241, .0)"]) |
|
|
|
.shape("fill") |
|
|
|
.style({ |
|
|
|
// opacityLinear: { |
|
|
|
// enable: true, // true - false |
|
|
@ -152,18 +148,17 @@ export default { |
|
|
|
// }, |
|
|
|
opacity: 0, |
|
|
|
// heightfixed: true, |
|
|
|
sourceColor: '#4ee8fc', |
|
|
|
targetColor: '#00284e' |
|
|
|
}) |
|
|
|
scene.addLayer(polygonLayer) |
|
|
|
scene.on('loaded', () => { |
|
|
|
}) |
|
|
|
} |
|
|
|
sourceColor: "#4ee8fc", |
|
|
|
targetColor: "#00284e", |
|
|
|
}); |
|
|
|
scene.addLayer(polygonLayer); |
|
|
|
scene.on("loaded", () => {}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
components: { chinaMap }, |
|
|
|
computed: {}, |
|
|
|
watch: {} |
|
|
|
} |
|
|
|
watch: {}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
@ -180,27 +175,28 @@ export default { |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
user-select: none; |
|
|
|
transform: translate(-439px, -323px); |
|
|
|
|
|
|
|
div { |
|
|
|
width: 371px; |
|
|
|
height: 49px; |
|
|
|
text-align: center; |
|
|
|
background: url('~@/assets/images/map/headerBg.png') no-repeat; |
|
|
|
background: url("~@/assets/images/map/headerBg.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
color: #fff; |
|
|
|
margin-bottom: 100px; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&::after { |
|
|
|
content: ''; |
|
|
|
content: ""; |
|
|
|
display: inline-block; |
|
|
|
width: 58px; |
|
|
|
height: 54px; |
|
|
|
position: absolute; |
|
|
|
top: 30px; |
|
|
|
left: 43%; |
|
|
|
background: url('~@/assets/images/map/down.png') no-repeat; |
|
|
|
background: url("~@/assets/images/map/down.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
animation: moveUpDown 2s infinite; |
|
|
|
} |
|
|
@ -217,5 +213,4 @@ export default { |
|
|
|
transform: translateY(0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|