551 lines
21 KiB
HTML
551 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Use correct character set. -->
|
|
<meta charset="utf-8" />
|
|
<!-- Tell IE to use the latest, best version. -->
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
|
/>
|
|
<title>Learning Cesium!</title>
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|
<script src="./js/turf.min.js"></script>
|
|
<style>
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|
html,
|
|
body,
|
|
#app,
|
|
#cesiumContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<!-- 引入样式 -->
|
|
<link rel="stylesheet" href="./js/elementui/index.css" />
|
|
<!-- import Vue before Element -->
|
|
<script src="./js/vue2710.js"></script>
|
|
<!-- import JavaScript -->
|
|
<script src="./js/elementui/index.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="cesiumContainer"></div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import viewUtil from "./js/utils/viewUtil.js";
|
|
import DynamicRange from "./js/utils/DynamicRange.js";
|
|
import {
|
|
cesiumToken,
|
|
geoserverConfig,
|
|
geoqConfig,
|
|
} from "./js/mapConfig.js";
|
|
Cesium.Ion.defaultAccessToken = cesiumToken;
|
|
|
|
new Vue({
|
|
el: "#app",
|
|
data: {
|
|
colorMap: {
|
|
襄阳都市圈: "rgb( 159, 197, 200 )",
|
|
宜昌都市圈: "rgb( 175, 198, 183 )",
|
|
武汉都市圈: "rgb( 232, 228, 211 )",
|
|
},
|
|
mapData: {},
|
|
dataUrlMap: {
|
|
dsq: "./data/hubei/dsq/dsq.geojson",
|
|
dsq_boundary: "./data/hubei/dsq/dsq_boundary.geojson",
|
|
hubei_country: "./data/hubei/dsq/hubei_country.geojson",
|
|
// "hubei_full_check":"./data/hubei/dsq/hubei_full_check.geojson",
|
|
},
|
|
poiData: [
|
|
{
|
|
name: "襄阳都市圈",
|
|
coords: [112.144, 32.0424],
|
|
maxR: 22000,
|
|
minR: 200,
|
|
centerLabel:"襄阳市",
|
|
radius: 0.45,
|
|
},
|
|
{
|
|
name: "宜昌都市圈",
|
|
coords: [111.291, 30.7026],
|
|
maxR: 22000,
|
|
minR: 200,
|
|
centerLabel:"宜昌市",
|
|
radius: 0.3,
|
|
},
|
|
{
|
|
name: "武汉都市圈",
|
|
coords: [114.299, 30.5844],
|
|
maxR: 22000,
|
|
minR: 200,
|
|
centerLabel:"武汉市",
|
|
radius: 0.3,
|
|
},
|
|
],
|
|
arrowData:[
|
|
[
|
|
[],
|
|
[],
|
|
[]
|
|
]
|
|
],
|
|
stepNum: 50,
|
|
path1:[
|
|
[109.403581,33.221968],
|
|
[110.108417,33.040853],
|
|
[110.807074,32.712447],
|
|
[111.643112,32.215437],
|
|
[112.111822,32.054731],
|
|
[113.361446,31.682310],
|
|
[113.971458,31.243028],
|
|
[114.313679,30.600603],
|
|
[114.776475,30.196292],
|
|
[115.305035,29.963619],
|
|
[115.585793,29.884270],
|
|
[115.847391,29.825443],
|
|
],
|
|
path2:[
|
|
[112.028493,32.951546],
|
|
[111.958582,32.466826],
|
|
[112.097405,31.990433],
|
|
[112.131261,31.296324],
|
|
[111.663534,30.942898],
|
|
[111.266930,30.765041],
|
|
[110.854048,30.425470],
|
|
[110.797404,29.944864],
|
|
]
|
|
},
|
|
methods: {
|
|
initViewer() {
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|
geocoder: false, //位置查找
|
|
homeButton: false, //视图返回初始位置
|
|
sceneModePicker: false, //视角选择器
|
|
baseLayerPicker: false, //底图选择器
|
|
navigationHelpButton: false, //导航帮助按钮
|
|
animation: false, //动画控制器
|
|
creditContainer: document.createElement("div"), //版权显示
|
|
timeline: false, //时间线
|
|
fullscreenButton: false, //全屏控件
|
|
vrButton: false,
|
|
infoBox: false,
|
|
selectionIndicator: false,
|
|
timeline: true, //时间线
|
|
});
|
|
window.viewer = viewer;
|
|
let imageryLayers = viewer.imageryLayers;
|
|
imageryLayers.removeAll();
|
|
|
|
// 添加 ArcGIS 影像地图服务
|
|
const esriImagery = new Cesium.ArcGisMapServerImageryProvider({
|
|
url: geoqConfig.shiliang.url,
|
|
});
|
|
imageryLayers.addImageryProvider(esriImagery);
|
|
|
|
// imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
|
|
// url: 'http://t1.tianditu.gov.cn/cia_w/wmts?tk=bf156eb3c72350d62b008dc8a4ae1016',
|
|
// layer:'cia',
|
|
// style:'default',
|
|
// tileMatrixSetID:'w',
|
|
// format:'tiles',
|
|
// maximumLevel: 18
|
|
// }))
|
|
|
|
// 将三维球定位到汉江
|
|
viewer.camera.flyTo({
|
|
destination: new Cesium.Cartesian3(
|
|
-2145613.9928089497,
|
|
5801951.317852074,
|
|
3324754.4962660405
|
|
),
|
|
orientation: {
|
|
heading: 0.11000762620081161,
|
|
pitch: -1.0488202798826602,
|
|
roll: 6.283126813396368,
|
|
},
|
|
});
|
|
viewer.scene.globe.depthTestAgainstTerrain = false;
|
|
// 创建自定义数据源
|
|
this.countryCenterDataSource = new Cesium.CustomDataSource(
|
|
"countryCenter"
|
|
);
|
|
viewer.dataSources.add(this.countryCenterDataSource);
|
|
window.countryCenterDataSource = this.countryCenterDataSource;
|
|
// 创建自定义数据源
|
|
this.poiDataDataSource = new Cesium.CustomDataSource("poiData");
|
|
viewer.dataSources.add(this.poiDataDataSource);
|
|
window.poiDataDataSource = this.poiDataDataSource;
|
|
this.initEvent(viewer)
|
|
this.dataPromise.then((result) => {
|
|
// console.log(result);
|
|
// result.forEach((res) => {
|
|
// if (res.status == "fulfilled") {
|
|
// this.mapData[res.value.name.replace(".geojson", "")] =
|
|
// res.value;
|
|
// res.value.show = false;
|
|
// viewer.dataSources.add(res.value);
|
|
// }
|
|
// });
|
|
this.drawShap();
|
|
this.drawMoneyPath(this.path1,"#8aa1c6",26);
|
|
this.drawMoneyPath(this.path2,"#8aa1c6",26);
|
|
this.addPoiData();
|
|
this.addArrowBill();
|
|
|
|
console.log(this.mapData);
|
|
});
|
|
},
|
|
addArrow(){
|
|
let height = 1100;
|
|
let lineCoords = [
|
|
[[110.643217,29.949100,height],[110.778314,29.905319,height],[110.907325,29.928493,height]],
|
|
[[111.887713,33.044323,height],[112.025051,33.046499,height],[112.146000,33.003046,height]],
|
|
[[109.341801,33.144489,height],[109.333212,33.240377,height],[109.445733,33.365104,height]],
|
|
[[115.917463,29.938314,height],[115.948938,29.817856,height],[115.867231,29.726568,height]]
|
|
];
|
|
lineCoords.forEach(lineCoord=>{
|
|
viewer.entities.add({
|
|
// name: "Blue dashed line",
|
|
polyline: {
|
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights(
|
|
lineCoord.flat(2)
|
|
),
|
|
// positions:positions,
|
|
width: 6,
|
|
material: new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString("#8aa1c6"))
|
|
// material: new Cesium.PolylineDashMaterialProperty({
|
|
// color: Cesium.Color.fromCssColorString(colorStr)
|
|
// }),
|
|
// material: new Cesium.PolylineArrowMaterialProperty(
|
|
// Cesium.Color.PURPLE
|
|
// ),
|
|
// granularity: 10,
|
|
},
|
|
});
|
|
})
|
|
|
|
},
|
|
addArrowBill(){
|
|
let height = 1100;
|
|
let arrows = [
|
|
{rotation:Math.PI/180*-90,coord:[110.790447,29.894149,height]},
|
|
{rotation:Math.PI/180*80,coord:[112.032984,33.009193,height]},
|
|
{rotation:Math.PI/180*180,coord:[109.333212,33.240377,height]},
|
|
{rotation:Math.PI/180*0,coord:[115.948938,29.817856,height]}
|
|
];
|
|
let arrowEntity = [];
|
|
arrows.forEach(item=>{
|
|
arrowEntity.push(viewer.entities.add({
|
|
position: Cesium.Cartesian3.fromDegrees(...item.coord),
|
|
billboard:{
|
|
image:"./images/arrow.png",
|
|
rotation:item.rotation,
|
|
// scaleByDistance: new Cesium.NearFarScalar(
|
|
// 0,
|
|
// 1,
|
|
// 9.0e6,
|
|
// 0.0
|
|
// ),
|
|
}
|
|
}));
|
|
})
|
|
window.arrowEntity = arrowEntity[3]
|
|
},
|
|
initEvent(viewer){
|
|
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
handler.setInputAction(function (evt) {
|
|
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
|
|
var cartesian3 = viewer.camera.pickEllipsoid(evt.position);
|
|
// let cartesian3 = viewer.scene.pickPosition(evt.position);
|
|
if (cartesian3) {
|
|
//将笛卡尔三维坐标转为地图坐标（弧度）
|
|
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3);
|
|
//将地图坐标（弧度）转为十进制的度数
|
|
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
|
|
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
|
|
var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
|
|
console.log(log_String+","+lat_String)
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
|
},
|
|
addPoiData() {
|
|
let height = 11001;
|
|
this.poiData.forEach((item) => {
|
|
this.poiDataDataSource.entities.add({
|
|
position: Cesium.Cartesian3.fromDegrees(
|
|
item.coords[0],
|
|
item.coords[1],
|
|
height
|
|
),
|
|
name: "标签",
|
|
// ellipse: {
|
|
// semiMinorAxis: new Cesium.CallbackProperty(this.changeR(item.name),false),
|
|
// semiMajorAxis: new Cesium.CallbackProperty(this.changeR(item.name),false),
|
|
// // material: new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(this.getColor,false)),
|
|
// material:Cesium.Color.BLUE.withAlpha(0.5),
|
|
// outlineColor: Cesium.Color.RED,
|
|
// // zIndex:99999,
|
|
// height:10000
|
|
// },
|
|
label: {
|
|
text: item.name,
|
|
fillColor: Cesium.Color.fromCssColorString("rgb( 0, 0, 0)"),
|
|
font: "16px 黑体 bolder",
|
|
eyeOffset: new Cesium.Cartesian3(0, 0, -300000),
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
pixelOffset: new Cesium.Cartesian2(0, -36),
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
|
showBackground:false,
|
|
style:Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
outlineColor:Cesium.Color.fromCssColorString("rgb( 0, 0, 0)"),
|
|
},
|
|
});
|
|
this.poiDataDataSource.entities.add({
|
|
position: Cesium.Cartesian3.fromDegrees(
|
|
item.coords[0],
|
|
item.coords[1]
|
|
),
|
|
label: {
|
|
text: item.centerLabel,
|
|
fillColor: Cesium.Color.fromCssColorString("rgb( 0, 0, 0)"),
|
|
font: "12px 黑体 bolder",
|
|
eyeOffset: new Cesium.Cartesian3(0, 0, -100000),
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
|
// pixelOffset: new Cesium.Cartesian2(0, -24),
|
|
},
|
|
});
|
|
if(item.name == "襄阳都市圈"){
|
|
// 动态扩展圈圈
|
|
let entity = new DynamicRange({ source: this.poiDataDataSource });
|
|
entity.dynamicRange2({
|
|
minR: item.minR,
|
|
maxR: item.maxR,
|
|
deviationR: this.stepNum,
|
|
coords: item.coords,
|
|
height: height,
|
|
});
|
|
|
|
// var ellipse = turf.ellipse(item.coords, item.radius, item.radius)
|
|
var circle = turf.circle(item.coords, item.radius, {
|
|
steps: 60,
|
|
units: "degrees",
|
|
});
|
|
console.log(circle);
|
|
|
|
let lineCoords = [];
|
|
circle.geometry.coordinates[0].forEach((coord) => {
|
|
lineCoords.push([coord[0], coord[1], 2000]);
|
|
});
|
|
const yellowLine = this.poiDataDataSource.entities.add({
|
|
name: "Blue dashed line",
|
|
polyline: {
|
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights(
|
|
lineCoords.flat()
|
|
),
|
|
width: 2.5,
|
|
material: new Cesium.PolylineDashMaterialProperty({
|
|
color: Cesium.Color.fromCssColorString("#FFFF00"),
|
|
}),
|
|
granularity: 15,
|
|
},
|
|
});
|
|
const blackLine = this.poiDataDataSource.entities.add({
|
|
name: "Blue dashed line",
|
|
polyline: {
|
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights(
|
|
lineCoords.flat()
|
|
),
|
|
width: 2,
|
|
material: new Cesium.PolylineDashMaterialProperty({
|
|
color: Cesium.Color.fromCssColorString("#424242"),
|
|
}),
|
|
granularity: 15,
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
});
|
|
},
|
|
drawMoneyPath(path,colorStr,width) {
|
|
let height = 1100;
|
|
let lineCoords = [];
|
|
|
|
this.initTimeline(path);
|
|
let positions = this.computeCirclularFlight(path);
|
|
|
|
path.forEach((coord) => {
|
|
lineCoords.push([coord[0], coord[1], height]);
|
|
});
|
|
// console.log("lineCoords", lineCoords);
|
|
window.dashedLine = viewer.entities.add({
|
|
name: "Blue dashed line",
|
|
polyline: {
|
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights(
|
|
lineCoords.flat(2)
|
|
),
|
|
// positions:positions,
|
|
width: width,
|
|
material: new Cesium.PolylineDashMaterialProperty({
|
|
color: Cesium.Color.fromCssColorString(colorStr)
|
|
}),
|
|
// material: new Cesium.PolylineArrowMaterialProperty(
|
|
// Cesium.Color.PURPLE
|
|
// ),
|
|
// granularity: 10,
|
|
},
|
|
});
|
|
// viewer.clock.shouldAnimate = true;
|
|
|
|
},
|
|
initTimeline(path){
|
|
var start = Cesium.JulianDate.fromDate(new Date("2022-10-9"));
|
|
var stop = Cesium.JulianDate.addSeconds(
|
|
start,
|
|
path.length - 1,
|
|
new Cesium.JulianDate()
|
|
);
|
|
this.start = start;
|
|
this.stop = stop;
|
|
//Make sure viewer is at the desired time.
|
|
viewer.clock.startTime = start.clone();
|
|
viewer.clock.stopTime = stop.clone();
|
|
viewer.clock.currentTime = start.clone();
|
|
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
|
|
viewer.clock.multiplier = 0.06;
|
|
//Set timeline to simulation bounds
|
|
viewer.timeline.zoomTo(start, stop);
|
|
},
|
|
computeCirclularFlight(path) {
|
|
var property = new Cesium.SampledPositionProperty();
|
|
//设置插入选项
|
|
property.setInterpolationOptions({
|
|
// interpolationDegree: 1,
|
|
// interpolationAlgorithm: Cesium.LinearApproximation,
|
|
|
|
// interpolationDegree: 5,
|
|
// interpolationAlgorithm:
|
|
// Cesium.LagrangePolynomialApproximation,
|
|
|
|
interpolationDegree: 2,
|
|
interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
|
|
});
|
|
for (var i = 0; i < path.length; i++) {
|
|
var time = Cesium.JulianDate.addSeconds(
|
|
this.start,
|
|
i,
|
|
new Cesium.JulianDate()
|
|
);
|
|
var position = Cesium.Cartesian3.fromArray(path);
|
|
property.addSample(time, position);
|
|
}
|
|
return property;
|
|
},
|
|
getColor() {
|
|
let data = this.poiData.find((item) => item.name == name);
|
|
let x = 1 - data.minR / data.maxR;
|
|
return Cesium.Color.fromCssColorString("#df4a57").withAlpha(x);
|
|
},
|
|
changeR(name) {
|
|
let data = this.poiData.find((item) => item.name == name);
|
|
data.minR = data.minR + this.stepNum; //deviationR为每次圆增加的大小
|
|
if (data.minR >= data.maxR) {
|
|
data.minR = 400;
|
|
}
|
|
return data.minR;
|
|
},
|
|
drawShap() {
|
|
let dsq = this.mapData.dsq;
|
|
let countries = this.mapData.hubei_country;
|
|
let dsq_boundary = this.mapData.dsq_boundary;
|
|
|
|
if(dsq){
|
|
dsq.features.forEach(feature=>{
|
|
let colorStr = this.colorMap[feature.properties.region];
|
|
viewUtil.addPolygonEntityByFeature(this.countryCenterDataSource,feature.geometry,colorStr?colorStr:"red")
|
|
})
|
|
}
|
|
// 绘制湖北县级行政边界和中心点
|
|
if (countries) {
|
|
let otherMap = {}; // 用于label的去重
|
|
countries.features.forEach(feature=>{
|
|
viewUtil.createOutlinePolygon(this.countryCenterDataSource,feature,"","rgb( 89, 89, 89,0.6 )",1,false);
|
|
|
|
//中心点,绘制县级行政区的点
|
|
let key = feature.properties.name;
|
|
if (!otherMap[key]) {
|
|
otherMap[key] = "has";
|
|
let coord = feature.properties.center.split(",");
|
|
this.countryCenterDataSource.entities.add({
|
|
position: Cesium.Cartesian3.fromDegrees(
|
|
coord[0],
|
|
coord[1],
|
|
10
|
|
),
|
|
point: {
|
|
color: Cesium.Color.fromCssColorString(
|
|
"rgb( 89, 89, 89,0.6 )"
|
|
),
|
|
},
|
|
label: {
|
|
text: feature.properties.name,
|
|
fillColor:
|
|
Cesium.Color.fromCssColorString("rgb( 0, 0, 0,0.6 )"),
|
|
font: "12px sans-serif",
|
|
scaleByDistance: new Cesium.NearFarScalar(
|
|
0,
|
|
1,
|
|
9.0e6,
|
|
0.0
|
|
),
|
|
eyeOffset: new Cesium.Cartesian3(0, 0, -100000),
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
pixelOffset: new Cesium.Cartesian2(0, -6),
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
},
|
|
});
|
|
}
|
|
})
|
|
}
|
|
if(dsq){
|
|
dsq.features.forEach(feature=>{
|
|
viewUtil.createOutlinePolygon(this.countryCenterDataSource,feature,"","rgb( 255, 255, 255 )",5,false)
|
|
})
|
|
}
|
|
},
|
|
getData() {
|
|
let dataPromiseArr = [];
|
|
for (let key in this.dataUrlMap) {
|
|
dataPromiseArr.push(fetch(this.dataUrlMap[key]).then(res=>res.json()).then(result=>{
|
|
this.mapData[key] = result;
|
|
}))
|
|
|
|
// dataPromiseArr.push(
|
|
// Cesium.GeoJsonDataSource.load(this.dataUrlMap[key])
|
|
// );
|
|
}
|
|
this.dataPromise = Promise.allSettled(dataPromiseArr);
|
|
},
|
|
},
|
|
created() {
|
|
this.getData();
|
|
},
|
|
mounted() {
|
|
this.initViewer();
|
|
},
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|