|
|
|
@ -1,25 +1,31 @@ |
|
|
|
<template> |
|
|
|
<div style="width: 100% ;height: 100%;"> |
|
|
|
<div class='bg_img' v-if="mapFlag == 'Emap'"> |
|
|
|
<div class="title"> |
|
|
|
{{ title }} |
|
|
|
</div> |
|
|
|
<chinaMap /> |
|
|
|
<div class="pot" @click="toProvince"> |
|
|
|
<img src="@/assets/images/map/yellowPot.png" alt=""> |
|
|
|
<img src="@/assets/images/map/36°.png" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="myMap" v-if="mapFlag == 'Amap'"> |
|
|
|
<div v-if="mapType == 'polygon'"> |
|
|
|
<screen-map-header :data="headerList"></screen-map-header> |
|
|
|
<screen-map-legeng></screen-map-legeng> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="width: 100%; height: 100%"> |
|
|
|
<div class="bg_img" v-if="mapFlag == 'Emap'"> |
|
|
|
<div class="title"> |
|
|
|
{{ title }} |
|
|
|
</div> |
|
|
|
<chinaMap /> |
|
|
|
<div class="pot" @click="toProvince"> |
|
|
|
<img src="@/assets/images/map/yellowPot.png" alt="" /> |
|
|
|
<img src="@/assets/images/map/36°.png" alt="" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="myMap" v-if="mapFlag == 'Amap'"> |
|
|
|
<div v-if="mapType == 'polygon'"> |
|
|
|
<screen-map-header :data="headerList"></screen-map-header> |
|
|
|
<screen-map-legeng></screen-map-legeng> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { Scene, PolygonLayer, LineLayer, ImageLayer, PointLayer } from '@antv/l7' |
|
|
|
import { |
|
|
|
Scene, |
|
|
|
PolygonLayer, |
|
|
|
LineLayer, |
|
|
|
ImageLayer, |
|
|
|
PointLayer |
|
|
|
} from '@antv/l7' |
|
|
|
import { GaodeMap } from '@antv/l7-maps' |
|
|
|
import yifengJson from './yifeng.json' |
|
|
|
import jdbandaoJson from './jdbandao.json' |
|
|
|
@ -39,7 +45,8 @@ export default { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
mapFlag: 'Emap', |
|
|
|
title: '农业要强，种业必须强。种业是现代农业芯片，是建设农业强国的标志性、先导性工程，是国家战略性、基础性核心产业。贯彻落实习近平总书记关于打一场种业翻身仗的重要指示精神，连续三年的中央一号文件对此专门部署；2023年的中央一号文件更是专节提出深入实施种业振兴行动。', |
|
|
|
title: |
|
|
|
'农业要强，种业必须强。种业是现代农业芯片，是建设农业强国的标志性、先导性工程，是国家战略性、基础性核心产业。贯彻落实习近平总书记关于打一场种业翻身仗的重要指示精神，连续三年的中央一号文件对此专门部署；2023年的中央一号文件更是专节提出深入实施种业振兴行动。', |
|
|
|
darkStyle: { |
|
|
|
style: 'amap://styles/blue', |
|
|
|
polygonColor: [ |
|
|
|
@ -102,8 +109,7 @@ export default { |
|
|
|
mapType: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
created () { |
|
|
|
}, |
|
|
|
created () {}, |
|
|
|
mounted () { |
|
|
|
window._AMapSecurityConfig = { |
|
|
|
securityJsCode: '92ea2c965c6cf1ba7ee3a8fe01449ef2' |
|
|
|
@ -116,49 +122,39 @@ export default { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
...mapActions({ |
|
|
|
set_qyjj: 'SET_QYJJ', |
|
|
|
set_garden: 'SET_GARDEN' |
|
|
|
set_qyjj: 'SET_QYJJ' |
|
|
|
}), |
|
|
|
switcMapType: function (type) { |
|
|
|
if (this.debounceTimer) { |
|
|
|
clearTimeout(this.debounceTimer) |
|
|
|
async switcMapType (type) { |
|
|
|
if (type === 'Emap') { |
|
|
|
this.mapType = null |
|
|
|
this.mapFlag = 'Emap' |
|
|
|
scene.destroy() |
|
|
|
myMap = null |
|
|
|
return |
|
|
|
} |
|
|
|
this.mapFlag = 'Amap' |
|
|
|
if (!myMap) { |
|
|
|
await new Promise((resolve) => setTimeout(resolve, 5000)) |
|
|
|
await this.init(type) |
|
|
|
} else { |
|
|
|
if (polygonLayer) { |
|
|
|
scene.removeLayer(polygonLayer) |
|
|
|
} |
|
|
|
this.initPolygonLayer(type) |
|
|
|
|
|
|
|
this.debounceTimer = setTimeout(async () => { |
|
|
|
if (type === 'Emap') { |
|
|
|
this.mapType = null |
|
|
|
this.mapFlag = 'Emap' |
|
|
|
scene.destroy() |
|
|
|
myMap = null |
|
|
|
if (type === 'unit') { |
|
|
|
this.initDot(point) |
|
|
|
} else { |
|
|
|
this.mapFlag = 'Amap' |
|
|
|
if (!myMap) { |
|
|
|
await new Promise(resolve => setTimeout(resolve, 5000)) |
|
|
|
await this.init(type) |
|
|
|
} else { |
|
|
|
this.initPolygonLayer(type) |
|
|
|
} |
|
|
|
this.removeDotLayers() |
|
|
|
} |
|
|
|
}, 1000) // 设置防抖间隔，这里是1秒 |
|
|
|
} |
|
|
|
}, |
|
|
|
removeDotLayers () { |
|
|
|
if (dotTextLayer || dotLayer) { |
|
|
|
scene.removeLayer(dotTextLayer) |
|
|
|
scene.removeLayer(dotLayer) |
|
|
|
} |
|
|
|
}, |
|
|
|
// switcMapType: debounce( |
|
|
|
// async function (type) { |
|
|
|
// console.log(type); |
|
|
|
// if (type === 'Emap') { |
|
|
|
// this.mapType = null; |
|
|
|
// this.mapFlag = 'Emap'; |
|
|
|
// scene.destroy(); |
|
|
|
// myMap = null; |
|
|
|
// return; |
|
|
|
// } |
|
|
|
// this.mapFlag = 'Amap'; |
|
|
|
// if (!myMap) { |
|
|
|
// await new Promise(resolve => setTimeout(resolve, 5000)); |
|
|
|
// await this.init(type); |
|
|
|
// } else { |
|
|
|
// this.initPolygonLayer(type); |
|
|
|
// } |
|
|
|
// }, 2000), |
|
|
|
toProvince () { |
|
|
|
this.mapFlag = 'Amap' |
|
|
|
setTimeout(() => { |
|
|
|
@ -166,13 +162,10 @@ export default { |
|
|
|
}, 1000) |
|
|
|
}, |
|
|
|
init (type) { |
|
|
|
if (!jdbandaoJson) return false |
|
|
|
if (!yifengJson) return false |
|
|
|
myMap = new GaodeMap({ |
|
|
|
pitch: 40.24716321414439, |
|
|
|
// mapStyle: "amap://styles/darkblue", |
|
|
|
// mapStyle: 'amap://styles/3bd5ec68d60de6542634c3e701f64523', |
|
|
|
mapStyle: 'amap://styles/blue', |
|
|
|
// mapStyle: 'amap://styles/fresh', |
|
|
|
// style: styleConfig.style, |
|
|
|
showLabel: false, |
|
|
|
center: [120.220563, 36.496127], |
|
|
|
@ -185,20 +178,23 @@ export default { |
|
|
|
doubleClickZoom: false, |
|
|
|
showRoad: false, |
|
|
|
viewMode: '3D' |
|
|
|
|
|
|
|
}) |
|
|
|
scene = new Scene({ |
|
|
|
id: 'myMap', |
|
|
|
logoVisible: false, |
|
|
|
map: myMap |
|
|
|
}) |
|
|
|
scene.addImage('textBg', require('@/assets/images/map/textBg.png')) |
|
|
|
scene.on('loaded', () => { |
|
|
|
// if (!type) { |
|
|
|
if (!type) { |
|
|
|
this.initCircle() |
|
|
|
// } else if (type == 'unit' || type == 'resource' || type == 'szyf' || type == 'garden') { |
|
|
|
} else if (type == 'unit') { |
|
|
|
this.initDot(point) |
|
|
|
this.initPolygonLayer() |
|
|
|
} else if (type == 'resource') { |
|
|
|
this.initPolygonLayer(type) |
|
|
|
// } |
|
|
|
} else if (type == 'szyf') { |
|
|
|
this.initFlow(type) |
|
|
|
} |
|
|
|
}) |
|
|
|
scene.on('click', (feature) => { |
|
|
|
// console.log(feature); |
|
|
|
@ -206,16 +202,35 @@ export default { |
|
|
|
}, |
|
|
|
initCircle () { |
|
|
|
circleLayerSmall = new ImageLayer({}) |
|
|
|
circleLayerSmall.source( |
|
|
|
require('@/assets/images/home/yifengdianLine.png'), |
|
|
|
{ |
|
|
|
parser: { |
|
|
|
type: 'image', |
|
|
|
extent: [121.0819, 35.8908, 119.2372, 37.2278] |
|
|
|
} |
|
|
|
circleLayerSmall.source(`${process.env.VUE_APP_MAP_IMG}/circle1.png`, { |
|
|
|
parser: { |
|
|
|
type: 'image', |
|
|
|
extent: [121.0819, 35.8908, 119.2372, 37.2278] |
|
|
|
} |
|
|
|
) |
|
|
|
}) |
|
|
|
scene.addLayer(circleLayerSmall) |
|
|
|
const data = jdbandaoJson |
|
|
|
// 画区域面积 |
|
|
|
polygonLayer = new PolygonLayer({ |
|
|
|
autoFit: true |
|
|
|
}) |
|
|
|
.size(300) |
|
|
|
.source(data) |
|
|
|
.color('name', ['rgba(0, 127, 241, .5)']) |
|
|
|
.shape('extrude') |
|
|
|
// .shape("fill") |
|
|
|
.style({ |
|
|
|
opacityLinear: { |
|
|
|
enable: true, // true - false |
|
|
|
dir: 'out' // in - out |
|
|
|
}, |
|
|
|
opacity: 0.8, |
|
|
|
heightfixed: true, |
|
|
|
sourceColor: '#4ee8fc', |
|
|
|
targetColor: '#00284e' |
|
|
|
}) |
|
|
|
scene.addLayer(polygonLayer) |
|
|
|
|
|
|
|
const that = this |
|
|
|
circleLayerSmall.on('click', (ev) => { |
|
|
|
// 处理点击事件的逻辑 |
|
|
|
@ -228,15 +243,12 @@ export default { |
|
|
|
} |
|
|
|
scene.setZoom(10) |
|
|
|
roadLayer = new ImageLayer({}) |
|
|
|
roadLayer.source( |
|
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/yifeng/2024-02-03/road.png', |
|
|
|
{ |
|
|
|
parser: { |
|
|
|
type: 'image', |
|
|
|
extent: [119.7829, 36.7398, 120.5205, 36.2552] |
|
|
|
} |
|
|
|
roadLayer.source(`${process.env.VUE_APP_MAP_IMG}/road1.png`, { |
|
|
|
parser: { |
|
|
|
type: 'image', |
|
|
|
extent: [119.7829, 36.7398, 120.5205, 36.2552] |
|
|
|
} |
|
|
|
) |
|
|
|
}) |
|
|
|
scene.addLayer(roadLayer) |
|
|
|
const that = this |
|
|
|
roadLayer.on('click', (ev) => { |
|
|
|
@ -256,27 +268,15 @@ export default { |
|
|
|
} |
|
|
|
scene.setZoom(10) |
|
|
|
roadLayer = new ImageLayer({}) |
|
|
|
// roadLayer.source( |
|
|
|
// '/images/map/flow.png', |
|
|
|
// { |
|
|
|
// parser: { |
|
|
|
// type: 'image', |
|
|
|
// extent: [119.7829, 36.7398, 120.5205, 36.2552] |
|
|
|
// } |
|
|
|
// } |
|
|
|
// ) |
|
|
|
roadLayer.source('/images/map/flow.png', { |
|
|
|
parser: { |
|
|
|
type: 'image', |
|
|
|
extent: [119.7829, 36.7398, 120.5205, 36.2552] |
|
|
|
} |
|
|
|
}) |
|
|
|
scene.addLayer(roadLayer) |
|
|
|
}, |
|
|
|
initPolygonLayer (type) { |
|
|
|
if (polygonLayer) { |
|
|
|
scene.removeLayer(polygonLayer) |
|
|
|
} |
|
|
|
if (lineLayer) { |
|
|
|
scene.removeLayer(lineLayer) |
|
|
|
} |
|
|
|
if (textLayer) { |
|
|
|
scene.removeLayer(textLayer) |
|
|
|
} |
|
|
|
if (type == 'szyf') { |
|
|
|
this.initFlow() |
|
|
|
return |
|
|
|
@ -287,19 +287,27 @@ export default { |
|
|
|
if (circleLayerSmall) { |
|
|
|
scene.removeLayer(circleLayerSmall) |
|
|
|
} |
|
|
|
if (polygonLayer) { |
|
|
|
scene.removeLayer(polygonLayer) |
|
|
|
} |
|
|
|
this.mapType = 'polygon' |
|
|
|
const { darkStyle } = this |
|
|
|
const styleConfig = darkStyle |
|
|
|
const data = jdbandaoJson |
|
|
|
const data = yifengJson |
|
|
|
// 画区域面积 |
|
|
|
polygonLayer = new PolygonLayer({ |
|
|
|
autoFit: true |
|
|
|
}) |
|
|
|
.size(10000) |
|
|
|
.size(300) |
|
|
|
.source(data) |
|
|
|
.color('name', type == 'resource' ? styleConfig.polygonColor : ['rgba(0, 127, 241, .5)']) |
|
|
|
.color( |
|
|
|
'name', |
|
|
|
type == 'resource' |
|
|
|
? styleConfig.polygonColor |
|
|
|
: ['rgba(0, 127, 241, .5)'] |
|
|
|
) |
|
|
|
.shape('extrude') |
|
|
|
// .shape("fill") |
|
|
|
// .shape("fill") |
|
|
|
.style({ |
|
|
|
opacityLinear: { |
|
|
|
enable: true, // true - false |
|
|
|
@ -352,22 +360,13 @@ export default { |
|
|
|
}) |
|
|
|
.active(true) |
|
|
|
scene.addLayer(textLayer) |
|
|
|
const filteredPoint = { ...point } // 或者使用其他对象深拷贝方法 |
|
|
|
filteredPoint.features = filteredPoint.features.filter(item => item.properties.category === type) |
|
|
|
if (type === 'unit' || type === 'garden') { |
|
|
|
this.initDot(filteredPoint, type) |
|
|
|
} |
|
|
|
polygonLayer.on('click', (e) => { |
|
|
|
|
|
|
|
}) |
|
|
|
const _this = this |
|
|
|
polygonLayer.on('click', (e) => {}) |
|
|
|
}, |
|
|
|
initDot (data, type) { |
|
|
|
if (dotTextLayer) { |
|
|
|
scene.removeLayer(dotTextLayer) |
|
|
|
} |
|
|
|
if (dotLayer) { |
|
|
|
scene.removeLayer(dotLayer) |
|
|
|
} |
|
|
|
initDot (data) { |
|
|
|
console.log(data, '点位数据') |
|
|
|
scene.addImage('dotBto', require('@/assets/images/map/dot.png')) |
|
|
|
scene.addImage('textBg', require('@/assets/images/map/textBg.png')) |
|
|
|
// textOffset改为动态的 this.buttonIndex == 3 [10,60] 否则就是 [-30 60] |
|
|
|
dotTextLayer = new PointLayer({ |
|
|
|
zIndex: 21 |
|
|
|
@ -402,19 +401,7 @@ export default { |
|
|
|
scene.addLayer(dotLayer) |
|
|
|
const that = this |
|
|
|
dotTextLayer.on('click', (e) => { |
|
|
|
if (type == 'unit') { |
|
|
|
if (e.feature.properties.id === '2') { |
|
|
|
that.set_qyjj(true) |
|
|
|
} else { |
|
|
|
this.$message.error('暂无数据~') |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (e.feature.properties.id === '3') { |
|
|
|
that.set_garden(true) |
|
|
|
} else { |
|
|
|
this.$message.error('暂无数据~') |
|
|
|
} |
|
|
|
} |
|
|
|
that.set_qyjj(true) |
|
|
|
}) |
|
|
|
|
|
|
|
// dotTextLayer.on("mousemove", (e) => { |
|
|
|
@ -437,105 +424,99 @@ export default { |
|
|
|
computed: { |
|
|
|
...mapGetters(['navId']) |
|
|
|
}, |
|
|
|
beforeDestroy () { |
|
|
|
if (myMap) { |
|
|
|
scene.destroy() |
|
|
|
myMap = null |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: {} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.map-header { |
|
|
|
position: absolute; |
|
|
|
top: 100px; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%); |
|
|
|
width: 745px; |
|
|
|
height: 58px; |
|
|
|
z-index: 10; |
|
|
|
position: absolute; |
|
|
|
top: 100px; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%); |
|
|
|
width: 745px; |
|
|
|
height: 58px; |
|
|
|
z-index: 10; |
|
|
|
} |
|
|
|
|
|
|
|
.map-legeng { |
|
|
|
position: absolute; |
|
|
|
top: 686px; |
|
|
|
left: 554px; |
|
|
|
transform: translate(-50%); |
|
|
|
width: 140px; |
|
|
|
height: 220px; |
|
|
|
z-index: 10; |
|
|
|
position: absolute; |
|
|
|
top: 686px; |
|
|
|
left: 554px; |
|
|
|
transform: translate(-50%); |
|
|
|
width: 140px; |
|
|
|
height: 220px; |
|
|
|
z-index: 10; |
|
|
|
} |
|
|
|
|
|
|
|
.bg_img { |
|
|
|
background: url('~@/assets/images/map/echartsBg.png'); |
|
|
|
background: url("~@/assets/images/map/echartsBg.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
.title { |
|
|
|
width: 802px; |
|
|
|
height: 98px; |
|
|
|
background: url("~@/assets/images/map/title.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
top: 80px; |
|
|
|
transform: translate(-401px); |
|
|
|
left: 50%; |
|
|
|
color: #fff; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
.title { |
|
|
|
width: 802px; |
|
|
|
height: 98px; |
|
|
|
background: url('~@/assets/images/map/title.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
position: absolute; |
|
|
|
top: 80px; |
|
|
|
transform: translate(-401px); |
|
|
|
left: 50%; |
|
|
|
color: #fff; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 16px 30px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
padding: 16px 30px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.pot { |
|
|
|
position: absolute; |
|
|
|
right: 732px; |
|
|
|
top: 445px; |
|
|
|
@include flex(column); |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
>:nth-child(1) { |
|
|
|
width: 138px; |
|
|
|
height: 142px; |
|
|
|
} |
|
|
|
.pot { |
|
|
|
position: absolute; |
|
|
|
right: 732px; |
|
|
|
top: 445px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
>:nth-child(2) { |
|
|
|
width: 70px; |
|
|
|
height: 32px; |
|
|
|
position: relative; |
|
|
|
top: -60px; |
|
|
|
left: 20px; |
|
|
|
z-index: 30; |
|
|
|
} |
|
|
|
> :nth-child(1) { |
|
|
|
width: 138px; |
|
|
|
height: 142px; |
|
|
|
} |
|
|
|
|
|
|
|
&::after { |
|
|
|
content: "黄金育种带"; |
|
|
|
display: block; |
|
|
|
width: 550px; |
|
|
|
font-size: 22px; |
|
|
|
padding-bottom: 12px; |
|
|
|
height: 24px; |
|
|
|
color: rgb(254, 221, 0); |
|
|
|
text-align: center; |
|
|
|
line-height: 24px; |
|
|
|
border-bottom: 2px rgb(254, 221, 0) dashed; |
|
|
|
position: absolute; |
|
|
|
right: 83px; |
|
|
|
top: 34px; |
|
|
|
} |
|
|
|
> :nth-child(2) { |
|
|
|
width: 70px; |
|
|
|
height: 32px; |
|
|
|
position: relative; |
|
|
|
top: -60px; |
|
|
|
left: 20px; |
|
|
|
z-index: 30; |
|
|
|
} |
|
|
|
|
|
|
|
&::after { |
|
|
|
content: "黄金育种带"; |
|
|
|
display: block; |
|
|
|
width: 550px; |
|
|
|
font-size: 22px; |
|
|
|
padding-bottom: 12px; |
|
|
|
height: 24px; |
|
|
|
color: rgb(254, 221, 0); |
|
|
|
text-align: center; |
|
|
|
line-height: 24px; |
|
|
|
border-bottom: 2px rgb(254, 221, 0) dashed; |
|
|
|
position: absolute; |
|
|
|
right: 83px; |
|
|
|
top: 34px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
#myMap { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
