2025-03-11 08:25:45 +00:00
|
|
|
|
<!--********************************************************************
|
|
|
|
|
|
* by jiawanlong
|
|
|
|
|
|
*********************************************************************-->
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
2025-03-19 03:00:22 +00:00
|
|
|
|
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
|
|
|
|
|
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
2025-03-11 08:25:45 +00:00
|
|
|
|
<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">
|
|
|
|
|
|
// 三维
|
2025-05-29 02:59:44 +00:00
|
|
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNDMxOTA2NS1lY2Q3LTQ0YmUtOTE1Mi1iNWE2OGYwZjc0MjkiLCJpZCI6MjM1NjMwLCJpYXQiOjE3MzA3MjQzMTJ9.Xhu-9FyVEyqBKWEr0V9Sybt-elTCWHt9peL9-mNh-4E'
|
2025-03-11 08:25:45 +00:00
|
|
|
|
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>
|
