|
|
@ -1,9 +1,6 @@ |
|
|
<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"> |
|
|
|
|
|
{{ title }} |
|
|
|
|
|
</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="" /> |
|
|
@ -16,22 +13,19 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div id="myMap" v-if="mapFlag == 'Amap'"> |
|
|
<div id="myMapZd" v-if="mapFlag == 'Amap'"> |
|
|
<div v-if="mapType == 'polygon'"> |
|
|
<div> |
|
|
<screen-map-header :data="headerList"></screen-map-header> |
|
|
<screen-map-header |
|
|
<screen-map-legeng></screen-map-legeng> |
|
|
v-if="showPage" |
|
|
|
|
|
:data="headerList" |
|
|
|
|
|
></screen-map-header> |
|
|
|
|
|
<screen-map-legeng v-if="showPage"></screen-map-legeng> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<script> |
|
|
<script> |
|
|
import { |
|
|
import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7' |
|
|
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,14 +33,13 @@ import point from './point.json' |
|
|
import chinaMap from './chinaMap.vue' |
|
|
import chinaMap from './chinaMap.vue' |
|
|
import { selectConfigList } from '@/api/home' |
|
|
import { selectConfigList } from '@/api/home' |
|
|
import { mapActions, mapGetters } from 'vuex' |
|
|
import { mapActions, mapGetters } from 'vuex' |
|
|
let myMap |
|
|
const width = 0 |
|
|
|
|
|
const height = 0 |
|
|
|
|
|
let myMapZd |
|
|
let scene |
|
|
let scene |
|
|
let circleLayerSmall |
|
|
|
|
|
let roadLayer |
|
|
|
|
|
let polygonLayer |
|
|
let polygonLayer |
|
|
|
|
|
let polygonLayer1 |
|
|
let lineLayer |
|
|
let lineLayer |
|
|
let textLayer |
|
|
|
|
|
let dotTextLayer |
|
|
|
|
|
let dotLayer |
|
|
let dotLayer |
|
|
let dotLayer1 |
|
|
let dotLayer1 |
|
|
let dotLayer2 |
|
|
let dotLayer2 |
|
|
@ -116,18 +109,35 @@ export default { |
|
|
{ name: '年平均降水', units: '毫升', num: '687' }, |
|
|
{ name: '年平均降水', units: '毫升', num: '687' }, |
|
|
{ name: '土壤有机质', units: '含量', num: '1.5%' } |
|
|
{ name: '土壤有机质', units: '含量', num: '1.5%' } |
|
|
], |
|
|
], |
|
|
mapType: '' |
|
|
mapType: '', |
|
|
|
|
|
showPage: false, |
|
|
|
|
|
width: 1920, |
|
|
|
|
|
height: 960 |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
created () { |
|
|
|
|
|
// 获取屏幕高度 |
|
|
|
|
|
const screenHeight = window.innerHeight |
|
|
|
|
|
// 判断屏幕高度并设置变量的值 |
|
|
|
|
|
if (screenHeight === 960) { |
|
|
|
|
|
this.height = 960 |
|
|
|
|
|
} else if (screenHeight === 1080) { |
|
|
|
|
|
this.height = 1080 |
|
|
|
|
|
} else { |
|
|
|
|
|
this.height = 960 |
|
|
|
|
|
} |
|
|
|
|
|
// console.log(this.height, 'this.height') |
|
|
|
|
|
|
|
|
|
|
|
if (width && height) { |
|
|
|
|
|
this.width = width |
|
|
|
|
|
this.height = height |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
created () {}, |
|
|
|
|
|
mounted () { |
|
|
mounted () { |
|
|
window._AMapSecurityConfig = { |
|
|
window._AMapSecurityConfig = { |
|
|
securityJsCode: '92ea2c965c6cf1ba7ee3a8fe01449ef2' |
|
|
securityJsCode: '92ea2c965c6cf1ba7ee3a8fe01449ef2' |
|
|
} |
|
|
} |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
this.$EventBus.$on('switcMapType', (data) => { |
|
|
|
|
|
this.switcMapType(data) |
|
|
|
|
|
}) |
|
|
|
|
|
this.$EventBus.$on('switcMapType1', (data) => { |
|
|
this.$EventBus.$on('switcMapType1', (data) => { |
|
|
this.switcMapType1(data) |
|
|
this.switcMapType1(data) |
|
|
}) |
|
|
}) |
|
|
@ -144,35 +154,23 @@ export default { |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
...mapActions({ |
|
|
...mapActions({ |
|
|
set_qyjj: 'SET_QYJJ' |
|
|
set_qyjj: 'SET_QYJJ', |
|
|
|
|
|
set_gsxq_id: 'SET_GSXQ_ID' |
|
|
}), |
|
|
}), |
|
|
|
|
|
...mapActions({}), |
|
|
|
|
|
openCompanyDetail (item) { |
|
|
|
|
|
this.set_qyjj(true) |
|
|
|
|
|
this.set_gsxq_id(item.id) |
|
|
|
|
|
}, |
|
|
async switcMapType1 (arr) { |
|
|
async switcMapType1 (arr) { |
|
|
this.removeDotLayers() |
|
|
this.removeDotLayers() |
|
|
this.initDot(point, arr) |
|
|
this.initDot(point, arr) |
|
|
}, |
|
|
}, |
|
|
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 { |
|
|
|
|
|
this.initPolygonLayer(type) |
|
|
|
|
|
if (type === 'unit') { |
|
|
|
|
|
this.removeDotLayers() |
|
|
|
|
|
this.initDot(point) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
removeDotLayers () { |
|
|
removeDotLayers () { |
|
|
scene.removeLayer(dotTextLayer) |
|
|
|
|
|
scene.removeLayer(dotLayer) |
|
|
scene.removeLayer(dotLayer) |
|
|
|
|
|
scene.removeLayer(dotLayer1) |
|
|
|
|
|
scene.removeLayer(dotLayer2) |
|
|
|
|
|
scene.removeLayer(dotLayer3) |
|
|
}, |
|
|
}, |
|
|
toProvince () { |
|
|
toProvince () { |
|
|
this.mapFlag = 'Amap' |
|
|
this.mapFlag = 'Amap' |
|
|
@ -180,141 +178,55 @@ export default { |
|
|
this.init() |
|
|
this.init() |
|
|
}, 1000) |
|
|
}, 1000) |
|
|
}, |
|
|
}, |
|
|
init (type) { |
|
|
init () { |
|
|
if (!yifengJson) return false |
|
|
if (!yifengJson) return false |
|
|
myMap = new GaodeMap({ |
|
|
myMapZd = new GaodeMap({ |
|
|
pitch: 40.24716321414439, |
|
|
pitch: 40.24716321414439, |
|
|
mapStyle: 'amap://styles/blue', |
|
|
mapStyle: 'amap://styles/blue', |
|
|
// style: styleConfig.style, |
|
|
// style: styleConfig.style, |
|
|
showLabel: false, |
|
|
showLabel: false, |
|
|
center: [120.220563, 36.496127], |
|
|
center: [120.220563, 36.496127], |
|
|
token: 'fc14b42e0ca18387866d68ebd4f150c1', |
|
|
token: 'fc14b42e0ca18387866d68ebd4f150c1', |
|
|
zoom: 15, |
|
|
zoom: 13, |
|
|
isHotspot: false, |
|
|
isHotspot: false, |
|
|
showIndoorMap: false, |
|
|
showIndoorMap: false, |
|
|
showBuildingBlock: false, |
|
|
showBuildingBlock: false, |
|
|
resizeEnable: true, |
|
|
resizeEnable: true, |
|
|
doubleClickZoom: false, |
|
|
// doubleClickZoom: false, |
|
|
showRoad: false, |
|
|
showRoad: false, |
|
|
viewMode: '3D' |
|
|
viewMode: '3D' |
|
|
}) |
|
|
}) |
|
|
scene = new Scene({ |
|
|
scene = new Scene({ |
|
|
id: 'myMap', |
|
|
id: 'myMapZd', |
|
|
logoVisible: false, |
|
|
logoVisible: false, |
|
|
map: myMap |
|
|
map: myMapZd |
|
|
}) |
|
|
}) |
|
|
|
|
|
this.showPage = true |
|
|
|
|
|
const mapContent = document.getElementById('myMapZd') |
|
|
|
|
|
const scaleWH = this.$store.state.basic.scale |
|
|
|
|
|
mapContent.style.transform = `scale(${1 / scaleWH})` |
|
|
|
|
|
scene.addImage( |
|
|
|
|
|
'yuzhong', |
|
|
|
|
|
require('@/assets/images/map/keyQy/yuzhong.png') |
|
|
|
|
|
) |
|
|
|
|
|
scene.addImage('yumiao', require('@/assets/images/map/keyQy/yumiao.png')) |
|
|
|
|
|
scene.addImage( |
|
|
|
|
|
'zhongzhi', |
|
|
|
|
|
require('@/assets/images/map/keyQy/zhongzhi.png') |
|
|
|
|
|
) |
|
|
|
|
|
scene.addImage( |
|
|
|
|
|
'jiagong', |
|
|
|
|
|
require('@/assets/images/map/keyQy/jiagong.png') |
|
|
|
|
|
) |
|
|
scene.on('loaded', () => { |
|
|
scene.on('loaded', () => { |
|
|
if (!type) { |
|
|
this.initPolygonLayer() |
|
|
// this.initCircle() |
|
|
|
|
|
this.initPolygonLayer(type) |
|
|
|
|
|
} 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); |
|
|
|
|
|
// }) |
|
|
|
|
|
}, |
|
|
|
|
|
initCircle () { |
|
|
|
|
|
circleLayerSmall = new ImageLayer({}) |
|
|
|
|
|
// circleLayerSmall.source( |
|
|
|
|
|
// 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/yifeng/2024-02-03/circle.png', |
|
|
|
|
|
// { |
|
|
|
|
|
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: 1, |
|
|
|
|
|
heightfixed: true, |
|
|
|
|
|
sourceColor: '#4ee8fc', |
|
|
|
|
|
targetColor: '#00284e' |
|
|
|
|
|
}) |
|
|
|
|
|
scene.addLayer(polygonLayer) |
|
|
|
|
|
|
|
|
|
|
|
const that = this |
|
|
|
|
|
// circleLayerSmall.on('click', (ev) => { |
|
|
|
|
|
// // 处理点击事件的逻辑 |
|
|
|
|
|
// that.initRoadLayer() |
|
|
|
|
|
// }) |
|
|
|
|
|
}, |
|
|
|
|
|
initRoadLayer () { |
|
|
|
|
|
if (circleLayerSmall) { |
|
|
|
|
|
scene.removeLayer(circleLayerSmall) |
|
|
|
|
|
} |
|
|
|
|
|
scene.setZoom(10) |
|
|
|
|
|
roadLayer = new ImageLayer({}) |
|
|
|
|
|
// roadLayer.source( |
|
|
|
|
|
// 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/yifeng/2024-02-03/road.png', |
|
|
|
|
|
// { |
|
|
|
|
|
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) => { |
|
|
|
|
|
// // 处理点击事件的逻辑 |
|
|
|
|
|
// that.initPolygonLayer() |
|
|
|
|
|
// }) |
|
|
|
|
|
}, |
|
|
|
|
|
initFlow () { |
|
|
|
|
|
if (circleLayerSmall) { |
|
|
|
|
|
scene.removeLayer(circleLayerSmall) |
|
|
|
|
|
} |
|
|
|
|
|
if (roadLayer) { |
|
|
|
|
|
scene.removeLayer(roadLayer) |
|
|
|
|
|
} |
|
|
|
|
|
if (polygonLayer) { |
|
|
|
|
|
scene.removeLayer(polygonLayer) |
|
|
|
|
|
} |
|
|
|
|
|
scene.setZoom(15) |
|
|
|
|
|
roadLayer = new ImageLayer({}) |
|
|
|
|
|
roadLayer.source('/images/map/flow.png', { |
|
|
|
|
|
parser: { |
|
|
|
|
|
type: 'image', |
|
|
|
|
|
extent: [119.7829, 36.7398, 120.5205, 36.2552] |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
}) |
|
|
scene.addLayer(roadLayer) |
|
|
|
|
|
}, |
|
|
}, |
|
|
initPolygonLayer (type) { |
|
|
initPolygonLayer () { |
|
|
if (type == 'szyf') { |
|
|
|
|
|
this.initFlow() |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
if (type == 'unit') { |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
scene.removeLayer(roadLayer) |
|
|
|
|
|
scene.removeLayer(circleLayerSmall) |
|
|
|
|
|
scene.removeLayer(polygonLayer) |
|
|
scene.removeLayer(polygonLayer) |
|
|
|
|
|
scene.removeLayer(polygonLayer1) |
|
|
scene.removeLayer(lineLayer) |
|
|
scene.removeLayer(lineLayer) |
|
|
scene.removeLayer(dotTextLayer) |
|
|
this.removeDotLayers() |
|
|
this.mapType = 'polygon' |
|
|
this.mapType = 'polygon' |
|
|
const { darkStyle } = this |
|
|
const { darkStyle } = this |
|
|
const styleConfig = darkStyle |
|
|
const styleConfig = darkStyle |
|
|
@ -322,6 +234,7 @@ export default { |
|
|
const data1 = jdbandaoJson |
|
|
const data1 = jdbandaoJson |
|
|
// 画区域面积 |
|
|
// 画区域面积 |
|
|
polygonLayer = new PolygonLayer({ |
|
|
polygonLayer = new PolygonLayer({ |
|
|
|
|
|
zIndex: 1, |
|
|
autoFit: true |
|
|
autoFit: true |
|
|
}) |
|
|
}) |
|
|
.source(data1) |
|
|
.source(data1) |
|
|
@ -339,7 +252,8 @@ export default { |
|
|
targetColor: '#00284e' |
|
|
targetColor: '#00284e' |
|
|
}) |
|
|
}) |
|
|
scene.addLayer(polygonLayer) |
|
|
scene.addLayer(polygonLayer) |
|
|
polygonLayer = new PolygonLayer({ |
|
|
polygonLayer1 = new PolygonLayer({ |
|
|
|
|
|
zIndex: 2, |
|
|
autoFit: true |
|
|
autoFit: true |
|
|
}) |
|
|
}) |
|
|
.size(1) |
|
|
.size(1) |
|
|
@ -355,12 +269,8 @@ export default { |
|
|
heightfixed: true, |
|
|
heightfixed: true, |
|
|
sourceColor: '#3372d0', |
|
|
sourceColor: '#3372d0', |
|
|
targetColor: '#00284e' |
|
|
targetColor: '#00284e' |
|
|
// targetColor: '#4ee8fc' |
|
|
|
|
|
}) |
|
|
|
|
|
scene.addLayer(polygonLayer) |
|
|
|
|
|
polygonLayer.on('click', (e) => { |
|
|
|
|
|
console.log('111') |
|
|
|
|
|
}) |
|
|
}) |
|
|
|
|
|
scene.addLayer(polygonLayer1) |
|
|
// 画区域边 |
|
|
// 画区域边 |
|
|
lineLayer = new LineLayer({ |
|
|
lineLayer = new LineLayer({ |
|
|
zIndex: 2, |
|
|
zIndex: 2, |
|
|
@ -379,146 +289,95 @@ export default { |
|
|
trailLength: 2 // 流线长度 |
|
|
trailLength: 2 // 流线长度 |
|
|
}) |
|
|
}) |
|
|
scene.addLayer(lineLayer) |
|
|
scene.addLayer(lineLayer) |
|
|
lineLayer.on('click', (e) => { |
|
|
polygonLayer1.on('click', (e) => { |
|
|
console.log('222') |
|
|
console.log('222', e) |
|
|
}) |
|
|
}) |
|
|
// lineLayer.on('mousemove', (e) => { |
|
|
|
|
|
// console.log('e::', e) |
|
|
|
|
|
// }) |
|
|
|
|
|
}, |
|
|
}, |
|
|
initDot (data, arr) { |
|
|
initDot (data, arr) { |
|
|
scene.addImage( |
|
|
this.removeDotLayers() |
|
|
'yuzhong', |
|
|
|
|
|
require('@/assets/images/map/keyQy/yuzhong.png') |
|
|
|
|
|
) |
|
|
|
|
|
scene.addImage('yumiao', require('@/assets/images/map/keyQy/yumiao.png')) |
|
|
|
|
|
scene.addImage( |
|
|
|
|
|
'zhongzhi', |
|
|
|
|
|
require('@/assets/images/map/keyQy/zhongzhi.png') |
|
|
|
|
|
) |
|
|
|
|
|
scene.addImage( |
|
|
|
|
|
'jiagong', |
|
|
|
|
|
require('@/assets/images/map/keyQy/jiagong.png') |
|
|
|
|
|
) |
|
|
|
|
|
// textOffset改为动态的 this.buttonIndex == 3 [10,60] 否则就是 [-30 60] |
|
|
// textOffset改为动态的 this.buttonIndex == 3 [10,60] 否则就是 [-30 60] |
|
|
scene.removeLayer(dotLayer) |
|
|
|
|
|
scene.removeLayer(dotLayer1) |
|
|
|
|
|
scene.removeLayer(dotLayer2) |
|
|
|
|
|
scene.removeLayer(dotLayer3) |
|
|
|
|
|
// dotTextLayer = new PointLayer({ |
|
|
|
|
|
// zIndex: 21000000000 |
|
|
|
|
|
// }) |
|
|
|
|
|
// .source(data['育种企业']) |
|
|
|
|
|
// .shape('name', 'text') |
|
|
|
|
|
// .color('#000') |
|
|
|
|
|
// .size(11) |
|
|
|
|
|
// .style({ |
|
|
|
|
|
// strokeWidth: 1, |
|
|
|
|
|
// strokeOpacity: 0.1, |
|
|
|
|
|
// fontWeight: '500', |
|
|
|
|
|
// stroke: '#fff', |
|
|
|
|
|
// textOffset: [20, 0], |
|
|
|
|
|
// raisingHeight: 300, |
|
|
|
|
|
// heightfixed: true, |
|
|
|
|
|
// textAnchor: 'left' |
|
|
|
|
|
// }) |
|
|
|
|
|
// scene.addLayer(dotTextLayer) |
|
|
|
|
|
const images = { |
|
|
const images = { |
|
|
育种企业: 'yuzhong', |
|
|
育种企业: 'yuzhong', |
|
|
育苗企业: 'yumiao', |
|
|
育苗企业: 'yumiao', |
|
|
种植企业: 'zhongzhi', |
|
|
种植企业: 'zhongzhi', |
|
|
加工企业: 'jiagong' |
|
|
加工企业: 'jiagong' |
|
|
} |
|
|
} |
|
|
|
|
|
const gaoliang = [ |
|
|
|
|
|
'瑞克斯旺（中国）农业科技有限公司', |
|
|
|
|
|
'青岛德龙种子有限公司', |
|
|
|
|
|
'青岛世农种苗有限公司', |
|
|
|
|
|
'山东汉研种业科技有限公司', |
|
|
|
|
|
'青岛润之禾农业科技有限公司', |
|
|
|
|
|
'青岛诚一果蔬现代农业专业合作社', |
|
|
|
|
|
'青岛龙之园绿色食品有限公司' |
|
|
|
|
|
] |
|
|
if (arr.some((item) => item === '育种企业')) { |
|
|
if (arr.some((item) => item === '育种企业')) { |
|
|
dotLayer = new PointLayer({ |
|
|
dotLayer = new PointLayer({ zIndex: 30 }) |
|
|
zIndex: 20000000 |
|
|
|
|
|
}) |
|
|
|
|
|
.source(data['育种企业']) |
|
|
.source(data['育种企业']) |
|
|
.shape(images['育种企业']) |
|
|
.shape(images['育种企业']) |
|
|
.size(10) |
|
|
.size('name', (val) => { |
|
|
.style({ |
|
|
if (gaoliang.some((item) => item === val)) { |
|
|
layerType: 'fillImage', |
|
|
return 12 |
|
|
heightfixed: true |
|
|
} |
|
|
|
|
|
return 10 |
|
|
}) |
|
|
}) |
|
|
scene.addLayer(dotLayer) |
|
|
scene.addLayer(dotLayer) |
|
|
// dotTextLayer = new PointLayer({ |
|
|
|
|
|
// zIndex: 2000000021 |
|
|
|
|
|
// }) |
|
|
|
|
|
// .source(data['种植企业']) |
|
|
|
|
|
// .shape('name', 'text') |
|
|
|
|
|
// .color('#000') |
|
|
|
|
|
// .size(11) |
|
|
|
|
|
// .style({ |
|
|
|
|
|
// strokeWidth: 1, |
|
|
|
|
|
// strokeOpacity: 0.1, |
|
|
|
|
|
// fontWeight: '500', |
|
|
|
|
|
// stroke: '#fff', |
|
|
|
|
|
// textOffset: [10, 0], |
|
|
|
|
|
// raisingHeight: 300, |
|
|
|
|
|
// heightfixed: true, |
|
|
|
|
|
// textAnchor: 'center-left' |
|
|
|
|
|
// }) |
|
|
|
|
|
// scene.addLayer(dotTextLayer) |
|
|
|
|
|
|
|
|
|
|
|
// dotTextLayer.on('click', (e) => { |
|
|
|
|
|
// console.log('eee1111') |
|
|
|
|
|
// }) |
|
|
|
|
|
dotLayer.on('click', (e) => { |
|
|
|
|
|
console.log('eee') |
|
|
|
|
|
that.set_qyjj(true) |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
} |
|
|
if (arr.some((item) => item === '育苗企业')) { |
|
|
if (arr.some((item) => item === '育苗企业')) { |
|
|
dotLayer1 = new PointLayer({ |
|
|
dotLayer1 = new PointLayer({ zIndex: 30 }) |
|
|
zIndex: 20000000 |
|
|
|
|
|
}) |
|
|
|
|
|
.source(data['育苗企业']) |
|
|
.source(data['育苗企业']) |
|
|
.shape(images['育苗企业']) |
|
|
.shape(images['育苗企业']) |
|
|
.size(10) |
|
|
.size('name', (val) => { |
|
|
.style({ |
|
|
if (gaoliang.some((item) => item === val)) { |
|
|
layerType: 'fillImage', |
|
|
return 12 |
|
|
heightfixed: true |
|
|
} |
|
|
|
|
|
return 10 |
|
|
}) |
|
|
}) |
|
|
scene.addLayer(dotLayer1) |
|
|
scene.addLayer(dotLayer1) |
|
|
} |
|
|
} |
|
|
if (arr.some((item) => item === '种植企业')) { |
|
|
if (arr.some((item) => item === '种植企业')) { |
|
|
dotLayer2 = new PointLayer({ |
|
|
dotLayer2 = new PointLayer({ zIndex: 30 }) |
|
|
zIndex: 20000000 |
|
|
|
|
|
}) |
|
|
|
|
|
.source(data['种植企业']) |
|
|
.source(data['种植企业']) |
|
|
.shape(images['种植企业']) |
|
|
.shape(images['种植企业']) |
|
|
.size(10) |
|
|
.size('name', (val) => { |
|
|
.style({ |
|
|
if (gaoliang.some((item) => item === val)) { |
|
|
layerType: 'fillImage', |
|
|
return 12 |
|
|
heightfixed: true |
|
|
} |
|
|
|
|
|
return 10 |
|
|
}) |
|
|
}) |
|
|
scene.addLayer(dotLayer2) |
|
|
scene.addLayer(dotLayer2) |
|
|
} |
|
|
} |
|
|
if (arr.some((item) => item === '加工企业')) { |
|
|
if (arr.some((item) => item === '加工企业')) { |
|
|
dotLayer3 = new PointLayer({ |
|
|
dotLayer3 = new PointLayer({ zIndex: 30 }) |
|
|
zIndex: 20000000 |
|
|
|
|
|
}) |
|
|
|
|
|
.source(data['加工企业']) |
|
|
.source(data['加工企业']) |
|
|
.shape(images['加工企业']) |
|
|
.shape(images['加工企业']) |
|
|
.size(10) |
|
|
.size('name', (val) => { |
|
|
.style({ |
|
|
if (gaoliang.some((item) => item === val)) { |
|
|
layerType: 'fillImage', |
|
|
return 12 |
|
|
heightfixed: true |
|
|
} |
|
|
|
|
|
return 10 |
|
|
}) |
|
|
}) |
|
|
scene.addLayer(dotLayer3) |
|
|
scene.addLayer(dotLayer3) |
|
|
} |
|
|
} |
|
|
const that = this |
|
|
dotLayer.on('click', (e) => { |
|
|
|
|
|
if (gaoliang.some((item) => item === e.feature.properties.name)) { |
|
|
|
|
|
this.openCompanyDetail(e.feature.properties) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
dotLayer1.on('click', (e) => { |
|
|
dotLayer1.on('click', (e) => { |
|
|
console.log('eee1') |
|
|
if (gaoliang.some((item) => item === e.feature.properties.name)) { |
|
|
that.set_qyjj(true) |
|
|
this.openCompanyDetail(e.feature.properties) |
|
|
|
|
|
} |
|
|
}) |
|
|
}) |
|
|
dotLayer2.on('click', (e) => { |
|
|
dotLayer2.on('click', (e) => { |
|
|
console.log('eee2') |
|
|
if (gaoliang.some((item) => item === e.feature.properties.name)) { |
|
|
that.set_qyjj(true) |
|
|
this.openCompanyDetail(e.feature.properties) |
|
|
|
|
|
} |
|
|
}) |
|
|
}) |
|
|
dotLayer3.on('click', (e) => { |
|
|
dotLayer3.on('click', (e) => { |
|
|
console.log('eee3') |
|
|
if (gaoliang.some((item) => item === e.feature.properties.name)) { |
|
|
that.set_qyjj(true) |
|
|
this.openCompanyDetail(e.feature.properties) |
|
|
|
|
|
} |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
@ -531,24 +390,34 @@ export default { |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.map-header { |
|
|
.next1 { |
|
|
|
|
|
box-sizing: border-box; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 100px; |
|
|
|
|
|
left: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%); |
|
|
top: 50%; |
|
|
|
|
|
transition: 0.2s; |
|
|
|
|
|
transform-origin: 0 0; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
z-index: 99; |
|
|
|
|
|
} |
|
|
|
|
|
.map-header { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 200px; |
|
|
|
|
|
left: 45%; |
|
|
|
|
|
transform: scale(0.7) translate(-50%); |
|
|
width: 745px; |
|
|
width: 745px; |
|
|
height: 58px; |
|
|
height: 58px; |
|
|
z-index: 10; |
|
|
z-index: 99; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.map-legeng { |
|
|
.map-legeng { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 686px; |
|
|
top: 550px; |
|
|
left: 554px; |
|
|
left: 654px; |
|
|
transform: translate(-50%); |
|
|
transform: scale(0.7) translate(-50%); |
|
|
width: 140px; |
|
|
width: 140px; |
|
|
height: 260px; |
|
|
height: 260px; |
|
|
z-index: 10; |
|
|
z-index: 99; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.bg_img { |
|
|
.bg_img { |
|
|
@ -698,8 +567,12 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#myMap { |
|
|
#myMapZd { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
left: 0; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
|
|
|
// z-index: 100000000000000000000000000000; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
