From 2ec89fac3821d68ad8f8c9c37ef1e977c86743f4 Mon Sep 17 00:00:00 2001
From: master <master@163.com>
Date: 星期四, 28 四月 2022 15:17:09 +0800
Subject: [PATCH] 修改图层中区域样式
---
src/views/index.vue | 52 +++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 45 insertions(+), 7 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 270f014..a872009 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -62,6 +62,7 @@
import img_bg_m_url from '../assets/mapv2/bg_m.png';
import Common from '../unit/common';
import MarsMap from '../components/mars/map.vue'
+import { data } from '../unit/interface';
export default {
name: 'HomeMain',
@@ -71,6 +72,7 @@
index: 0,
companyList: [],
companyList2: [],
+ companyList3: [],
showUser: true,
companys: '鎬诲叕鍙�',
areaId: '',
@@ -224,10 +226,15 @@
for (let i = 0; i < datas.length; i++) {
const graphic = new this.mars3d.graphic.PolygonEntity({
positions: datas[i].shape,
- popup: `<div class="shape-company">
- <span>${datas[i].companyName}</span>
- </div>`,
-
+ // popup: `<div class="shape-company">
+ // <span>${datas[i].companyName}</span>
+ // </div>`,
+ // popupOptions: {
+ // offsetY: 60,
+ // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000),
+ // },
style: {
height: 500 + Math.random() * 1000,
diffHeight: 2000.0,
@@ -235,8 +242,9 @@
alphaPower: 1.5,
opacity: 0.5,
attr: datas[i],
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000),
highlight: {
- tooltip: this.getRate(datas[i].areaId),
+ // tooltip: this.getRate(datas[i].areaId, graphicLayer),
type: this.mars3d.EventType.click,
diffHeight: 3000,
material: this.mars3d.MaterialUtil.createMaterialProperty(this.mars3d.MaterialType.LineFlow, {
@@ -251,9 +259,27 @@
},
})
graphicLayer.addGraphic(graphic)
+
+ const icongraphic = new this.mars3d.graphic.DivGraphic({
+ position: [res.data[i].longitude, res.data[i].latitude, 4000],
+ style: {
+ clampToGround: true,
+ html: `<div class="shape-company">
+ <span>${datas[i].companyName}</span>
+ </div>`,
+ offsetY: 120,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 鎸夎璺濊窛绂绘樉绀�
+ },
+ pointerEvents: false,
+ attr: res.data[i]
+ })
+ this.companyList3.push(icongraphic)
+
graphic.on(this.mars3d.EventType.click, function (event) {
console.log(event)
- that.getRate(event.target.options.style.attr.areaId)
+ that.getRate(event.target.options.style.attr.areaId, graphicLayer)
})
}
@@ -342,7 +368,7 @@
this.$refs.leftBox.init();
this.$refs.rightBox.init()
},
- getRate (areaId) {
+ getRate (areaId, layer) {
this.$axios.get(`${this.$Interface.areaStationRate}?areaId=${areaId}`).then((res) => {
if (res.code === 0) {
console.log(res, "ceshiyixia")
@@ -350,6 +376,18 @@
this.from = res.data[1]
}
})
+ for (let i = 0; i < this.companyList3.length; i++) {
+ let datas = this.companyList3[i]
+
+ if (areaId === datas.options.attr.areaId) {
+ console.log(datas, "datas")
+ console.log("1111111")
+ // datas.addTo(layer)
+ layer.addGraphic(datas)
+ } else {
+ datas.remove(false)
+ }
+ }
},
},
--
Gitblit v1.9.1