cesium给地图添加比例尺学习踩坑记录

cesium给地图添加比例尺学习踩坑记录

因项目需要在cesium地图中展示比例尺,本来应该是很简单的事,但却碰到了一个引用文件的坑,特此记录:

*1、引用依赖文件

相信需要用到cesium比例尺组件的大佬们都已经成功引用cesium.js加载出地图了,此处就不在累述如何引用cesium.js了。
引用cesium.js与viewerCesiumNavigationMixin.js或者viewerCesiumNavigationMixin.min.js,此为cesium的组件包,其中包括了比例尺、罗盘、指南针等组件,大家可以按需取用。
经过一番痛苦的找寻后,终于找到了solocao大佬直接给出的viewerCesiumNavigationMixin.min.js文件
大佬给的文件:
https://github.com/solocao/viewerCesiumNavigationMixin
但这个文件在实际使用过程中出现了下面第三点的报错,以下为笔者修改后的依赖文件:
https://github.com/LXHlu/cesium-viewerCesiumNavigationMixin.min.js
引用方式如下:

<script src="../Cesium/Cesium.js"></script>
<script src="../Cesium/viewerCesiumNavigationMixin.min.js"></script>
*2、使用组件

只需要比例尺的话,如下:

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.extend(Cesium.viewerCesiumNavigationMixin, {});

如果还需要其他组件扩展的话,如下:

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.extend(Cesium.viewerCesiumNavigationMixin, {
				enableCompass:true,
				//罗盘组件true启用,false禁用,默认值为true。
				enableZoomControls:true,
				//缩放组件true启用,false禁用,默认值为true。
				enableDistanceLegend:true,
				//比例尺组件true启用,false禁用,默认值为true。
				enableCompassOuterRing:true,
				//指南针外环组件true启用,false禁用,默认值为true。
			});
*3、解决问题

按照上面的步骤,然后又碰到一个盲点:

报错
他会给你报defineProperties is not a function的错误,经过一番努力查找,然后发现是版本问题,需要在viewerCesiumNavigationMixin.min.js中的defineProperties函数前面添加Object.即Object.defineProperties,这样比例尺终于出来了( Ĭ ^ Ĭ )( Ĭ ^ Ĭ )。

*4、修改比例尺位置样式

按照需求在css中修改样式

/*比例尺定位及样式*/
.distance-legend{
  position: absolute;
  left: 80px;
  margin: 30px;
}
			
/*罗盘*/
.compass{
  position: absolute;
  ...
}
/*缩放*/
.navigation-controls{
position: absolute;
...
}

参考大佬传送门:
https://github.com/solocao/viewerCesiumNavigationMixin
https://blog.csdn.net/qq_26579715/article/details/103889908
https://blog.csdn.net/qq_34200979/article/details/113251475

你可能感兴趣的:(cesium学习踩坑记录,学习,javascript,前端)