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