learning_cesium/图层标注.html

125 lines
4.1 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>
<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
});
// var viewer = new Cesium.Viewer('cesiumContainer', {
// terrainProvider: Cesium.createWorldTerrain()
// });
// var tileset = viewer.scene.primitives.add(
// new Cesium.Cesium3DTileset({
// url: Cesium.IonResource.fromAssetId(115448),
// })
// );
// viewer.zoomTo(tileset)
addSNCPolygonlayer();
function addSNCPolygonlayer() {
var sncPolygon = Cesium.GeoJsonDataSource.load(
"./SampleData/china.json"
);
sncPolygon.then(function (dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var name = entity.name;
var color = colorHash[name];
if (!color) {
color = Cesium.Color.fromRandom({
alpha: 0.4
});
colorHash[name] = color;
}
// entity.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY; //去掉地形遮挡
entity.polygon.material = Cesium.Color.LIGHTGREEN.withAlpha(0.5);
entity.polygon.outline = true;
entity.polygon.outlineColor = Cesium.Color.LIGHTGREEN.withAlpha(1);
entity.polygon.outlineWidth = 2;
//注意这里..开始
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
entity.position = polyCenter;
// 注意这里..结束
entity.label={
// position:
text:name,
color : Cesium.Color.fromCssColorString('#fff'),
font:'normal 32px MicroSoft YaHei',
showBackground : true,
scale : 0.5,
horizontalOrigin : Cesium.HorizontalOrigin.LEFT_CLICK,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 1000000.0),
disableDepthTestDistance : 100000.0
}
}
});
// viewer.dataSources.add(sncPolygon)
viewer.scene.postProcessStages.fxaa.enabled = false;//去锯齿 是文字清晰
}
viewer.entities.add({
name: '1号大棚',
position: Cesium.Cartesian3.fromDegrees(117.5673, 36.7035),
label: { //文字标签
text: '1号大棚',
font: '500 30px Helvetica',// 15pt monospace
scale: 0.5,
style: Cesium.LabelStyle.FILL,
fillColor: Cesium.Color.WHITE,
pixelOffset: new Cesium.Cartesian2(110, -70), //偏移量
showBackground: true,
backgroundColor: new Cesium.Color(26 / 255, 196 / 255, 228 / 255, 1.0)
},
billboard: { //图标
image: './SampleData/fire.png',
width: 200,
height: 140,
pixelOffset: new Cesium.Cartesian2(100, -35), //偏移量
},
});
</script>
</body>
</html>