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

本文主要是介绍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),});