From 941f6f70206d33c3f507c092c32fc5647a240c37 Mon Sep 17 00:00:00 2001
From: master <master@163.com>
Date: 星期五, 29 四月 2022 16:14:51 +0800
Subject: [PATCH] 添加公交地图界面部分地图
---
src/views/map/map.vue | 122 ++++++++++++++++++++++++++++++++++------
1 files changed, 103 insertions(+), 19 deletions(-)
diff --git a/src/views/map/map.vue b/src/views/map/map.vue
index f2464fc..68c97d7 100644
--- a/src/views/map/map.vue
+++ b/src/views/map/map.vue
@@ -123,6 +123,7 @@
import img_zhandian_s_url from "../../assets/mapv2/icon_zhandian_s.png";
import img_cheliang_s_url from "../../assets/mapv2/icon_cheliang_s.png";
import img_cheliang_ss_url from "../../assets/mapv2/icon_cheliang_ss.png";
+// import bus_model from '../../assets/model/bus3.gltf'
import img_bg_s_url from '../../assets/mapv2/bg_s.png';
import fgsmarkers from '../../assets/json/fgsmarkers.json';
import czmarkers from '../../assets/json/czmarkers.json';
@@ -272,6 +273,9 @@
if (window.drawTool) { window.drawTool.disable(); }
switch (type) {
case 0:
+ window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
+ window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
+ window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
this.initfgsLayer();
this.isActivatetool = false
this.isActivatetoolcl = false
@@ -282,6 +286,9 @@
this.bar[type].text_div = false;
break;
case 1:
+ window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
+ window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
+ window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
this.initczLayer();
this.$store.commit("SET_MapMenu", "鍦虹珯")
this.$store.commit("SET_SelAttr", { visa: false })
@@ -302,6 +309,9 @@
this.initxlLayer();
break;
case 3:
+ window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
+ window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
+ window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
this.initzdLayer();
this.isActivatetool = false
this.isActivatetoolcl = false
@@ -313,6 +323,9 @@
this.bar[type].text_div = false;
break;
case 4:
+ window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
+ window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
+ window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
this.initclLayer();
this.isActivatetool = false
this.isActivatetoolcl = true
@@ -500,9 +513,11 @@
hideAllLayer () {
utils.hideAllLayer();
},
+ // 鍒嗗叕鍙告寜閽�
initfgsLayer () {
+
+
let that = this
- //utils.initfgsLayer();
const fengongsi_layer = new this.mars3d.layer.GraphicLayer({ id: 'fengongsi_layer' })
// 2.鍦╨ayer涓婄粦瀹氱洃鍚簨浠�
fengongsi_layer.on(this.mars3d.EventType.click, function (event) {
@@ -515,7 +530,6 @@
const fengongsi_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'fengongsi_area_layer' })
window.marsmap.addLayer(fengongsi_layer)
window.marsmap.addLayer(fengongsi_area_layer)
-
this.$axios.get(this.$Interface.mapResource.getFenGongSiAll, {}).then((res) => {
if (res.code === 0) {
console.log(res.data);
@@ -541,19 +555,15 @@
}
});
},
+ // 绔欑偣鎸夐挳
initzdLayer () {
- // let datas = []
- // this.$axios.get(this.$Interface.mapResource.getZhandianDataAll, {}).then((res) => {
- // console.log(res, "绔欑偣鎺ュ彛")
- // })
let that = this
- //utils.initfgsLayer();
const zhandian_layer = new this.mars3d.layer.GraphicLayer({ id: 'zhandian_layer' })
// 2.鍦╨ayer涓婄粦瀹氱洃鍚簨浠�
zhandian_layer.on(this.mars3d.EventType.click, function (event) {
console.log('鐩戝惉layer锛屽崟鍑讳簡鐭㈤噺瀵硅薄', event)
console.log(event.graphic.attr)
- store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: event.graphic.attr.id, value: event.graphic.attr.name })
+ that.$store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
event.graphic.flyTo({ radius: 2000, duration: 1 })
})
@@ -565,13 +575,12 @@
if (res.code === 0) {
console.log(res.data);
for (let i = 0; i < res.data.length; i++) {
- const graphic = new this.mars3d.graphic.DivGraphic({
- position: [res.data[i].longitude, res.data[i].latitude, 1000],
+ let positionses = [res.data[i].longitude, res.data[i].latitude, 0]
+ const graphic = new this.mars3d.graphic.BillboardPrimitive({
+ position: positionses,
style: {
- html: `<div class="marsBlueGradientPnl"><div>` + res.data[i].companyName + `</div></div>`,
- offsetY: -60,
- horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ image: img_zhandian_m_url,
+ scale: 0.3,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 鎸夎璺濊窛绂绘樉绀�
// 楂樹寒鏃剁殑鏍峰紡
highlight: {
@@ -586,19 +595,94 @@
}
});
},
+
+ // 鍦虹珯鍥惧眰
initczLayer () {
- let datas = []
- this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {}).then((res) => {
- console.log(res, "鍦虹珯鎺ュ彛")
+ let that = this
+ const changzhan_layer = new this.mars3d.layer.GraphicLayer({ id: 'changzhan_layer' })
+ // 2.鍦╨ayer涓婄粦瀹氱洃鍚簨浠�
+ changzhan_layer.on(this.mars3d.EventType.click, function (event) {
+ console.log('鐩戝惉layer锛屽崟鍑讳簡鐭㈤噺瀵硅薄', event)
+ console.log(event.graphic.attr)
+ that.$store.commit("SET_SelAttr", { visa: true, type: "changzhan", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
+ event.graphic.flyTo({ radius: 2000, duration: 1 })
+
})
+ const changzhan_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'changzhan_area_layer' })
+ window.marsmap.addLayer(changzhan_layer)
+ window.marsmap.addLayer(changzhan_area_layer)
+
+ this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {}).then((res) => {
+ console.log(res,"changzhan")
+ if (res.code === 0) {
+ console.log(res.data);
+ for (let i = 0; i < res.data.length; i++) {
+ let positionses = [res.data[i].longitude, res.data[i].latitude, 0]
+ const graphic = new this.mars3d.graphic.BillboardPrimitive({
+ position: positionses,
+ style: {
+ image: img_zhandian_m_url,
+ scale: 0.3,
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 鎸夎璺濊窛绂绘樉绀�
+ // 楂樹寒鏃剁殑鏍峰紡
+ highlight: {
+ type: this.mars3d.EventType.click,
+ className: "marsBlueGradientPnl-highlight"
+ }
+ },
+ attr: res.data[i]
+ })
+ changzhan_layer.addGraphic(graphic)
+ }
+ }
+ });
},
initxlLayer () {
// utils.loadGeometryById("411", "1");
console.log("eee")
},
+
+ // 杞﹁締鍥惧眰
initclLayer () {
- // utils.initcheliangLayer();
- console.log("eeeeeeee")
+ let that = this
+ const cheliang_layer = new this.mars3d.layer.GraphicLayer({ id: 'cheliang_layer' })
+ // 2.鍦╨ayer涓婄粦瀹氱洃鍚簨浠�
+ cheliang_layer.on(this.mars3d.EventType.click, function (event) {
+ console.log('鐩戝惉layer锛屽崟鍑讳簡鐭㈤噺瀵硅薄', event)
+ console.log(event.graphic.attr)
+ that.$store.commit("SET_SelAttr", { visa: true, type: "cheliang", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
+ event.graphic.flyTo({ radius: 2000, duration: 1 })
+
+ })
+ const cheliang_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'cheliang_area_layer' })
+ window.marsmap.addLayer(cheliang_layer)
+ window.marsmap.addLayer(cheliang_area_layer)
+
+ this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {}).then((res) => {
+ console.log(res,"cheliang")
+ if (res.code === 0) {
+ console.log(res.data);
+ for (let i = 0; i < res.data.length; i++) {
+ let positionses = [res.data[i].longitude, res.data[i].latitude, 0]
+ const graphic = new this.mars3d.graphic.ModelEntity({
+ position: positionses,
+ style: {
+ url: "//data.mars3d.cn/gltf/mars/car/bus3.gltf",
+ scale: 0.1,
+ minimumPixelSize: 20,
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 鎸夎璺濊窛绂绘樉绀�
+ // 楂樹寒鏃剁殑鏍峰紡
+ highlight: {
+ type: this.mars3d.EventType.click,
+ className: "marsBlueGradientPnl-highlight"
+ }
+ },
+ attr: res.data[i]
+ })
+ cheliang_layer.addGraphic(graphic)
+ }
+ }
+ });
},
closediv (str) {
if (str === "zhandian") {
--
Gitblit v1.9.1