cesium 实现指南针及比例尺效果

静态资源:

<script type="text/javascript" src="../Build/CesiumUnminified/Cesium.js" nomodule></script><script type="text/javascript" src="/emc/js/Cesium-1.64/viewerCesiumNavigationMixin.js"></script>
<style>@import url(../Build/Cesium/Widgets/widgets.css);html, body, #cesiumContainer {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;}</style>

viewerCesiumNavigationMixin.js文件资源地址：https://download.csdn.net/download/qq_26579715/12089560

html标签:

<div id="cesiumContainer"></div>

核心code:

var viewer = new Cesium.Viewer('cesiumContainer',{animation:false,//隐藏动画器件timeline:false,//隐藏时间轴homeButton:false,//隐藏视角返回初始位置geocoder:false,//隐藏查找位置工具sceneModePicker:false, //隐藏选择视角的模式baseLayerPicker:false, //隐藏图层选择器fullscreenButton:false,//隐藏全屏按钮navigationHelpButton:false //隐藏帮助按钮});viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",}));viewer._cesiumWidget._creditContainer.style.display = "none";var options = {};// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.options.defaultResetView = Cesium.Cartographic.fromDegrees(110, 30, 2000000);// 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。options.enableCompass= true;// 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件 将不会添加到地图中。options.enableZoomControls= true;// 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。options.enableDistanceLegend= true;// 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。options.enableCompassOuterRing= true;viewer.extend(Cesium.viewerCesiumNavigationMixin, options);//视角定位中国上方viewer.camera.flyTo({destination: new Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),duration: 8});

页面效果如下：

cesium 实现指南针及比例尺效果相关推荐

cesium给地图添加比例尺学习踩坑记录
cesium给地图添加比例尺学习踩坑记录因项目需要在cesium地图中展示比例尺,本来应该是很简单的事,但却碰到了一个引用文件的坑,特此记录: *1.引用依赖文件相信需要用到cesium比例尺组件 ...
Cesium开发：地下模式效果
主要是如何修改Cesium的源码,才能达到实现地下模式的效果. 修改完源码后,在执行地下模式的时候,设置地图的底色,要同步将地图影像进行半透明的操作,并且还要刷新一下影像图层,及时显示效果. //设置 ...
cesium 指南针、比例尺
cesium 里面没有指南针,需要安装其他插件:cesium-navigation-es6 安装 cesium-navigation-es6 插件 npm i cesium-navigation-es ...
基于Cesium的指南针插件
因为cesium自身没有携带指南针插件,所以需要引用其他的插件这里我采用的是:CesiumNavigation.umd 作者github库:CesiumNavigation.umd 由于国内访问慢, ...
cesium实现动态立体墙效果
文章目录 1.实现效果 2.实现方法 2.1自定义材质 2.2纹理图片 2.3代码调用 Cesium实战系列文章总目录: 传送门设置自定义MaterialProperty,实现动态立体墙体效果 1. ...
[cesium] 卫星雷达传感器,雷达探测效果
前言整理了一下关于卫星视锥和雷达测控的三维效果. 包含视锥体,传感器,扫描探测等效果修改部分插件,支持最新版cesium 效果相控雷达传感器球形相控雷达传感器卫星传感波卫星视锥雷达跟踪 ...
Cesium实现自定义的广告牌效果
文章目录 1.实现效果 2.实现方法 Cesium实战系列文章总目录: 传送门在三维场景下使用自定义的广告牌进行POI的标注. 1.实现效果 2.实现方法首先分解该效果,共包括四个部分,分别是顶部 ...
cesium实现动态扩散墙效果（基于turf）
文章目录 1.实现效果 2.实现方法 2.1 turf库 2.2具体代码 2.2.1核心函数 2.2.2代码调用 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法通过查询Cesi ...
cesium实现日照阴影模拟效果
文章目录 1.实现效果 2.实现方法 2.1实现思路 2.2核心代码 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法 2.1实现思路 Cesium中自带有日照阴影效果,所以只需要 ...
cesium实现道路闪烁线效果
文章目录 1.实现效果 2.实现方法 2.1实现思路 2.2具体代码 2.2.1材质 2.2.2调用 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法 2.1实现思路通过修改线的 ...

cesium 实现指南针及比例尺效果

cesium 实现指南针及比例尺效果相关推荐

最新文章

热门文章