<template>
|
<div id="gis-view" ref="mapRef"></div>
|
</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");
|
window.viewer = earthCtrl.viewer;
|
|
// 1. 设置初始时间
|
const date = new Date(2025, 3, 11, 12, 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.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",
|
layers: "tdtBasicLayer",
|
style: "default",
|
format: "image/jpeg",
|
maximumLevel: 18,
|
layer: "",
|
tileMatrixSetID: "",
|
});
|
// 关闭地形深度检测
|
// viewer.scene.globe.depthTestAgainstTerrain = false;
|
}
|
|
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;
|
// console.log("polygonEntity", polygonEntity)
|
const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(
|
1000,
|
50000000
|
);
|
polygonEntity.forEach((entity) => {
|
// console.log("entity", entity)
|
|
entity.polygon.material = new Cesium.ColorMaterialProperty(
|
Cesium.Color.LIGHTSTEELBLUE.withAlpha(0)
|
// new Cesium.Color.fromCssColorString("#0f2636b3")
|
// Cesium.Color.fromRandom({
|
// alpha: 0.5,
|
// minimumAlpha: 0.2,
|
// maximumAlpha: 0.9,
|
// })
|
);
|
|
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 position = Cesium.Cartesian3.fromDegrees(center[0], center[1]);
|
const positions = entity.polygon.hierarchy._value.positions;
|
|
entity.position = position;
|
// 判断是否为东城区或西城区
|
let labelText = fullname || "默认标签";
|
if (fullname === "东城区" || fullname === "西城区") {
|
// 将文本拆分为竖列
|
labelText = fullname.split("").join("\n");
|
}
|
entity.label = {
|
// 文本。支持显式换行符“ \ n”
|
text: labelText,
|
// 字体样式，以CSS语法指定字体
|
font: "22pt Source Han Sans CN",
|
// 字体颜色
|
|
fillColor: Cesium.Color.fromCssColorString("#FD9B00"),
|
// 背景颜色
|
backgroundColor: Cesium.Color.BLACK.withAlpha(0.8),
|
// 是否显示背景颜色
|
showBackground: false,
|
// 字体边框
|
outline: true,
|
// 字体边框颜色
|
outlineColor: Cesium.Color.WHITE,
|
// 字体边框尺寸
|
outlineWidth: 0,
|
// 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
|
scale: 1.0,
|
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
|
// 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
// 相对于坐标的水平位置
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
// 相对于坐标的水平位置
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
// 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
|
pixelOffset: new Cesium.Cartesian2(0, 0),
|
// pixelOffset: new Cesium.Cartesian2(0, 0),
|
// 显示在距相机的距离处的属性，多少区间内是可以显示的
|
distanceDisplayCondition: distanceDisplayCondition,
|
// : new Cesium.DistanceDisplayCondition(0, 50000),
|
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
// 是否显示
|
show: true,
|
};
|
entity.polyline = {
|
positions: positions,
|
width: 5,
|
material: new Cesium.ColorMaterialProperty(
|
Cesium.Color.SKYBLUE.withAlpha(0.9)
|
// Cesium.Color.fromRandom({
|
// alpha: 0.5,
|
// minimumAlpha: 0.2,
|
// maximumAlpha: 0.9,
|
// })
|
),
|
clampToGround: true,
|
distanceDisplayCondition: distanceDisplayCondition,
|
};
|
|
viewer.entities.add(entity);
|
});
|
|
// 获取 GeoJSON 中的第一个 Polygon feature
|
});
|
}
|
|
function flyToHomeView() {
|
const view = {
|
destination: {
|
x: -2355432.569004413,
|
y: 4687573.191838412,
|
z: 4098726.315265574,
|
},
|
orientation: {
|
pitch: -0.9541030830183503,
|
roll: 0.00031421159527500464,
|
heading: 6.140424766644804,
|
},
|
};
|
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;
|
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: `
|
<div class="district-count">
|
<div class="name">${districtName}</div>
|
<div class="value">${count}</div>
|
</div>
|
`,
|
lon: item.lon,
|
lat: item.lat,
|
height: 0,
|
});
|
html.maxVisibleDistance = 69000;
|
html.minVisibleDistance = 20000;
|
html.element.addEventListener("click", () => {
|
viewer.camera.flyTo({
|
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);
|
});
|
});
|
}
|
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: `
|
<div class="district-count">
|
<div class="name">${districtName}</div>
|
<div class="value">${count}</div>
|
</div>
|
`,
|
lon: item.lon,
|
lat: item.lat,
|
height: 0,
|
});
|
html.maxVisibleDistance = 50000000;
|
html.minVisibleDistance = 70000;
|
html.element.addEventListener("click", () => {
|
viewer.camera.flyTo({
|
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);
|
});
|
});
|
}
|
watch(
|
() => route.fullPath,
|
(val) => {
|
if (val != "/") {
|
// clusterLayer.dataSource.show = false
|
htmlEntityList.forEach((item) => {
|
item.show = false;
|
});
|
removeCameraChange();
|
} else {
|
handleCameraChange();
|
// clusterLayer.dataSource.show = true
|
htmlEntityList.forEach((item) => {
|
item.show = isVisibleDistance(
|
item.minVisibleDistance,
|
item.maxVisibleDistance
|
);
|
});
|
}
|
}
|
);
|
function handleCameraChange() {
|
viewer.camera.changed.addEventListener(toggleHtmlLayerByVisibleDistance);
|
}
|
function removeCameraChange() {
|
viewer.camera.changed.removeEventListener(toggleHtmlLayerByVisibleDistance);
|
}
|
let cameraChangeTimer = null;
|
|
function toggleHtmlLayerByVisibleDistance() {
|
if (cameraChangeTimer) {
|
clearTimeout(cameraChangeTimer);
|
cameraChangeTimer = null;
|
return;
|
}
|
cameraChangeTimer = setTimeout(() => {
|
htmlEntityList.forEach((item) => {
|
item.show = isVisibleDistance(
|
item.minVisibleDistance,
|
item.maxVisibleDistance
|
);
|
});
|
}, 100);
|
}
|
|
onMounted(() => {
|
initMap();
|
addCityPolygon();
|
initHandler();
|
// initView()
|
loadAreaPolygon("/json/nsl_area.geojson");
|
loadAreaPolygonAll("/json/geometry.json", true);
|
flyToHomeView();
|
initDistrictCount();
|
initDistrictCountByCity();
|
handleCameraChange();
|
// 设置 billboard 点击事件
|
});
|
onUnmounted(() => {
|
removeCameraChange();
|
});
|
</script>
|
|
<style lang="less" scoped>
|
#gis-view {
|
width: 100vw;
|
height: 100vh;
|
position: absolute;
|
}
|
// // 修改指南针位置
|
// /deep/ .compass {
|
// right: 128px !important;
|
// top: 112px;
|
// }
|
</style>
|
