cesium之深圳区域行政图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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()