334 lines
14 KiB
HTML
334 lines
14 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/CesiumPopup/CesiumPopup.js"></script>
|
||
<link href="./js/CesiumPopup/custompopup.css" rel="stylesheet" />
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html,
|
||
body,
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="cesiumContainer"></div>
|
||
<script>
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
||
|
||
var viewer = new Cesium.Viewer("cesiumContainer", {
|
||
geocoder: false, //位置查找
|
||
homeButton: false, //视图返回初始位置
|
||
sceneModePicker: true, //视角选择器
|
||
// baseLayerPicker:false,//底图选择器
|
||
navigationHelpButton: false, //导航帮助按钮
|
||
animation: false, //动画控制器
|
||
// creditContainer:"credit",//版权显示
|
||
timeline: false, //时间线
|
||
fullscreenButton: false, //全屏控件
|
||
vrButton: false,
|
||
infoBox:false,
|
||
selectionIndicator:false
|
||
});
|
||
|
||
var imageryLayers = viewer.scene.imageryLayers;
|
||
//清除影像图层集合中的图层
|
||
imageryLayers.removeAll();
|
||
// 添加 Mapbox tile provider
|
||
const mapboxAccess = "pk.eyJ1IjoicWl1c2hpamllIiwiYSI6ImNsMDNvdDRybDEyc2YzZG9kbWZoY2FuOW0ifQ.4FH-BUupi46Z0zQ-CEm_Ig";
|
||
|
||
// 样式id查看：https://docs.mapbox.com/api/maps/styles/
|
||
// URL格式的 mapbox://styles/:owner/:style， 其中 :owner 是您的 Mapbox 账户名 :style 是样式 ID 。
|
||
// 可选值：streets-v10、outdoors-v10 、light-v9、dark-v9、satellite-v9、satellite-streets-v10
|
||
// const mapboxStyleImagery = new Cesium.MapboxStyleImageryProvider({
|
||
// styleId: "satellite-streets-v10",
|
||
// accessToken: mapboxAccess,
|
||
// });
|
||
// imageryLayers.addImageryProvider(mapboxStyleImagery);
|
||
|
||
// 加载mapbox中自定义的服务
|
||
// https://studio.mapbox.com/tilesets/mapbox.satellite
|
||
// mapbox://styles/qiushijie/ckayrgiu2160x1iooym5xshpb，mapbox://styles/qiushijie/clboooor3000714mi15y9j6ba
|
||
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: Cesium.Cartesian3.fromDegrees(
|
||
110.302,
|
||
29.98,
|
||
1785000
|
||
),
|
||
orientation: {
|
||
heading: Cesium.Math.toRadians(0),
|
||
pitch: Cesium.Math.toRadians(-60.74026687972041),
|
||
roll: Cesium.Math.toRadians(0),
|
||
},
|
||
complete: function callback() {
|
||
// 定位完成之后的回调函数
|
||
},
|
||
});
|
||
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)
|
||
}
|
||
|
||
// 获取该位置的所有primitive集合
|
||
let picks = viewer.scene.drillPick(evt.position);
|
||
let bills = picks.filter(item=>item.primitive instanceof Cesium.Billboard);
|
||
if(cartesian3&&bills.length){
|
||
let item = JSON.parse(bills[0].id.id);
|
||
if(!item.layer||item.layer!="poi") return;
|
||
let position = new Cesium.Cartesian3.fromDegrees(item.lng, item.lat,100);
|
||
var html = "<div>" +(item.abstract)+"</div>";
|
||
// for(let key in fields){
|
||
// html += "<div>" + key + " :"+ fields[key] + "</div>"
|
||
// }
|
||
var a = new CesiumPopup({
|
||
title: "龙王庙<span class='location'>定位<i></i></span>",
|
||
})
|
||
.setPosition(position)
|
||
.setHTML(html)
|
||
.addTo(viewer)
|
||
|
||
a.on("close", function () {
|
||
console.log("close");
|
||
});
|
||
|
||
a.on("open", function () {
|
||
console.log("open");
|
||
});
|
||
a.removeClass("cesium-popup-panel").addClassName("cesium-popup-hanjiang")
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
addHanRiver();
|
||
// createPoiLabel("龙王庙")
|
||
const pois=[
|
||
{name:"龙王庙",abstract:"汉江上游全场956千米，集水面积95220平方千米，敢流呈东西走向，穿行于秦岭、大巴山之间，沿途峡谷盆地交替，河床多为卵石、砾石与基岩组成，河道比降大。",lng:114.285869 ,lat: 30.569577,icon:""},
|
||
{name:"嶓冢山",abstract:"汉江上游全场956千米，集水面积95220平方千米，敢流呈东西走向，穿行于秦岭、大巴山之间，沿途峡谷盆地交替，河床多为卵石、砾石与基岩组成，河道比降大。",lng:106.24576 ,lat:33.07099,icon:""},
|
||
{name:"上游段",abstract:"汉江上游全场956千米，集水面积95220平方千米，敢流呈东西走向，穿行于秦岭、大巴山之间，沿途峡谷盆地交替，河床多为卵石、砾石与基岩组成，河道比降大。",lng:1,lat:1,}
|
||
]
|
||
addPoiBill(pois[0])
|
||
function addPoiBill(data){
|
||
let image = createPoiLabel(data.name)
|
||
let entity = viewer.entities.add({
|
||
id:JSON.stringify({...data,layer:"poi"}),
|
||
position: Cesium.Cartesian3.fromDegrees(data.lng, 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, 3000000, 0.0),
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
heightReference :Cesium.HeightReference.CLAMP_TO_GROUND
|
||
},
|
||
});
|
||
viewer.flyTo(entity)
|
||
}
|
||
async function createPoiLabel(label){
|
||
// 创建画布对象
|
||
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");
|
||
// ctx.fillStyle = '#000';
|
||
// ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
const url1 = 'http://127.0.0.1:5502/images/hanjiang/poi_label.png';
|
||
const url2 = 'http://127.0.0.1:5502/images/hanjiang/poi_location.png'
|
||
let image1 = await new Cesium.Resource.fetchImage(url1);
|
||
ctx.drawImage(image1, 0, 0, 120, 32)//改变图片大小到1080*980
|
||
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);
|
||
ctx.drawImage(image2, 44, 37, 32, 42)
|
||
return canvas;
|
||
}
|
||
function example(){
|
||
const canvas = document.getElementById('canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
const name = "龙王庙"
|
||
canvas.width = 120;
|
||
canvas.height = 80;
|
||
|
||
var img = new Image()
|
||
img.src = 'http://127.0.0.1:5502/images/hanjiang/poi_label.png'
|
||
//图片加载完后，将其显示在canvas中
|
||
img.onload = function(){
|
||
//context.drawImage(this, 0, 24)
|
||
ctx.drawImage(this, 0, 0, 120, 32)//改变图片大小到1080*980
|
||
ctx.fillStyle = "#CFF8FF";
|
||
ctx.lineHeight = 17;
|
||
ctx.font = '700 17px "fangsong"';
|
||
|
||
ctx.textBaseline = "middle";
|
||
ctx.fillText(name, 30, 15);
|
||
|
||
var img2 = new Image()
|
||
img2.src = 'http://127.0.0.1:5502/images/hanjiang/poi_location.png';
|
||
img2.onload = function(){
|
||
ctx.drawImage(this, 44, 37, 32, 42)//改变图片大小到1080*980
|
||
}
|
||
}
|
||
}
|
||
function combineIconAndLabel(url, label,width,height) {
|
||
// 创建画布对象
|
||
let canvas = document.createElement('canvas');
|
||
let len = label.split("").length;
|
||
canvas.width = 16*len>width?16*len:width;
|
||
canvas.height = height + 22;
|
||
let ctx = canvas.getContext("2d");
|
||
|
||
let promise = new Cesium.Resource.fetchImage(url).then(image => {
|
||
// 异常判断
|
||
try {
|
||
ctx.drawImage(image, (canvas.width/2)-width/2, 20);
|
||
} catch (e) {
|
||
console.log(e);
|
||
}
|
||
|
||
// 渲染字体
|
||
// font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
|
||
ctx.fillStyle = Cesium.Color.WHITE.toCssColorString();
|
||
ctx.font="16px FANGSONG"
|
||
ctx.fillText(label, 0, 15);
|
||
|
||
return canvas;
|
||
});
|
||
return promise;
|
||
}
|
||
|
||
async function getHanData(){
|
||
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";
|
||
return await fetch(url).then(res=>res.json())
|
||
}
|
||
async function addHanRiver(){
|
||
const result = await getHanData();
|
||
console.log(result)
|
||
let primitives = viewer.scene.primitives.add(
|
||
new Cesium.PrimitiveCollection()
|
||
);
|
||
// primitives.show = false;
|
||
window.primitives = primitives;
|
||
result.features.forEach((feature) => {
|
||
addWaterFeature(primitives,feature);
|
||
});
|
||
}
|
||
function addWaterFeature(primitives,feature) {
|
||
let geometryType = feature.geometry.type;
|
||
let coord = feature.geometry.coordinates;
|
||
let geometryName = feature.geometry_name;
|
||
|
||
if (geometryType == "MultiPolygon") {
|
||
coord.forEach((polygon) => {
|
||
let outBoundary = null;
|
||
let holes = null;
|
||
// if(polygon.length==1){
|
||
outBoundary = new Cesium.PolygonHierarchy(
|
||
Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2))
|
||
);
|
||
// }
|
||
primitives.add(
|
||
new Cesium.Primitive({
|
||
geometryInstances: new Cesium.GeometryInstance({
|
||
geometry: new Cesium.PolygonGeometry({
|
||
polygonHierarchy: outBoundary,
|
||
}),
|
||
attributes: {
|
||
// 通过attributes属性统一指定线段颜色
|
||
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
||
new Cesium.Color(1.0, 0, 0, 1.0)
|
||
),
|
||
},
|
||
id: "面要素",
|
||
}),
|
||
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.002,
|
||
// 振动的幅度
|
||
amplitude: 150,
|
||
// 镜面反射的强度
|
||
specularIntensity: 1,
|
||
},
|
||
},
|
||
}),
|
||
faceForward: true,
|
||
}),
|
||
})
|
||
);
|
||
});
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|