From e49c02db91d6438f65d4c9c97b938802c35d435e Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期三, 30 四月 2025 17:09:47 +0800
Subject: [PATCH] Merge branch 'master' of http://103.135.160.14:9034/r/NslWeb
---
src/views/GisView.vue | 268 ++++++++++++++++++++++++++++++-----------------------
1 files changed, 152 insertions(+), 116 deletions(-)
diff --git a/src/views/GisView.vue b/src/views/GisView.vue
index f2c202c..9aaf488 100644
--- a/src/views/GisView.vue
+++ b/src/views/GisView.vue
@@ -3,24 +3,43 @@
</template>
<script setup>
-import { onMounted, onUnmounted, ref, watch } from "vue"
-import { createPoint, initHandler, initView, addTileset, addTerrain } from "@/utils/map.js"
-import { loadAreaPolygon } from "@/utils/area.js"
-import { loadAreaPolygonAll } from "@/utils/area_all.js"
-import { isVisibleDistance } from "@/utils/customEntity"
-import { getDistrictCount, getDistrictCountByCity } from "@/api/index"
-import { useRoute } from "vue-router"
-const route = useRoute()
-let handler = null
-function initMap () {
- window.Cesium = SmartEarth.Cesium
- window.earthCtrl = new SmartEarth.EarthCtrl("gis-view")
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import {
+ createPoint,
+ initHandler,
+ initView,
+ addTileset,
+ addTerrain,
+} from "@/utils/map.js";
+import { loadAreaPolygon } from "@/utils/area.js";
+import { loadAreaPolygonAll } from "@/utils/area_all.js";
+import { isVisibleDistance } from "@/utils/customEntity";
+import { getDistrictCount, getDistrictCountByCity } from "@/api/index";
+import { useRoute } from "vue-router";
+const route = useRoute();
+let handler = null;
+function initMap() {
+ window.Cesium = SmartEarth.Cesium;
+ window.earthCtrl = new SmartEarth.EarthCtrl("gis-view");
window.viewer = earthCtrl.viewer;
- const date = new Date(2025, 3, 11, 12, 0, 0, 0);
+
+ // 1. 璁剧疆鍒濆鏃堕棿
+ const date = new Date(2025, 3, 11, 16, 0, 0, 0);
const julianDate = SmartEarth.Cesium.JulianDate.fromDate(date);
+ // earthCtrl.viewer.clock.currentTime = julianDate;
+
+ // 2. 閰嶇疆鏃堕挓閫夐」锛岀姝㈣嚜鍔ㄦ帹杩涙椂闂�
+ earthCtrl.viewer.clockViewModel.shouldAnimate = false; // 绂佺敤鍔ㄧ敾
+ earthCtrl.viewer.clockViewModel.clockRange =
+ SmartEarth.Cesium.ClockRange.CLAMPED; // 闄愬埗鏃堕棿鑼冨洿
+ earthCtrl.viewer.clockViewModel.multiplier = 0; // 璁剧疆鏃堕棿鎺ㄨ繘閫熷害涓�0
+
+ // 3. 璁剧疆褰撳墠鏃堕棿骞堕攣瀹�
earthCtrl.viewer.clock.currentTime = julianDate;
+
+
//鏄剧ずfps
- earthCtrl.showFPS = true
+ earthCtrl.showFPS = true;
earthCtrl.factory.createImageryLayer({
sourceType: "mapworld",
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7eb11c0c503429878691ac917238f87f",
@@ -30,28 +49,31 @@
maximumLevel: 18,
layer: "",
tileMatrixSetID: "",
- })
+ });
// 鍏抽棴鍦板舰娣卞害妫�娴�
// viewer.scene.globe.depthTestAgainstTerrain = false;
}
-function addCityPolygon () {
- const url = `/json/110000.geo.json`
+function addCityPolygon() {
+ const url = `/json/110000.geo.json`;
let wallLayer = earthCtrl.factory.createTrailWallLayer({
url: "/json/110000.geojson",
color: "LIGHTSTEELBLUE", //棰滆壊
height: 2000, //楂樺害
speed: 3,
- })
+ });
const dataSourcePromise = Cesium.GeoJsonDataSource.load(url, {
clampToGround: true,
- })
+ });
return dataSourcePromise.then(function (dataSource) {
- viewer.dataSources.add(dataSource)
- const polygonEntity = dataSource.entities.values
+ viewer.dataSources.add(dataSource);
+ const polygonEntity = dataSource.entities.values;
// console.log("polygonEntity", polygonEntity)
- const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(1000, 50000000)
- polygonEntity.forEach(entity => {
+ const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(
+ 1000,
+ 50000000
+ );
+ polygonEntity.forEach((entity) => {
// console.log("entity", entity)
entity.polygon.material = new Cesium.ColorMaterialProperty(
@@ -62,24 +84,24 @@
// minimumAlpha: 0.2,
// maximumAlpha: 0.9,
// })
- )
+ );
- entity.polygon.distanceDisplayCondition = distanceDisplayCondition
+ entity.polygon.distanceDisplayCondition = distanceDisplayCondition;
- const properties = entity.properties
- const center = properties.centroid.getValue()
- const fullname = properties.fullname.getValue()
- const districtCount = properties.districtCount.getValue() || 0
+ const properties = entity.properties;
+ const center = properties.centroid.getValue();
+ const fullname = properties.fullname.getValue();
+ const districtCount = properties.districtCount.getValue() || 0;
- const position = Cesium.Cartesian3.fromDegrees(center[0], center[1])
- const positions = entity.polygon.hierarchy._value.positions
+ const position = Cesium.Cartesian3.fromDegrees(center[0], center[1]);
+ const positions = entity.polygon.hierarchy._value.positions;
- entity.position = position
+ entity.position = position;
// 鍒ゆ柇鏄惁涓轰笢鍩庡尯鎴栬タ鍩庡尯
- let labelText = fullname || "榛樿鏍囩"
+ let labelText = fullname || "榛樿鏍囩";
if (fullname === "涓滃煄鍖�" || fullname === "瑗垮煄鍖�") {
// 灏嗘枃鏈媶鍒嗕负绔栧垪
- labelText = fullname.split("").join("\n")
+ labelText = fullname.split("").join("\n");
}
entity.label = {
// 鏂囨湰銆傛敮鎸佹樉寮忔崲琛岀鈥� \ n鈥�
@@ -118,7 +140,7 @@
disableDepthTestDistance: Number.POSITIVE_INFINITY,
// 鏄惁鏄剧ず
show: true,
- }
+ };
entity.polyline = {
positions: positions,
width: 5,
@@ -132,16 +154,16 @@
),
clampToGround: true,
distanceDisplayCondition: distanceDisplayCondition,
- }
+ };
- viewer.entities.add(entity)
- })
+ viewer.entities.add(entity);
+ });
// 鑾峰彇 GeoJSON 涓殑绗竴涓� Polygon feature
- })
+ });
}
-function flyToHomeView () {
+function flyToHomeView() {
const view = {
destination: {
x: -2355432.569004413,
@@ -153,27 +175,27 @@
roll: 0.00031421159527500464,
heading: 6.140424766644804,
},
- }
- viewer.scene.camera.flyTo(view)
+ };
+ viewer.scene.camera.flyTo(view);
}
-let htmlEntityList = []
-function initDistrictCount () {
- getDistrictCount().then(res => {
- res.data.forEach(item => {
- const { districtName, count, lat, lon } = item
- item.name = `${item.districtName}\n${item.count}`
- item.longitude = item.lon
- item.latitude = item.lat
- item.showBillboard = false
- item.showLabel = true
+let htmlEntityList = [];
+function initDistrictCount() {
+ getDistrictCount().then((res) => {
+ res.data.forEach((item) => {
+ const { districtName, count, lat, lon } = item;
+ item.name = `${item.districtName}\n${item.count}`;
+ item.longitude = item.lon;
+ item.latitude = item.lat;
+ item.showBillboard = false;
+ item.showLabel = true;
item.label = {
text: item.name,
backgroundColor: SmartEarth.Cesium.Color.SKYBLUE.withAlpha(0.8),
font: "14pt Source Han Sans CN",
fillColor: SmartEarth.Cesium.Color.WHITE,
showBackground: true,
- }
+ };
// createPoint(item)
const html = earthCtrl.view.createScreenDialog({
html: `
@@ -185,41 +207,45 @@
lon: item.lon,
lat: item.lat,
height: 0,
- })
- html.maxVisibleDistance = 69000
- html.minVisibleDistance = 20000
+ });
+ html.maxVisibleDistance = 69000;
+ html.minVisibleDistance = 20000;
html.element.addEventListener("click", () => {
viewer.camera.flyTo({
- destination: Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, 12000),
+ destination: Cesium.Cartesian3.fromDegrees(
+ item.longitude,
+ item.latitude,
+ 12000
+ ),
orientation: {
pitch: Cesium.Math.toRadians(-90),
heading: Cesium.Math.toRadians(0),
roll: 0,
},
duration: 2,
- })
- })
+ });
+ });
- htmlEntityList.push(html)
- })
- })
+ htmlEntityList.push(html);
+ });
+ });
}
-function initDistrictCountByCity () {
- getDistrictCountByCity().then(res => {
- res.data.forEach(item => {
- const { districtName, count, lat, lon } = item
- item.name = `${item.districtName}\n${item.count}`
- item.longitude = item.lon
- item.latitude = item.lat
- item.showBillboard = false
- item.showLabel = true
+function initDistrictCountByCity() {
+ getDistrictCountByCity().then((res) => {
+ res.data.forEach((item) => {
+ const { districtName, count, lat, lon } = item;
+ item.name = `${item.districtName}\n${item.count}`;
+ item.longitude = item.lon;
+ item.latitude = item.lat;
+ item.showBillboard = false;
+ item.showLabel = true;
item.label = {
text: item.name,
backgroundColor: SmartEarth.Cesium.Color.SKYBLUE.withAlpha(0.8),
font: "14pt Source Han Sans CN",
fillColor: SmartEarth.Cesium.Color.WHITE,
showBackground: true,
- }
+ };
// createPoint(item)
const html = earthCtrl.view.createScreenDialog({
html: `
@@ -231,80 +257,90 @@
lon: item.lon,
lat: item.lat,
height: 0,
- })
- html.maxVisibleDistance = 50000000
- html.minVisibleDistance = 70000
+ });
+ html.maxVisibleDistance = 50000000;
+ html.minVisibleDistance = 70000;
html.element.addEventListener("click", () => {
viewer.camera.flyTo({
- destination: Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, 45000),
+ destination: Cesium.Cartesian3.fromDegrees(
+ item.longitude,
+ item.latitude,
+ 45000
+ ),
orientation: {
pitch: Cesium.Math.toRadians(-90),
heading: Cesium.Math.toRadians(0),
roll: 0,
},
duration: 2,
- })
- })
+ });
+ });
- htmlEntityList.push(html)
- })
- })
+ htmlEntityList.push(html);
+ });
+ });
}
watch(
() => route.fullPath,
- val => {
+ (val) => {
if (val != "/") {
// clusterLayer.dataSource.show = false
- htmlEntityList.forEach(item => {
- item.show = false
- })
- removeCameraChange()
+ htmlEntityList.forEach((item) => {
+ item.show = false;
+ });
+ removeCameraChange();
} else {
- handleCameraChange()
+ handleCameraChange();
// clusterLayer.dataSource.show = true
- htmlEntityList.forEach(item => {
- item.show = isVisibleDistance(item.minVisibleDistance, item.maxVisibleDistance)
- })
+ htmlEntityList.forEach((item) => {
+ item.show = isVisibleDistance(
+ item.minVisibleDistance,
+ item.maxVisibleDistance
+ );
+ });
}
}
-)
-function handleCameraChange () {
- viewer.camera.changed.addEventListener(toggleHtmlLayerByVisibleDistance)
+);
+function handleCameraChange() {
+ viewer.camera.changed.addEventListener(toggleHtmlLayerByVisibleDistance);
}
-function removeCameraChange () {
- viewer.camera.changed.removeEventListener(toggleHtmlLayerByVisibleDistance)
+function removeCameraChange() {
+ viewer.camera.changed.removeEventListener(toggleHtmlLayerByVisibleDistance);
}
-let cameraChangeTimer = null
+let cameraChangeTimer = null;
-function toggleHtmlLayerByVisibleDistance () {
+function toggleHtmlLayerByVisibleDistance() {
if (cameraChangeTimer) {
- clearTimeout(cameraChangeTimer)
- cameraChangeTimer = null
- return
+ clearTimeout(cameraChangeTimer);
+ cameraChangeTimer = null;
+ return;
}
cameraChangeTimer = setTimeout(() => {
- htmlEntityList.forEach(item => {
- item.show = isVisibleDistance(item.minVisibleDistance, item.maxVisibleDistance)
- })
- }, 100)
+ htmlEntityList.forEach((item) => {
+ item.show = isVisibleDistance(
+ item.minVisibleDistance,
+ item.maxVisibleDistance
+ );
+ });
+ }, 100);
}
onMounted(() => {
- initMap()
- addCityPolygon()
- initHandler()
+ initMap();
+ addCityPolygon();
+ initHandler();
// initView()
- loadAreaPolygon("/json/nsl_area.geojson")
- loadAreaPolygonAll("/json/geometry.json", true)
- flyToHomeView()
- initDistrictCount()
- initDistrictCountByCity()
- handleCameraChange()
+ loadAreaPolygon("/json/nsl_area.geojson");
+ loadAreaPolygonAll("/json/geometry.json", true);
+ flyToHomeView();
+ initDistrictCount();
+ initDistrictCountByCity();
+ handleCameraChange();
// 璁剧疆 billboard 鐐瑰嚮浜嬩欢
-})
+});
onUnmounted(() => {
- removeCameraChange()
-})
+ removeCameraChange();
+});
</script>
<style lang="less" scoped>
--
Gitblit v1.9.3