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>
|