cesium 入门开发系列地图鹰眼功能(附源码下载)

Posted 2022-02-22 giserhome

前言

cesium 入门开发系列环境知识点了解：
cesium api文档介绍，详细介绍 cesium 每个类的函数以及属性等等
cesium 在线例子

内容概览

1. cesium 结合 leaflet 实现鹰眼图
2. cesium 自身 api 实现鹰眼图
3. 源代码 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小专栏

文章提供源码，对本专栏感兴趣的话，可以关注一波