235 lines
8.9 KiB
HTML
235 lines
8.9 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>poiIconLabel</title>
|
|||
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|||
|
|
<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: false, //视角选择器
|
|||
|
|
baseLayerPicker: false, //底图选择器
|
|||
|
|
navigationHelpButton: false, //导航帮助按钮
|
|||
|
|
animation: false, //动画控制器
|
|||
|
|
// creditContainer:"credit",//版权显示
|
|||
|
|
timeline: false, //时间线
|
|||
|
|
fullscreenButton: false, //全屏控件
|
|||
|
|
vrButton: false,
|
|||
|
|
terrainProvider: Cesium.createWorldTerrain({
|
|||
|
|
requestVertexNormal: true, //添加地形光照
|
|||
|
|
requestWaterMask: true, //添加水面波浪效果
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//========================================================================================
|
|||
|
|
// viewer.imageryLayers.removeAll();
|
|||
|
|
// 添加 Mapbox tile provider
|
|||
|
|
// const mapboxAccess =
|
|||
|
|
// "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
|
|||
|
|
// 样式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: "streets-v10",
|
|||
|
|
// accessToken: mapboxAccess,
|
|||
|
|
// // proxy: new Cesium.DefaultProxy("http://127.0.0.1:8080/proxy/"),
|
|||
|
|
// });
|
|||
|
|
// viewer.imageryLayers.addImageryProvider(mapboxStyleImagery);
|
|||
|
|
|
|||
|
|
// var imageryLayers = viewer.scene.imageryLayers;
|
|||
|
|
//后添加的图层在顶部,addImageryProvider 方法
|
|||
|
|
// var blackMarble = imageryLayers.addImageryProvider(
|
|||
|
|
// new Cesium.IonImageryProvider({ assetId: 3812 })
|
|||
|
|
// );
|
|||
|
|
|
|||
|
|
//========================================================================================
|
|||
|
|
//添加OSM的建筑
|
|||
|
|
const tileset = viewer.scene.primitives.add(
|
|||
|
|
new Cesium.Cesium3DTileset({
|
|||
|
|
url: Cesium.IonResource.fromAssetId(96188),
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
// Add OSM Building tileset
|
|||
|
|
let osmBuildingsTileset = Cesium.createOsmBuildings();
|
|||
|
|
|
|||
|
|
//设置条件渲染
|
|||
|
|
osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
|
|||
|
|
defines: {
|
|||
|
|
mh: "${feature['cesium#estimatedHeight']}",
|
|||
|
|
},
|
|||
|
|
color: {
|
|||
|
|
conditions: [
|
|||
|
|
// ["(${mh} >= 100.0)", "color('blue')"],
|
|||
|
|
// ["(${mh} >= 1.0)", "color('red')"],
|
|||
|
|
["${mh} >= 300", "rgba(45, 0, 75, 0.5)"],
|
|||
|
|
["${mh} >= 200", "rgb(102, 71, 151)"],
|
|||
|
|
["${mh} >= 100", "rgb(170, 162, 204)"],
|
|||
|
|
["${mh} >= 50", "rgb(224, 226, 238)"],
|
|||
|
|
["${mh} >= 25", "rgb(252, 230, 200)"],
|
|||
|
|
["${mh} >= 10", "rgb(248, 176, 87)"],
|
|||
|
|
["${mh} >= 5", "rgb(198, 106, 11)"],
|
|||
|
|
["true", "rgb(127, 59, 8)"],
|
|||
|
|
// ["${name} === '周大福金融中心（广州东塔）'","color('red')"],
|
|||
|
|
// ["${name} === '周大福金融中心（广州东塔）'", "color('red')"],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
// "show" : "${Height} > 50.0"
|
|||
|
|
});
|
|||
|
|
viewer.scene.primitives.add(osmBuildingsTileset);
|
|||
|
|
// osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
|
|||
|
|
// defines: {
|
|||
|
|
// material: "${feature['building:material']}",
|
|||
|
|
// },
|
|||
|
|
// color: {
|
|||
|
|
// conditions: [
|
|||
|
|
// ["${material} === null", "color('white')"],
|
|||
|
|
// ["${material} === 'glass'", "color('skyblue', 0.5)"],
|
|||
|
|
// ["${material} === 'concrete'", "color('grey')"],
|
|||
|
|
// ["${material} === 'brick'", "color('indianred')"],
|
|||
|
|
// ["${material} === 'stone'", "color('lightslategrey')"],
|
|||
|
|
// ["${material} === 'metal'", "color('lightgrey')"],
|
|||
|
|
// ["${material} === 'steel'", "color('lightsteelblue')"],
|
|||
|
|
// ["true", "color('white')"], // This is the else case
|
|||
|
|
// ],
|
|||
|
|
// },
|
|||
|
|
// });
|
|||
|
|
// const gzTile = "http://localhost:9000/model/985e07c0af2611ecb9f6593f47f8b446/tileset.json";
|
|||
|
|
// const gzTileset = viewer.scene.primitives.add(
|
|||
|
|
// new Cesium.Cesium3DTileset({
|
|||
|
|
// url: gzTile,
|
|||
|
|
// })
|
|||
|
|
// );
|
|||
|
|
// gzTileset.style = new Cesium.Cesium3DTileStyle({
|
|||
|
|
// color:{
|
|||
|
|
// conditions:[
|
|||
|
|
// ["${floor} === '4'","color(red)"]
|
|||
|
|
// ]
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
|
|||
|
|
// 创建一个用于存储标注的数据源
|
|||
|
|
const dataSource = new Cesium.CustomDataSource("poiIconLabel");
|
|||
|
|
viewer.dataSources.add(dataSource);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 用于添加poi的icon和label的函数
|
|||
|
|
* @param {*} lon ：经度
|
|||
|
|
* @param {*} lat ：纬度
|
|||
|
|
* @param {*} name ：标签内容
|
|||
|
|
* @param {*} color ：底部圆和横线的颜色
|
|||
|
|
* @param {*} url ：icon地址
|
|||
|
|
*/
|
|||
|
|
function poiIconLabelAdd(lon, lat, height, name, color, url) {
|
|||
|
|
// 获取标注数据源
|
|||
|
|
const labelDataSource = viewer.dataSources.getByName("poiIconLabel")[0];
|
|||
|
|
labelDataSource.entities.removeAll();
|
|||
|
|
|
|||
|
|
//添加图标和标注
|
|||
|
|
labelDataSource.entities.add({
|
|||
|
|
name: name,
|
|||
|
|
position: Cesium.Cartesian3.fromDegrees(lon, lat, height + 300),
|
|||
|
|
// 图标
|
|||
|
|
billboard: {
|
|||
|
|
image: url,
|
|||
|
|
width: 50,
|
|||
|
|
height: 50,
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
//文字标签
|
|||
|
|
text: name,
|
|||
|
|
font: "20px sans-serif",
|
|||
|
|
style: Cesium.LabelStyle.FILL,
|
|||
|
|
// 对齐方式(水平和竖直)
|
|||
|
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
|||
|
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
|||
|
|
pixelOffset: new Cesium.Cartesian2(20, -2),
|
|||
|
|
showBackground: true,
|
|||
|
|
backgroundColor: new Cesium.Color.fromBytes(0, 70, 24),
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 先画线后画点，防止线压盖点
|
|||
|
|
let linePositions = [];
|
|||
|
|
linePositions.push(new Cesium.Cartesian3.fromDegrees(lon, lat, height));
|
|||
|
|
linePositions.push(
|
|||
|
|
new Cesium.Cartesian3.fromDegrees(lon, lat, height + 300)
|
|||
|
|
);
|
|||
|
|
labelDataSource.entities.add({
|
|||
|
|
polyline: {
|
|||
|
|
positions: linePositions,
|
|||
|
|
width: 1.5,
|
|||
|
|
material: color,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 画点
|
|||
|
|
labelDataSource.entities.add({
|
|||
|
|
// 给初始点位设置一定的离地高度，否者会被压盖
|
|||
|
|
position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
|
|||
|
|
point: {
|
|||
|
|
color: color,
|
|||
|
|
pixelSize: 15,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//添加点击事件
|
|||
|
|
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|||
|
|
handler.setInputAction(function (movement) {
|
|||
|
|
viewer.selectedEntity = undefined;
|
|||
|
|
const pickedBuilding = viewer.scene.pick(movement.position);
|
|||
|
|
if (pickedBuilding) {
|
|||
|
|
const lat = pickedBuilding.getProperty("cesium#latitude");
|
|||
|
|
const lon = pickedBuilding.getProperty("cesium#longitude");
|
|||
|
|
const height = pickedBuilding.getProperty("cesium#estimatedHeight");
|
|||
|
|
const name = pickedBuilding.getProperty("name");
|
|||
|
|
const color = Cesium.Color.SNOW;
|
|||
|
|
const url = "./data/local.png";
|
|||
|
|
poiIconLabelAdd(lon, lat, height, name, color, url);
|
|||
|
|
}
|
|||
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|||
|
|
|
|||
|
|
viewer.camera.flyTo({
|
|||
|
|
destination: new Cesium.Cartesian3(
|
|||
|
|
-2325771.0288233184,
|
|||
|
|
5392181.511762224,
|
|||
|
|
2484480.395134067
|
|||
|
|
),
|
|||
|
|
orientation: {
|
|||
|
|
heading: 6.0399326,
|
|||
|
|
pitch: -0.30503,
|
|||
|
|
roll: 6.2825747,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|