概述
效果如下
class District{
constructor() {
this.viewer = null
this.init()
}
init() {
//初始化地图
this.initMap()
//渲染行政区域图
this.renderDistrict()
//去掉ntity的点击事件
this.removeClick()
}
initMap() {
this.viewer = new Cesium.Viewer('cesiumContainer',{
geocoder: false,
baseLayerPicker: false,
sceneModePicker: false,
fullscreenButton: false,
navigationHelpButton: false,
sceneMode: Cesium.SceneMode.SCENE3D,
shouldAnimate: true,
animation: false,
timeline: false,
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=1a7ec240fc2783062616cc53caac5514",
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
maximumLevel: 18,
show: false,
})
});
this.viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(114.14743519182551,22.575871697376243, 100000.0)
});
}
removeClick() {
this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
renderDistrict() {
Cesium.GeoJsonDataSource.load('./district.json',{
stroke: Cesium.Color.WHITE,//设置多边形轮廓的默认颜色
strokeWidth: 20,//轮廓的宽度
clamToGround: true//让地图贴地
}).then((dataSource)=>{
this.viewer.dataSources.add(dataSource);
let entities = dataSource.entities.values;
for (let i = 0; i < entities.length; i++) {
let entity = entities[i];
//将随机产生的颜色赋予多边形
//对南山和宝安进行特殊处理,让多个区块颜色保持一致
if(entity._name == '宝安区'){
entity.polygon.material = Cesium.Color.ORANGE.withAlpha(0.5);
}else
if(entity._name == '南山区'){
entity.polygon.material = Cesium.Color.RED.withAlpha(0.5);
}
else{
entity.polygon.material = Cesium.Color.fromRandom({ alpha: 0.5 });
}
let polyCenter = Cesium.Cartesian3.fromDegrees(entity._properties.centroid._value[0],entity._properties.centroid._value[1], 100);
this.viewer.entities.add({
position: polyCenter,
label: {
font: '24px sans-serif',
text: entity._name,
showBackground: true,
scale: 0.6,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
}
})
}
});
}
}
new District()
最后
以上就是现代小馒头为你收集整理的cesium之深圳区域行政图的全部内容,希望文章能够帮你解决cesium之深圳区域行政图所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复