mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-04 15:17:36 +00:00
132 lines
4.7 KiB
HTML
132 lines
4.7 KiB
HTML
<!--********************************************************************
|
||
* by jiawanlong
|
||
*********************************************************************-->
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
||
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
||
<link rel="stylesheet" href="./../../libs/ol/ol.css">
|
||
<script src="./../../libs/ol/ol.js"></script>
|
||
<style>
|
||
.tit {
|
||
position: absolute; z-index: 100; width: 100%;margin-top: 42px;
|
||
}
|
||
.tit span {
|
||
width: 50%;float: left;text-align: center;background: #eb060657;color: #fff; line-height: 60px; font-size: 24px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
||
<div id="map3" style="margin: 0 auto; width: 50%; height: 100%;float: left;"></div>
|
||
<div id="map2" style="margin: 0 auto; width: 50%; height: 100%; float: left;"></div>
|
||
<div class="tit">
|
||
<span>三维（Cesium）</span>
|
||
<span>二维（openlayers）</span>
|
||
</div>
|
||
<script type="text/javascript">
|
||
// 三维
|
||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMjBhMzcxMC0wNjBiLTRmYjItYjY1MC0wMzAwMzMyMGUyMmEiLCJpZCI6MzAzNzc3LCJpYXQiOjE3NDc2Mzk0NTV9.E_90aKtVdzRGlU2z48VwJ4mWvl-uuDkfQBCOO6zbzn4'
|
||
const viewer = new Cesium.Viewer('map3', {});
|
||
viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({});
|
||
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
|
||
url: 'http://data.mars3d.cn/terrain'
|
||
});
|
||
viewer.camera.setView({
|
||
destination: Cesium.Cartesian3.fromDegrees(110, 40, 10000),
|
||
});
|
||
|
||
// 二维
|
||
const map = new ol.Map({
|
||
target: 'map2',
|
||
layers: [
|
||
new ol.layer.Tile({
|
||
source: new ol.source.XYZ({
|
||
"url": '///data.mars3d.cn/tile/img/{z}/{x}/{y}.jpg'
|
||
})
|
||
})
|
||
],
|
||
view: new ol.View({
|
||
projection: ol.proj.get('EPSG:4326'),
|
||
center: [110, 40],
|
||
zoom: 13
|
||
})
|
||
})
|
||
|
||
// 全局事件监听
|
||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
|
||
let moveend;
|
||
let resolution;
|
||
|
||
// 移入三维
|
||
handler.setInputAction(function (event) {
|
||
open3d()
|
||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||
// 移入二维
|
||
map.on('pointermove', function (evt) {
|
||
open2d()
|
||
})
|
||
|
||
// 关闭之前所有事件
|
||
function closeO() {
|
||
try {
|
||
ol.Observable.unByKey(moveend)
|
||
ol.Observable.unByKey(resolution)
|
||
} catch (error) { }
|
||
try {
|
||
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
|
||
handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL)
|
||
} catch (error) { }
|
||
}
|
||
|
||
// 进入3d，监听3d事件
|
||
function open3d() {
|
||
closeO()
|
||
handler.setInputAction(function (event) {
|
||
liandong3D2D()
|
||
}, Cesium.ScreenSpaceEventType.WHEEL)
|
||
handler.setInputAction(function (event) {
|
||
liandong3D2D()
|
||
}, Cesium.ScreenSpaceEventType.LEFT_UP)
|
||
}
|
||
|
||
// 进入2d，监听2d事件
|
||
function open2d() {
|
||
closeO()
|
||
moveend = map.on('moveend', function (evt) {
|
||
liandong2D3D()
|
||
})
|
||
resolution = map.getView().on('change:resolution', function () {
|
||
liandong2D3D()
|
||
})
|
||
}
|
||
|
||
// 3d联动2d
|
||
function liandong3D2D() {
|
||
var rectangle = viewer.camera.computeViewRectangle()
|
||
var west = (rectangle.west / Math.PI) * 180
|
||
var north = (rectangle.north / Math.PI) * 180
|
||
var east = (rectangle.east / Math.PI) * 180
|
||
var south = (rectangle.south / Math.PI) * 180
|
||
map.getView().fit([west, south, east, north], map.getSize())
|
||
}
|
||
|
||
// 2d联动3d
|
||
function liandong2D3D() {
|
||
var xy = map.getView().calculateExtent(map.getSize())
|
||
viewer.scene.camera.setView({
|
||
destination: Cesium.Rectangle.fromDegrees(xy[0], xy[1], xy[2], xy[3]),
|
||
orientation: {
|
||
heading: 0.049106700935120706,
|
||
pitch: -1.560509974137843,
|
||
roll: 0
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |