448 lines
20 KiB
HTML
448 lines
20 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/polylineTrailLinkMaterialProperty.js"></script>
|
||
<script src="./js/PolylineTrailMaterial.js"></script>
|
||
<script src="./js/utils/WallDiffuseMaterialProperty.js"></script>
|
||
|
||
<script src="./data/hubei/hanjiang_up.js"></script>
|
||
<script src="./data/hubei/hanjiang_mid.js"></script>
|
||
<script src="./data/hubei/hanjiang_down.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 {cesiumToken,geoserverConfig} from "./js/mapConfig.js"
|
||
Cesium.Ion.defaultAccessToken = cesiumToken;
|
||
new Vue({
|
||
el: "#app",
|
||
data: {
|
||
shanxiFeatures:[],
|
||
hubeiFeatures:[],
|
||
pois: [
|
||
{
|
||
id: "shangyou",
|
||
name: "上游段",
|
||
type: "point",
|
||
icon: "row.png",
|
||
abstract:
|
||
"上游段:汉江上游全场956千米，集水面积95220平方千米，敢流呈东西走向，穿行于秦岭、大巴山之间，沿途峡谷盆地交替，河床多为卵石、砾石与基岩组成，河道比降大。",
|
||
lon: 108.742874,
|
||
lat: 32.648087,
|
||
},
|
||
{
|
||
id: "zhongyou",
|
||
name: "中游段",
|
||
type: "point",
|
||
icon: "row.png",
|
||
abstract:
|
||
"中游段:汉江自丹江口至碾盘山江段，全长223千米，区间集水面积45120平方千米，河道流经丘陵及开阔的河谷盆地，平均比降0.19‰，河床宽浅，水流散乱，有大小江心洲20余个，属游荡型河道。汉江接纳南河和唐白河后，水量、沙量大增，河床时冲时淤，并受两岸山势节点控制，宽窄不一，低水河槽宽约300－400米，洪水期达2－3千米，最宽可达5－6千米。",
|
||
lon: 112.1797,
|
||
lat: 31.9756,
|
||
},
|
||
{
|
||
id: "xiayou",
|
||
name: "下游段",
|
||
type: "point",
|
||
icon: "row.png",
|
||
abstract:
|
||
"下游段:碾盘山以下，汉江进入下游冲积平原，河段全长398千米，区间集水面积18660平方千米，河段平均比降约0.09‰，水流变缓，弯曲系数1.81，属平原蜿蜒性河道。河床多为沙质，两岸筑有堤防紧束。在潜江泽口龙头拐，有汉江分流－东荆河，汛期可分泄汉江部分洪水，最大过水能力为5600立方米/秒，干流自新城以下，河曲发育，素有“曲莫如汉”的说法，而且两岸堤距和河床断面，呈现上宽下窄的特点，所以河床安全泄量，愈近河口愈小，如遇洪水，宜泄不畅，极易溃口成灾。",
|
||
lon: 113.116358,
|
||
lat: 30.493197,
|
||
},
|
||
// {
|
||
// id: "shanxi",
|
||
// name: "陕西省段",
|
||
// type: "point",
|
||
// icon: "row.png",
|
||
// abstract:
|
||
// "陕西省境内的汉江为汉江上游段，因此山地河流发育，支流众多，长度在50千米以上的河流有68条，在100千米以上的有18条。水系分布为不对称树枝状，北岸支流比南岸多而长，河网密度也比南岸大，北岸为1.69千米/平方千米，南岸只有1.52千米/平方千米。",
|
||
// lon: 108.841,
|
||
// lat: 32.581,
|
||
// },
|
||
// {
|
||
// id: "hubei",
|
||
// name: "湖北省段",
|
||
// type: "point",
|
||
// icon: "row.png",
|
||
// abstract:
|
||
// "在湖北省境内，汉江干流经白河县后，自郧西县进入湖北。丹江口以下，干流折向东南，沿途经襄阳市、宜城市、钟祥市、天门市、潜江市、仙桃市、汉川市等县市，最后由武汉市汉口龙王庙汇入长江。干流丹江口以上为上游，河谷狭窄，长约925千米；丹江口至钟祥为中游，河谷较宽，沙滩多，长约270千米；钟祥至汉口为下游，长约382千米，流经江汉平原，两岸筑有堤防，河道蜿蜒曲折逐步缩小，泄洪能力愈下愈小。",
|
||
// lon: 112.196,
|
||
// lat: 31.991,
|
||
// },
|
||
{
|
||
id: "longwangmiao",
|
||
name: "龙王庙",
|
||
type: "point",
|
||
icon: "row2.png",
|
||
abstract:
|
||
"龙王庙:汉江上游全场956千米，集水面积95220平方千米，敢流呈东西走向，穿行于秦岭、大巴山之间，沿途峡谷盆地交替，河床多为卵石、砾石与基岩组成，河道比降大。汉江上游全场956千米，集水面积95220平方千米，敢流呈东西走向，穿行于秦岭、大巴山之间，沿途峡谷盆地交替，河床多为卵石、砾石与基岩组成，河道比降大。",
|
||
lon: 114.285869,
|
||
lat: 30.569577,
|
||
},
|
||
{
|
||
id: "bozhongshan",
|
||
name: "嶓冢山",
|
||
type: "point",
|
||
icon: "row2.png",
|
||
abstract:
|
||
"嶓冢山:汉江上游全场956千米，集水面积95220平方千米，敢流呈东西走向，穿行于秦岭、大巴山之间，沿途峡谷盆地交替，河床多为卵石、砾石与基岩组成，河道比降大。",
|
||
lon: 106.24576,
|
||
lat: 33.07099,
|
||
},
|
||
],
|
||
},
|
||
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,
|
||
});
|
||
window.viewer = viewer;
|
||
this.viewer = viewer;
|
||
var imageryLayers = viewer.scene.imageryLayers;
|
||
//清除影像图层集合中的图层
|
||
imageryLayers.removeAll();
|
||
// 添加 Mapbox tile provider
|
||
const mapboxAccess =
|
||
"pk.eyJ1IjoicWl1c2hpamllIiwiYSI6ImNsMDNvdDRybDEyc2YzZG9kbWZoY2FuOW0ifQ.4FH-BUupi46Z0zQ-CEm_Ig";
|
||
|
||
var customMapboxIamgery = new Cesium.MapboxStyleImageryProvider({
|
||
// url: "https://api.mapbox.com/styles/v1",
|
||
username: "qiushijie",
|
||
styleId: "clboooor3000714mi15y9j6ba",
|
||
accessToken: mapboxAccess,
|
||
scaleFactor: true,
|
||
});
|
||
imageryLayers.addImageryProvider(customMapboxIamgery);
|
||
|
||
// 调整整体的亮度
|
||
var collection = viewer.scene.postProcessStages;
|
||
var silhouette = collection.add(
|
||
Cesium.PostProcessStageLibrary.createBrightnessStage()
|
||
);
|
||
silhouette.enabled = true;
|
||
silhouette.uniforms.brightness = 0.7;
|
||
|
||
// 将三维球定位到汉江
|
||
viewer.camera.flyTo({
|
||
destination: new Cesium.Cartesian3(
|
||
-2145613.9928089497,
|
||
5801951.317852074,
|
||
3324754.4962660405
|
||
),
|
||
orientation: {
|
||
heading: 0.11000762620081161,
|
||
pitch: -1.0488202798826602 ,
|
||
roll: 6.283126813396368,
|
||
},
|
||
});
|
||
|
||
// 创建自定义数据源，存放动态墙体的Entity
|
||
this.dwSource = new Cesium.CustomDataSource("dynamicWalll");
|
||
this.viewer.dataSources.add(this.dwSource);
|
||
// 创建自定义数据源，存放poi实体
|
||
this.poiSource = new Cesium.CustomDataSource("poiSource");
|
||
this.viewer.dataSources.add(this.poiSource);
|
||
|
||
// 创建primitive集合，存储水系图元对象
|
||
this.riverPrimitives = this.viewer.scene.primitives.add(
|
||
new Cesium.PrimitiveCollection()
|
||
);
|
||
|
||
//
|
||
this.addPoiLayer(this.pois);
|
||
this.addHanRiver();
|
||
this.addDynamicLine(hanjiang_up);
|
||
this.addDynamicLine(hanjiang_mid);
|
||
this.addDynamicLine(hanjiang_down);
|
||
this.addHanjiangWall();
|
||
this.initEvent(viewer);
|
||
},
|
||
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)
|
||
},
|
||
addHanjiangWall() {
|
||
const url = "./data/hubei/hanjiang.geojson";
|
||
fetch(url)
|
||
.then((res) => res.json())
|
||
.then((result) => {
|
||
result.features.forEach((feature) => {
|
||
this.addWallByFeature(feature)
|
||
});
|
||
});
|
||
},
|
||
addWallByFeature(feature,minimumHeight,maximumHeight){
|
||
let coords = feature.geometry.coordinates[0][0];
|
||
minimumHeight = minimumHeight?Number(minimumHeight):100,
|
||
maximumHeight = maximumHeight?Number(maximumHeight):5000
|
||
this.dwSource.entities.add({
|
||
name: "发光动态墙体",
|
||
wall: {
|
||
positions: Cesium.Cartesian3.fromDegreesArray(coords.flat(2)),
|
||
material: new Cesium.WallDiffuseMaterialProperty({
|
||
color: Cesium.Color.fromBytes(255, 255, 0).withAlpha(0.7),
|
||
duration: 3000,
|
||
}),
|
||
minimumHeights: Array(coords.length).fill(minimumHeight),
|
||
maximumHeights: Array(coords.length).fill(maximumHeight),
|
||
outline: false,
|
||
},
|
||
});
|
||
},
|
||
addDynamicLine(coords){
|
||
// var orangeOutlined = new Cesium.Entity({
|
||
// name: "指定两点的高度，使实体悬浮于椭球表面",
|
||
// polyline: {
|
||
// positions: Cesium.Cartesian3.fromDegreesArray([
|
||
// 108.870317,29.909681,
|
||
// 110.050511,29.912557,
|
||
// 110.071016,32.370220,
|
||
// ]),
|
||
// width: 5,
|
||
// material: new Cesium.PolylineTrailLinkMaterialProperty({
|
||
// color: Cesium.Color.ORANGE,
|
||
// duration:5000
|
||
// }),
|
||
// },
|
||
// });
|
||
// viewer.entities.add(orangeOutlined);
|
||
|
||
const glowingLine = viewer.entities.add({
|
||
name: "Glowing blue line on the surface",
|
||
polyline: {
|
||
positions: Cesium.Cartesian3.fromDegreesArray(coords.flat(2)),
|
||
width: 2,
|
||
// material: new Cesium.PolylineGlowMaterialProperty({
|
||
// glowPower: 0.2,
|
||
// taperPower: 0.5,
|
||
// color: Cesium.Color.CORNFLOWERBLUE,
|
||
// }),
|
||
material: new PolylineTrailMaterial({
|
||
color: Cesium.Color.WHITE,
|
||
duration:2000
|
||
})
|
||
},
|
||
});
|
||
},
|
||
async addHanJiang(){
|
||
const data = await this.getHanShuiData();
|
||
console.log(data)
|
||
},
|
||
addPoiLayer(data) {
|
||
data.forEach((item) => {
|
||
this.poiSource.entities.add(this.addPoiBill(item));
|
||
});
|
||
},
|
||
addPoiBill(data) {
|
||
let image = this.createPoiLabel(data.name, data.icon);
|
||
return {
|
||
id: JSON.stringify({ ...data, layer: "poi" }),
|
||
position: Cesium.Cartesian3.fromDegrees(data.lon, data.lat, 0),
|
||
billboard: {
|
||
eyeOffset: new Cesium.Cartesian3(0.0, 1.0, 0.0),
|
||
image: image, // default: undefined
|
||
show: true, // default
|
||
// pixelOffset:new Cesium.Cartesian2(-60, 0),
|
||
width: 120, // default: undefined
|
||
height: 80, // default: undefined
|
||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
||
// 10.0,
|
||
// 30000.0
|
||
// ), //根据到相机的距离确定可见性。
|
||
scaleByDistance: new Cesium.NearFarScalar(10, 1.5, 60000000, 0.0),
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
},
|
||
};
|
||
},
|
||
async createPoiLabel(label, icon) {
|
||
// 创建画布对象
|
||
let canvas = document.createElement("canvas");
|
||
let len = label.split("").length,
|
||
width = 120,
|
||
height = 80;
|
||
canvas.width = 17 * len > width ? 17 * len : width;
|
||
canvas.height = height;
|
||
let ctx = canvas.getContext("2d");
|
||
|
||
const url1 = "/images/hanjiang/g1.png";
|
||
const url2 = "/images/hanjiang/" + icon;
|
||
let image1 = await new Cesium.Resource.fetchImage(url1);
|
||
ctx.drawImage(image1, 0, 0, canvas.width, 32); //改变图片大小到120*32
|
||
|
||
ctx.fillStyle = "#CFF8FF";
|
||
ctx.lineHeight = 17;
|
||
ctx.font = '700 17px "fangsong"';
|
||
ctx.textBaseline = "middle";
|
||
ctx.fillText(label, 30, 15);
|
||
|
||
let image2 = await new Cesium.Resource.fetchImage(url2);
|
||
let x = canvas.width / 2 - 16;
|
||
ctx.drawImage(image2, x, 37, 32, 42);
|
||
return canvas;
|
||
},
|
||
async getHanData() {
|
||
const filter = geoserverConfig.getFilter([
|
||
{ field: "layer", value: ["湖北省", "陕西省"] },
|
||
]);
|
||
const url =
|
||
"http://121.33.231.74:5097/geoserver/iot/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=iot%3Ahanjiang&maxFeatures=999&outputFormat=application%2Fjson&FILTER=" +
|
||
filter
|
||
.replaceAll("\n", "")
|
||
.replaceAll(" ", "")
|
||
.replaceAll(" ", "%20");
|
||
return await fetch(url).then((res) => res.json());
|
||
},
|
||
async getHanShuiData() {
|
||
const filter = geoserverConfig.getFilter([
|
||
{ field: "name", value: "汉江(汉水)" },
|
||
]);
|
||
const url =
|
||
"http://121.33.231.74:5097/geoserver/iot/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=iot:hubei_hyd1_4p&maxFeatures=999&outputFormat=application%2Fjson&FILTER=" +
|
||
filter
|
||
.replaceAll("\n", "")
|
||
.replaceAll(" ", "")
|
||
.replaceAll(" ", "%20");
|
||
return await fetch(url).then((res) => res.json());
|
||
},
|
||
async addHanRiver() {
|
||
const result = await this.getHanData();
|
||
result.features.forEach((feature) => {
|
||
this.addWaterFeature(this.riverPrimitives, feature);
|
||
if (feature.properties.layer == "陕西省") {
|
||
this.shanxiFeatures.push(feature);
|
||
} else if (feature.properties.layer == "湖北省" ) {
|
||
this.hubeiFeatures.push(feature);
|
||
}
|
||
});
|
||
},
|
||
addWaterFeature(primitives, feature, riverHeight = 0) {
|
||
let geometryType = feature.geometry.type;
|
||
let coord = feature.geometry.coordinates;
|
||
if (geometryType == "MultiPolygon") {
|
||
coord.forEach((polygon) => {
|
||
let outBoundary = null;
|
||
// if(polygon.length==1){
|
||
outBoundary = new Cesium.PolygonHierarchy(
|
||
Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2))
|
||
);
|
||
// }
|
||
primitives.add(
|
||
new Cesium.Primitive({
|
||
releaseGeometryInstances: false, //由于Cesium使用primitive加载数据性能考虑，会自动清空原来的geometryInstances
|
||
geometryInstances: new Cesium.GeometryInstance({
|
||
id: feature.properties,
|
||
geometry: new Cesium.PolygonGeometry({
|
||
polygonHierarchy: outBoundary,
|
||
extrudedHeight: riverHeight,
|
||
}),
|
||
attributes: {
|
||
// 通过attributes属性统一指定线段颜色
|
||
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
||
new Cesium.Color(1.0, 0, 0, 1.0)
|
||
),
|
||
},
|
||
}),
|
||
asynchronous: false,
|
||
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
||
material: new Cesium.Material({
|
||
fabric: {
|
||
type: "Water",
|
||
uniforms: {
|
||
// 水的基本颜色
|
||
baseWaterColor: new Cesium.Color(
|
||
64 / 255.0,
|
||
157 / 255.0,
|
||
253 / 255.0,
|
||
0.5
|
||
),
|
||
// 水法向摄动的法线图
|
||
normalMap:
|
||
"./Build/Cesium/Assets/Textures/waterNormals.jpg",
|
||
// 波纹数量
|
||
frequency: 1000.0,
|
||
// 动画速度
|
||
animationSpeed: 0.02,
|
||
// 振动的幅度
|
||
amplitude: 150,
|
||
// 镜面反射的强度
|
||
specularIntensity: 10,
|
||
},
|
||
},
|
||
}),
|
||
faceForward: true,
|
||
}),
|
||
})
|
||
);
|
||
});
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
this.initViewer();
|
||
},
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|