Cesium三维地球标注

Cesium三维地球标注

2018年06月26日 11:04:17 zhou8023ddw 阅读数：728 标签： cesium标注 更多

个人分类： 经验

1、三维地球上添加图层

    添加的图层会覆盖该区域的地图信息

1. //添加图层

2. var layers = viewer.scene.imageryLayers;

3. layers.addImageryProvider(new Cesium.SingleTileImageryProvider({

4. url : 'img/11.png',

5. rectangle : Cesium.Rectangle.fromDegrees(-18, -18,18, 18)//矩形两个顶点的想经纬度值

6. }));

2、标注

    a、添加标注

        在viewer的实体对象中有add()方法，通过add（）方法去添加标注，在add（）中传入对象，确定标注的配置对象，标注样式可以是多种多样，下面举了点，广告牌，文本三种标注。

1. viewer.entities.add({

2. id:id,

3. name : name,

4. position : Cesium.Cartesian3.fromDegrees(point.lng, point.lat),

5. //点样式

6. point : {

7. pixelSize : 5,

8. color : Cesium.Color.RED,

9. outlineColor : Cesium.Color.WHITE,

10. outlineWidth : 1

11. },

12. //立广告牌

13. /*billboard :{

14. image : 'img/11.png',

15. show : true, // default

16. width : 25, // default: undefined

17. height : 25 // default: undefined

18. },*/

19. //字体标签样式

20. label : {

21. text : text,

22. font : '14pt',

23. color : Cesium.Color.RED,

24. style: Cesium.LabelStyle.FILL_AND_OUTLINE,

25. outlineWidth : 1,

26. //垂直位置

27. //verticalOrigin : Cesium.VerticalOrigin.BUTTON,

28. //中心位置

29. pixelOffset : new Cesium.Cartesian2(0, 20)

30. }

31. });

  b、添加的标注本身有默认事件：左键单击选中标注实体，双击镜头会直接跳转到标注地点。如果你不想要这种效果，你可以取消默认事件，自己定义。下面添加左键单击选取拾取，双击将相机飞到该实体上空一定高度中，具体步骤如下

    1、取消双击默认效果

viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

   2、自定义点击事件

1. function pickAndTrackObject(e) {

2. //双击操作

3.  

4. }

5. function pickAndSelectObject(e) {

6. //单击操作

7.  

8. }

9. viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(pickAndSelectObject,Cesium.ScreenSpaceEventType.LEFT_CLICK);

10. viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(pickAndTrackObject,Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

3、根据屏幕坐标拾取实体坐标

1. //拾取实体

2. function pickEntity(viewer,position) {

3. var picked=viewer.scene.pick(position);

4. if(picked){

5. var id=Cesium.defaultValue(picked.id,picked.primitive.id);

6. if(id instanceof Cesium.Entity){

7. return id;

8. }

9. }

10. return undefined;

11. }

4、拾取到的实体坐标系为笛卡尔直角坐标系，将相机飞过去，需要操作经纬度坐标，中间需要转化坐标系

1. //将笛卡尔直角坐标系转化为经纬度坐标系

2. var wgs84=viewer.scene.globe.ellipsoid.cartesianToCartographic(entity.position._value);

3. //转化为经纬度

4. var long=Cesium.Math.toDegrees(wgs84.longitude);

5. var lat=Cesium.Math.toDegrees(wgs84.latitude);

完整代码如下：

1. function pickAndTrackObject(e) {

2. //双击操作

3. var entity=pickEntity(viewer,e.position);

4. if(entity){

5. //将笛卡尔直角坐标系转化为经纬度坐标系

6. var wgs84=viewer.scene.globe.ellipsoid.cartesianToCartographic(entity.position._value);

7. //转化为经纬度

8. var long=Cesium.Math.toDegrees(wgs84.longitude);

9. var lat=Cesium.Math.toDegrees(wgs84.latitude);

10. camera.flyTo( {

11. destination : Cesium.Cartesian3.fromDegrees(long, lat, 2000 ),//使用WGS84

12. orientation : {

13. heading : Cesium.Math.toRadians( 0 ),

14. pitch : Cesium.Math.toRadians( -90 ),

15. roll : Cesium.Math.toRadians( 0 )

16. },

17. duration : 3,//动画持续时间

18. complete : function()//飞行完毕后执行的动作

19. {

20. // addEntities();

21. canCont=true;

22. },

23. pitchAdjustHeight: -90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。

24. maximumHeight:5000 // 相机最大飞行高度

25. } );

26. }

27. }

28. function pickAndSelectObject(e) {

29. //单击操作

30. viewer.selectedEntity= pickEntity(viewer,e.position)

31. }

32. //拾取实体

33. function pickEntity(viewer,position) {

34. var picked=viewer.scene.pick(position);

35. if(picked){

36. var id=Cesium.defaultValue(picked.id,picked.primitive.id);

37. if(id instanceof Cesium.Entity){

38. return id;

39. }

40. }

41. return undefined;

42. }

43. viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(pickAndSelectObject,Cesium.ScreenSpaceEventType.LEFT_CLICK);

 

 

转自：https://blog.youkuaiyun.com/zhou8023ddw/article/details/80811630