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给地图添加比例尺学习踩坑记录相关推荐
- MAC-XXL_JOB学习踩坑记录-Failed to create parent directories for [/data/applogs/xxl-job/xxl-job-admin.log
MAC-XXL_JOB学习踩坑记录 源码下载地址 启动报错 源码下载地址 ①.GitHub:https://github.com/xuxueli/xxl-job ②.码云:https://gitee. ...
- sanic学习踩坑记录:第一坑——sanic_jinja2应用报错ModuleNotFoundError: No module named ‘AppName‘
刚开始学习使用sanic,发现有一些坑,随手记录一下:以供后来者共同学习,避免踩坑: # 使用的软件版本 python 3.8.10 sanic 21.9.3 sanic-jinja2 0.10.0 ...
- Pytorch深度学习踩坑记录
写这篇博文的主要目的是记录一下在使用Pytorch做深度学习项目时踩的一些坑,警醒自己,帮助他人
- AirSim学习和踩坑记录(不定时更新)
版权声明:本文为博主原创文章,遵循Creative Commons - Attribution-ShareAlike 4.0 International - CC BY-SA 4.0版权协议,转载请附 ...
- 浅谈cesium在vue2中的使用---踩坑日记(一)
vue2+cesium,我的踩坑记录 许久不见,我又诈尸更博了.最近刚刚忙完项目,继续研究cesium,为以后做准备.也遇到了好多好多的坑,查了很多资料,好在最终是解决了. 在此分享下我的经验,顺便记 ...
- Slam学习笔记——ROS踩坑记录
Slam学习笔记--ROS踩坑记录 1. 安装 2. ROS文件系统 2.1 工作区 2.2 包package 2.2.1 包的操作 2.2.2 描述文件package.xml 2.3 节点node ...
- 【学习记录】QT5界面设计的踩坑记录
学习记录:QT5 界面设计的踩坑记录 前言 一.Qlabel显示视频与图片 1. 图片显示 1.1 显示格式 1.2 label随界面缩放 1.3 界面刷新 2. 视频显示 二.常见控件的StyleS ...
- 记一次编译Cesium踩坑记录
记一次编译Cesium踩坑记录 cd cesium npm install npm install express --save npm install compression --save npm ...
- 双系统Ubuntu22.04深度学习环境配置与踩坑记录
双系统Ubuntu22.04深度学习环境配置踩坑记录 前言 目录 相关版本 主要参考教程 Ubuntu安装 Nvidia和CUDA安装 踩坑经历 官网安装所遇问题 cuDNN安装 Anaconda安装 ...
最新文章
- mysql explain用法
- 陪孩子一起学python第二季_陪伴作文开头和结尾
- 上传附件删除、session清空问题
- 解码错误。‘gb2312‘ codec can‘t decode byte 0xf3 in position 307307: illegal multibyte sequence
- 静态网页托管_求职季,教你制作一份精美的在线网页简历,程序员必看!!
- python函数没有修改列表_Python:通过引用创建一个修改列表的函数不是值
- 学习OO,实现的小跟堆代码
- NCC项目搭建及版本管理规范手册
- 电信版本-中兴B860AV1.1-T-S905M-B NAND闪存 线刷救砖固件
- 一键分析你的上网行为, 看看你平时上网都在干嘛?
- mysql spider引擎安装_【转】MySQL之Spider存储引擎原理详解
- Sketch的插件管理
- python真的好学吗?
- 按钮英文字母大小写-默认样式修改-vuetify
- sklearn 命令行安装_sklearn安装
- note edge android 6.0 root,三星Note Edge N9150刷机包带ROOT权限固件ZCU1BOH2线刷Rom
- 【转】FAL_CLIENT和FAL_SERVER参数详解
- 加州理工大学伯克利分计算机科学,加州理工大学伯克利分校专业有什么?
- 2020年百度之星·程序设计大赛-初赛一
- 10.16日常的小bug解决