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

前言

内容概览

• cesium 结合 leaflet 实现鹰眼图方式
  效果图如下
  

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

}

};

……