elink-star
/
yifeng_integration
16
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

地图展示问题修改

master
juwei001 1 year ago
parent
3b3d6cdcdc
commit
762c1a870b
1 changed files with 191 additions and 210 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 213
      src/views/next/screen-content-map/cpt/zdyf-map.vue

213
src/views/next/screen-content-map/cpt/zdyf-map.vue
View File

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

Write Preview
Loading…
Cancel
Save