@@ -86,8 +87,9 @@ export default {
set_yfcj: 'SET_YFCJ',
set_ldhg: 'SET_LDGH'
}),
-
-
+ handelClickEmap(){
+ this.$EventBus.$emit('switcMapType', 'Emap')
+ }
},
components: {},
computed: {},
@@ -107,7 +109,15 @@ export default {
box-sizing: border-box;
@include flex(column);
justify-content: space-around;
-
+ position: relative;
+ .title{
+ position: absolute;
+ top: 54px;
+ font-family: FZZhengHeiS-B-GB;
+ left: 113px;
+ font-size: 24px;
+ font-weight: 600;
+ }
img {
height: 110px;
width: 100%;
@@ -195,7 +205,8 @@ export default {
position: absolute;
background: url('~@/assets/images/index/yfcjkuang.png') no-repeat 50% 50%;
background-size: 100% 100%;
-
+ animation: zoomIn 2s infinite; /* 持续时间为 1 秒，缓动效果为 ease-in-out */
+ transform-origin: center center; /* 缩放的原点为元素的中心 */
&::after {
content: '·';
width: 8px;
@@ -245,4 +256,15 @@ export default {
transform: rotate(360deg);
}
}
+@keyframes zoomIn {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.2);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
diff --git a/src/views/next/screen-content-map/cpt/point.json b/src/views/next/screen-content-map/cpt/point.json
index f883925..4ba0c78 100644
--- a/src/views/next/screen-content-map/cpt/point.json
+++ b/src/views/next/screen-content-map/cpt/point.json
@@ -6,7 +6,9 @@
"type": "Feature",
"properties": {
"name": "青岛德龙种子研发中心",
- "type": "marker"
+ "type": "marker",
+ "category":"unit",
+ "id":"1"
},
"geometry": {
"type": "Point",
@@ -17,12 +19,53 @@
"type": "Feature",
"properties": {
"name": "瑞克斯旺农业科技有限公司",
- "type": "marker"
+ "type": "marker",
+ "category":"unit",
+ "id":"2"
},
"geometry": {
"type": "Point",
"coordinates":[120.2245,36.542161]
}
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "国家农业科技园",
+ "type": "marker",
+ "category":"garden",
+ "id":"3"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates":[120.204031,36.553108]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "吉茂源农业科技有限公司",
+ "type": "marker",
+ "category":"garden",
+ "id":"4"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates":[120.230002,36.582204]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "德龙种子有限公司",
+ "type": "marker",
+ "category":"garden",
+ "id":"5"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates":[120.221626,36.468795]
+ }
}
]
}
diff --git a/src/views/next/screen-content-map/cpt/szyf-img.vue b/src/views/next/screen-content-map/cpt/szyf-img.vue
deleted file mode 100644
index 547f077..0000000
--- a/src/views/next/screen-content-map/cpt/szyf-img.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
- 11
-
-
-
-
-
\ No newline at end of file
diff --git a/src/views/next/screen-content-map/cpt/zdyf-map.vue b/src/views/next/screen-content-map/cpt/zdyf-map.vue
index 328ba53..d50ac4c 100644
--- a/src/views/next/screen-content-map/cpt/zdyf-map.vue
+++ b/src/views/next/screen-content-map/cpt/zdyf-map.vue
@@ -24,7 +24,7 @@ import { GaodeMap } from "@antv/l7-maps";
import yifengJson from './yifeng.json';
import point from './point.json';
import chinaMap from "./chinaMap.vue"
-import { mapActions,mapGetters } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
let myMap;
let scene;
let circleLayerSmall;
@@ -116,38 +116,48 @@ export default {
methods: {
...mapActions({
set_qyjj: 'SET_QYJJ',
+ set_garden: 'SET_GARDEN',
}),
- async switcMapType(type) {
- if (type === 'Emap') {
- this.mapType = null;
- this.mapFlag = 'Emap';
- scene.destroy();
- myMap = null;
- return;
+ switcMapType: function (type) {
+ if (this.debounceTimer) {
+ clearTimeout(this.debounceTimer);
}
- 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);
- if (type === 'unit') {
- this.initDot(point);
+ this.debounceTimer = setTimeout(async () => {
+ if (type === 'Emap') {
+ this.mapType = null;
+ this.mapFlag = 'Emap';
+ scene.destroy();
+ myMap = null;
} else {
- this.removeDotLayers();
+ this.mapFlag = 'Amap';
+ if (!myMap) {
+ await new Promise(resolve => setTimeout(resolve, 5000));
+ await this.init(type);
+ } else {
+ this.initPolygonLayer(type);
+ }
}
- }
- },
- removeDotLayers() {
- if (dotTextLayer || dotLayer) {
- scene.removeLayer(dotTextLayer);
- scene.removeLayer(dotLayer);
- }
+ }, 1000); // 设置防抖间隔，这里是1秒
},
+ // 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(() => {
@@ -178,15 +188,12 @@ export default {
logoVisible: false,
map: myMap,
});
+ scene.addImage("textBg", require("@/assets/images/map/textBg.png"));
scene.on("loaded", () => {
if (!type) {
this.initCircle()
- } else if (type == 'unit') {
- this.initPolygonLayer()
- } else if (type == 'resource') {
+ } else if (type == 'unit' || type == 'resource' || type == 'szyf' || type == 'garden') {
this.initPolygonLayer(type)
- }else if (type == 'szyf') {
- this.initFlow(type)
}
});
scene.on("click", (feature) => {
@@ -196,7 +203,7 @@ export default {
initCircle() {
circleLayerSmall = new ImageLayer({});
circleLayerSmall.source(
- `${process.env.VUE_APP_MAP_IMG}circle1.png`,
+ `https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/yifeng/2024-02-03/circle.png`,
{
parser: {
type: 'image',
@@ -218,7 +225,7 @@ export default {
scene.setZoom(10)
roadLayer = new ImageLayer({});
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: {
type: 'image',
@@ -233,14 +240,14 @@ export default {
that.initPolygonLayer()
});
},
- initFlow(){
+ initFlow() {
if (circleLayerSmall) {
scene.removeLayer(circleLayerSmall);
}
- if(roadLayer){
+ if (roadLayer) {
scene.removeLayer(roadLayer);
}
- if(polygonLayer){
+ if (polygonLayer) {
scene.removeLayer(polygonLayer);
}
scene.setZoom(10)
@@ -255,20 +262,19 @@ export default {
}
);
scene.addLayer(roadLayer);
-
+
},
initPolygonLayer(type) {
- if(polygonLayer){
+ if (polygonLayer) {
scene.removeLayer(polygonLayer);
}
- if(lineLayer){
+ if (lineLayer) {
scene.removeLayer(lineLayer);
}
- if(textLayer){
+ if (textLayer) {
scene.removeLayer(textLayer);
-
}
- if(type == 'szyf') {
+ if (type == 'szyf') {
this.initFlow()
return
}
@@ -343,15 +349,22 @@ export default {
})
.active(true);
scene.addLayer(textLayer);
- let _this = this
+ let 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) => {
});
},
- initDot(data) {
- console.log(data, '点位数据');
- scene.addImage("dotBto", require("@/assets/images/map/dot.png"));
- scene.addImage("textBg", require("@/assets/images/map/textBg.png"));
+ initDot(data, type) {
+ if (dotTextLayer) {
+ scene.removeLayer(dotTextLayer);
+ }
+ if (dotLayer) {
+ scene.removeLayer(dotLayer);
+ }
//textOffset改为动态的 this.buttonIndex == 3 [10,60] 否则就是 [-30 60]
dotTextLayer = new PointLayer({
zIndex: 21,
@@ -360,12 +373,12 @@ export default {
.shape('name', 'text')
.color("#000")
.size(11)
- .style({
+ .style({
strokeWidth: 1,
strokeOpacity: 0.1,
fontWeight: '500',
stroke: "#fff",
- textOffset: [10, 0] ,
+ textOffset: [10, 0],
raisingHeight: 300,
heightfixed: true,
textAnchor: "center-left",
@@ -386,7 +399,19 @@ export default {
scene.addLayer(dotLayer);
let that = this
dotTextLayer.on("click", (e) => {
- that.set_qyjj(true)
+ 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('暂无数据~');
+ }
+ }
});
// dotTextLayer.on("mousemove", (e) => {
@@ -409,6 +434,12 @@ export default {
computed: {
...mapGetters(['navId',]),
},
+ beforeDestroy() {
+ if (myMap) {
+ scene.destroy();
+ myMap = null
+ }
+ },
watch: {},
}
diff --git a/src/views/next/screen-content-map/index.vue b/src/views/next/screen-content-map/index.vue
index 6092399..ffb6d0a 100644
--- a/src/views/next/screen-content-map/index.vue
+++ b/src/views/next/screen-content-map/index.vue
@@ -8,7 +8,6 @@
import { mapGetters, mapActions } from 'vuex'
import { numAnimation } from 'utils/common'
import hsyfIframe from './cpt/hsyf-iframe.vue'
-import szyfImg from './cpt/szyf-img.vue'
import homeMap from './cpt/home-map.vue'
import zdyfMap from './cpt/zdyf-map.vue'
import whyf from './cpt/whyf.vue'
@@ -37,7 +36,7 @@ export default {
}
}
},
- components: { hsyfIframe, szyfImg, homeMap, zdyfMap,whyf },
+ components: { hsyfIframe, szyfMap, homeMap, zdyfMap,whyf },
watch: {
scale: {
immediate: true,
diff --git a/src/views/next/screen-content-right/zdyf-right/index.vue b/src/views/next/screen-content-right/zdyf-right/index.vue
index 26e066d..86c863a 100644
--- a/src/views/next/screen-content-right/zdyf-right/index.vue
+++ b/src/views/next/screen-content-right/zdyf-right/index.vue
@@ -12,13 +12,18 @@
科研力量
-
-
- 青岛大沽河流域国家农业科技园由即墨农业高新区和青岛生物高新科技产业园合并，与2021年3月正式挂牌成立。园区是以大沽河流域为核心，覆盖青岛带动周边的经济发展。
-
-
+
-
2022年4月10日，习近平总书记在海南省三亚市崖州湾种子实验室考察调研时强调，种子是我国粮食安全的关键。只有用自己的手攥紧中国种子，才能端稳中国饭碗，才能实现粮食安全。种源要做到自主可控，种业科技要自立自强。
