From 8e316d061f61f632475bab738d2563476fd09fc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Mon, 19 Aug 2024 10:35:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BEselect=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/mars-map/index.vue | 1 +
src/views/index.vue | 113 ++++++++++++++----------------
2 files changed, 55 insertions(+), 59 deletions(-)
diff --git a/src/components/mars-map/index.vue b/src/components/mars-map/index.vue
index c667349..c762b6f 100644
--- a/src/components/mars-map/index.vue
+++ b/src/components/mars-map/index.vue
@@ -1,6 +1,7 @@
+
diff --git a/src/views/index.vue b/src/views/index.vue
index 8054752..5541c85 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -7,8 +7,7 @@
-
-
+
@@ -59,7 +58,6 @@ import {
foldpanelRight,
IndexModelRight,
} from "@/views/components/index.js";
-// import LeafletMap from "@/components/LeafletMap";
import { getCommunitylist, getXiaoqulist } from "@/api/taicangpop/data.js";
export default {
@@ -74,7 +72,6 @@ export default {
IndexModelLeft,
foldpanelRight,
IndexModelRight,
- // LeafletMap,
},
data() {
const basePathUrl = window.basePathUrl || "";
@@ -146,28 +143,7 @@ export default {
this.map = map;
map.on(mars3d.EventType.wheel, function (e) {
- _this.mapLayer.shequ.eachGraphic((graphic) => {
- if (graphic.isPrivate) {
- return;
- }
- if (e.target.level >= 14) {
- graphic.openHighlight(
- {
- label: {
- opacity: 0,
- },
- },
- false
- );
- } else {
- graphic.closeHighlight();
- }
- });
- if (e.target.level >= 14) {
- _this.mapLayer.xiaoqu.show = true;
- } else {
- _this.mapLayer.xiaoqu.show = false;
- }
+ _this.zoomChange();
});
this.addLayer();
@@ -177,6 +153,31 @@ export default {
this.addRoad();
this.addRiver();
},
+ zoomChange() {
+ let level = this.map.level;
+ this.mapLayer.shequ.eachGraphic((graphic) => {
+ if (graphic.isPrivate) {
+ return;
+ }
+ if (level >= 14) {
+ graphic.openHighlight(
+ {
+ label: {
+ opacity: 0,
+ },
+ },
+ false
+ );
+ } else {
+ graphic.closeHighlight();
+ }
+ });
+ if (level >= 14) {
+ this.mapLayer.xiaoqu.show = true;
+ } else {
+ this.mapLayer.xiaoqu.show = false;
+ }
+ },
//河 - 河名
addRiver() {
mars3d.Util.fetchJson({ url: this.riveruUrl }).then((res) => {
@@ -224,37 +225,6 @@ export default {
this.mapLayer.river.addGraphic(graphic);
});
});
- // mars3d.Util.fetchJson({ url: this.riveruUrl }).then((res) => {
- // const arr = mars3d.Util.geoJsonToGraphics(res);
- // console.log(arr);
- // arr.map((item) => {
- // const graphic = new mars3d.graphic.Water({
- // positions: item.positions,
- // style: {
- // height: 3, // 水面高度
- // normalMap: require("../assets/images/ui/waterNormals.jpg"), // 水正常扰动的法线图
- // frequency: 8000.0, // 控制波数的数字。
- // animationSpeed: 0.02, // 控制水的动画速度的数字。
- // amplitude: 5.0, // 控制水波振幅的数字。
- // specularIntensity: 0.8, // 控制镜面反射强度的数字。
- // baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
- // blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
- // opacity: 0.7, // 透明度
- // clampToGround: false, // 是否贴地
- // textureCoordinates: {
- // positions: [
- // new Cesium.Cartesian2(0, 1),
- // new Cesium.Cartesian2(0, 0),
- // new Cesium.Cartesian2(0.5, 0),
- // new Cesium.Cartesian2(1, 0),
- // new Cesium.Cartesian2(1, 1),
- // ],
- // },
- // },
- // });
- // this.mapLayer.river.addGraphic(graphic);
- // });
- // });
},
//路 - 路名
addRoad() {
@@ -361,6 +331,7 @@ export default {
const arr = mars3d.Util.geoJsonToGraphics(res);
arr.map((item, index) => {
const polygonEntity = new mars3d.graphic.PolygonEntity({
+ id: `shequ${item.id}`,
positions: item.positions,
style: {
fill: true,
@@ -418,6 +389,7 @@ export default {
addstreet() {
mars3d.Util.fetchJson({ url: this.streetUrl }).then((res) => {
const arr = mars3d.Util.geoJsonToGraphics(res);
+
arr.map((item, index) => {
const wall = new mars3d.graphic.WallPrimitive({
positions: item.positions[0],
@@ -439,12 +411,35 @@ export default {
handleChange(e) {
if (!e) return;
+ let _this = this;
this.$store.dispatch("GetXiaoquInfo", e);
this.xiaoqu = "";
this.xiaoquList = this.communityList.filter(
(item) => item.dept_id == e
)[0].children;
- if (e == 100) e = undefined;
+ if (e == 100) {
+ e = undefined;
+ this.map.flyHome({
+ duration: 1,
+ });
+ setTimeout(() => {
+ this.zoomChange();
+ }, 1200);
+ } else {
+ let shequItem = this.mapLayer.shequ.getGraphicByAttr(
+ `shequ${e}`
+ ).centerPoint;
+ this.map.flyToPoint(
+ new mars3d.LngLatPoint(shequItem._lng, shequItem._lat),
+ {
+ radius: 2776.4,
+ duration: 1,
+ complete: function () {
+ _this.zoomChange();
+ },
+ }
+ );
+ }
this.$store.dispatch("GetYjtotal", {
shequId: e,
});