MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MchCesium > 指南针控件

指南针控件

构造方法：

const compass = new MchCesium.CesiumCompass(MchCesium.viewer, option);

参数说明：

viewer 要加入指南针控件的viewer

option 配置项，属性如下

container(HTMLElement)：指南针控件容器dom，默认为地图容器

icon(String | HTMLElement)：非必填，自定义指南针图标，可为url字符串，也可以是dom。

size(Number)：指南针图标尺寸，默认值为30

position(String)：指南针控件的位置。可选值：'top-left'，'top-right'，'bottom-left'，'bottom-right'。

销毁 destroy

compass.destroy();

代码实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>指南针控件</title> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script> <style type="text/css"> .MchCesium-mapContainer { width: 100%; height: 100vh; position: relative; overflow: hidden; } </style> </head> <body> <div id="containerId" class="MchCesium-mapContainer"></div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); const compass = new MchCesium.CesiumCompass(MchCesium.viewer, { position: 'top-right', size: 40, is3D: true }); </script> </body> </html>

效果展示：

Demo地址：

https://mhc.ixiera.com/html/cesiumDemo/demo_compass.html

本文档来自—MCHMAP 丨 地图引擎平台