SuperMap iClient 3D for WebGL实现二三维联动

作者：kk

---

前言

本篇博客介绍的主要内容是如何基于SuperMap iClient 3D for WebGL和SuperMap iClient JavaScript实现二三维联动

---

一、初始化三维场景和二维地球

三维场景：

var viewer = new Cesium.Viewer('cesiumContainer');

二维地图：

var map = L.map('mapContainer', {
				center: [0, 0],
				maxZoom: 18,
				zoom: 1
			});
			L.supermap.tiledMapLayer(url).addTo(map);

二、将三维场景中相机位置传入二维地图中

					var cameraPosition = camera.position;
					var cartographic = Cesium.Cartographic.fromCartesian(cameraPosition);
					var longitude = Cesium.Math.toDegrees(cartographic.longitude);
					var latitude = Cesium.Math.toDegrees(cartographic.latitude);

					addCentrePoint(longitude, latitude);
					var rectangle = viewer.camera.computeViewRectangle();
					// 弧度转为经纬度，west为左（西）侧边界的经度，以下类推
					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.fitBounds([
						[north, east],
						[south, west]
					], false);

三、将二维地图中心点以及范围传入三维场景

					//获取当前地图范围
					var bounds = map.getBounds();
					//根据给定的地图范围计算场景的高度
					var altitude = _calculateAltitudeFromBounds(bounds);
					//获取地图中心点
					var center = map.getCenter();
					addCentrePoint(center.lng, center.lat);
					//设置场景相机
					viewer.scene.camera.setView({
						destination: new Cesium.Cartesian3.fromDegrees(
								center.lng,
								center.lat,
								altitude
						),
					});

四、最终效果

完整代码下载地址：
链接：https://pan.baidu.com/s/1Ie96y0y_Aoiy_vyaBxfTwg?pwd=2zla
提取码：2zla
–来自百度网盘超级会员V5的分享

---