cesium 入门开发系列地图鹰眼功能(附源码下载)
前言
cesium 入门开发系列环境知识点了解:
cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等
cesium 在线例子
内容概览
- cesium 结合 leaflet 实现鹰眼图
- cesium 自身 api 实现鹰眼图
- 源代码 demo 下载
- cesium 结合 leaflet 实现鹰眼图方式
效果图如下
初始化 cesium
function initialGlobeView() { Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NjRjNGFjNy1jNDM3LTQzMTktODVlYS05YmFmOTAxYjk5MWUiLCJpZCI6Mzk5MSwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTUzOTU3OTE2NX0.-25udUzENRJ66mnICMK8Hfc6xgF_VP7P4sWkSHaUjOQ'; var image_Source = new Cesium.UrlTemplateImageryProvider({ // url: 'http://mt0.google.cn/vt/lyrs=t,r&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}', url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', credit: '' }); viewer = new Cesium.Viewer('cesiumContainer', { geocoder: false, homeButton: false, sceneModePicker: false, fullscreenButton: false, vrButton: false, baseLayerPicker: false, infoBox: false, selectionIndicator: true, animation: false, timeline: false, shouldAnimate: true, navigationHelpButton: false, navigationInstructionsInitiallyVisible: false, imageryProvider: image_Source }); viewer.scene.globe.enableLighting = false; viewer.scene.globe.depthTestAgainstTerrain = true; viewer.scene.globe.showGroundAtmosphere = false; }
初始化鹰眼
function initOverview() { var url = "http://mt0.google.cn/vt/lyrs=t,r&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"; // 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'; var layer = new L.TileLayer(url, { minZoom: 0, maxZoom: 20 }); var container = document.getElementById("overview"); var options = { container: container, toggleDisplay: true, width: 150, height: 150, position: "topright", aimingRectOptions: { color: "#ff1100", weight: 3 }, shadowRectOptions: { color: "#0000AA", weight: 1, opacity: 0, fillOpacity: 0 } }; ……
更多详情见小专栏此文章:GIS之家cesium小专栏
文章提供源码,对本专栏感兴趣的话,可以关注一波
cesium 入门开发系列地图鹰眼功能(附源码下载)相关推荐
- Qt利用avilib实现录屏功能_openlayers6结合geoserver利用WFS服务实现图层编辑功能(附源码下载)...
内容概览 1.openlayers6结合geoserver利用WFS服务实现图层编辑功能 2.源代码demo下载 效果图如下: 本篇主要是参照openlayers6结合geoserver利用WFS服务 ...
- arcgis xml 下载 切片_openlayers6结合geoserver利用WFS服务实现图层编辑功能(附源码下载)...
内容概览 1.openlayers6结合geoserver利用WFS服务实现图层编辑功能 2.源代码demo下载 效果图如下: 本篇主要是参照openlayers6结合geoserver利用WFS服务 ...
- Netty实战:Springboot+Netty+protobuf开发高性能服务器 (附源码下载)
Springboot-cli 开发脚手架系列 Netty系列:Springboot使用Netty集成protobuf开发高性能服务器 文章目录 Springboot-cli 开发脚手架系列 简介 1. ...
- android-使用环信SDK开发即时通信功能及源码下载
最近项目中集成即时聊天功能,挑来拣去,最终选择环信SDK来进行开发,选择环信的主要原因是接口方便.简洁,说明文档清晰易懂.文档有android.ios.和后台服务器端,还是非常全的. 环信官网:htt ...
- Android开发之使用TabLayout快速实现选项卡切换功能(附源码下载)
看下效果图: 先看下布局: TabLayout的简单使用: 当选项卡过少时候设置填充全屏app:tabGravity="fill"设置下面切换选项卡的小滑片颜色app:tabInd ...
- geoserver三维_cesium结合geoserver实现地图空间查询(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- android 原生开发 3d地图 下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示(附源码下载)...
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis开发 多版本之间如何兼容_arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)...
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
- vscode中安装webpack_leaflet-webpack 入门开发系列一初探篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址w ...
最新文章
- 所有表单对象_Laravel 表单方法伪造与 CSRF 攻击防护
- 语言堆栈入门——堆和栈的区别
- php语言开始和结束分别为,0055 PHP语言简介和HelloWorld
- 「HDU6583 Typewriter」 - 后缀自动机
- 同时大量连接导致的DDOS攻击,导致收发器宕机,用户大面积超时掉线
- AppCan入门教程
- u盘启动盘安装centos7.5操作系统
- WPF中StackPanel的尺寸的怪癖
- 什么是 Docker ?
- java播放音频文件mp3
- c 窗体连接mysql_c 窗体如何连接数据库
- 160cracked-1
- 2021水利水电安全员模拟考试多选题库及答案
- 老公,我们现在无家可归了
- C++从入门到放弃之:静态成员与单例模式的实现
- 华为人才生态数字化平台 华为云微认证发布
- 转业费计算器2019_士官复员费标准来了!附转业明细对比表
- 剑指offer系列-代码的鲁棒性
- 北斗微信与服务器怎么联接,微信怎么绑定北斗导航
- 抖音点不了赞一直显示服务器繁忙,抖音点不了赞怎么回事
热门文章
- 【Python与数学建模】蒙特卡洛模拟仿真(附完整详细代码)
- pyinstaller打包软件失败的真正原因
- android shape 无边框颜色,Android 使用shape定义不同控件的的颜色、背景色、边框色...
- STM32单片机CAN总线汽车自动会车灯远近光切换
- Scala类和对象详解
- 百度下拉词怎么做?出现负面应该如何处理?此方法适用百度、搜狗、神马
- 蓝桥-最大最小公倍数(互质) (贪心)
- 【JDK工具】jinfo、jps、jstack、jstat、jmap、jconsole
- 【笔试】敏感词替换-携程旅游2020秋招笔试第一场
- oracle em13c配置,EM13C添加agent记录两个报错