网上购物商城网站建设毕业设计什么网站做外贸好

当前位置： 首页 > news >正文

网上购物商城网站建设毕业设计,什么网站做外贸好,建立虚拟网站,机关网站建设费入什么科目ol-cesium 暴露 Cesium viewer 对象以及二三维切换、viewer 添加点功能示例 核心代码完整代码在线示例 二三维一体化的概念一直都比较火热#xff0c;虽然大多数都是狭义的概念#xff0c;但是很多需求方也想要这样的功能。 Openlayers 官方出了一个二三维一体化的工具… ol-cesium 暴露 Cesium viewer 对象以及二三维切换、viewer 添加点功能示例 核心代码完整代码在线示例 二三维一体化的概念一直都比较火热虽然大多数都是狭义的概念但是很多需求方也想要这样的功能。 Openlayers 官方出了一个二三维一体化的工具ol-cesium。 基本能满足大多数项目的基础需求。 在使用过程中发现工具在初始化之后可以获取 Openlayers 地图对象、Cesium camera 对象、Cesium scene 对象等。 但是拿不到 Cesium viewer 对象使用起来不太习惯于是经过修改源码拿到 viewer 对象。 本文包括核心代码、完整代码、在线示例三部分。 核心代码 let viewer,thisObject this;if (targetElement) {if (typeof targetElement string) {targetElement document.getElementById(targetElement);//使用原始cesium方式初始化viewer new Cesium.Viewer(targetElement, {infoBox: thisObject.infoBox, //Disable InfoBox widgetselectionIndicator: thisObject.selectionIndicator, //Disable selection indicatorshouldAnimate: thisObject.shouldAnimate, // Enable animations//需要进行可视化的数据源的集合animation: false, //是否显示动画控件homeButton: false, //是否显示Home按钮fullscreenButton: false, //是否显示全屏按钮baseLayerPicker: false, //是否显示图层选择控件geocoder: false, //是否显示地名查找控件timeline: false, //是否显示时间线控件sceneModePicker: false, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件requestRenderMode: false, //启用请求渲染模式scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存});//获取cesium视野对象let cesiumChidren \((viewer.container).find(.cesium-viewer-cesiumWidgetContainer).find(.cesium-widget).children();//将cesium视野对象移入ol-cesium对象中cesiumChidren.each(function (e, f) {if (e 0) {\)(this).css(position, absolute);\((this).css(top, 0px);\)(this).css(left, 0px);\((this).css(width, 100%);\)(this).css(height, 100%);}thisObject.container.append(this);});targetElement document.getElementById(targetElement);targetElement.appendChild(this.container);} } else {const seOverlayContainer this.map.getViewport().querySelector(.ol-overlaycontainer-stopevent);seOverlayContainer.insertBefore(this.container, seOverlayContainer.firstChild);viewer new Cesium.Viewer(this.container); } 完整代码 可以参考这个类自己进行修改当然直接复制替换也没问题。 /*** module olcs.OLCesium/ import olGeomPoint from ol/geom/Point.js; import {getTransform} from ol/proj.js; import {supportsImageRenderingPixelated, imageRenderingValue} from ./util.js; import {ol4326CoordinateToCesiumCartesian} from ./core.js; import olcsAutoRenderLoop from ./AutoRenderLoop.js; import olcsCamera from ./Camera.js; import olcsRasterSynchronizer from ./RasterSynchronizer.js; import olcsVectorSynchronizer from ./VectorSynchronizer.js; import olcsOverlaySynchronizer from ./OverlaySynchronizer.js; import LSSEC from lssec-cesium-api/src/lssec/lssec; const Cesium LSSEC.Cesium; import $ from jquery;/** typedef {Object} OLCesiumOptions* property {import(ol/Map.js).default} map The OpenLayers map we want to show on a Cesium scene.* property {Element|string} [target] Target element for the Cesium scene.* property {function(!import(ol/Map.js).default, !Cesium.Scene, !Cesium.DataSourceCollection): Arrayimport(olcs/AbstractSynchronizer.js).default}* [createSynchronizers] Callback function which will be called by the {link olcs.OLCesium}* constructor to create custom synchronizers. Receives an ol.Map and a Cesium.Scene as arguments,* and needs to return an array of {link import(olcs/AbstractSynchronizer.js).default}.* property {function(): Cesium.JulianDate} [time] Control the current time used by Cesium.* property {boolean} [stopOpenLayersEventsPropagation] Prevent propagation of mouse/touch events to* OpenLayers when Cesium is active.* property {Cesium.SceneOptions} [sceneOptions] Allows the passing of property value to the* Cesium.Scene./class OLCesium {/** param {!OLCesiumOptions} options Options.* constructor* api/constructor(options) {/** type {olcs.AutoRenderLoop}* private*/this.autoRenderLoop null;/*** type {!ol.Map}* private/this.map_ options.map;/** type {!function(): Cesium.JulianDate}* private/this.time_ options.time || function() {return Cesium.JulianDate.now();};/** No change of the view projection.* private/this.to4326Transform_ getTransform(this.map_.getView().getProjection(), EPSG:4326);/** type {number}* private/this.resolutionScale_ 1.0;/** type {number}* private/this.canvasClientWidth_ 0.0;/** type {number}* private/this.canvasClientHeight_ 0.0;/** type {boolean}* private/this.resolutionScaleChanged_ true; // force resize// 隐藏一些控件this.infoBox options.infoBox || false;//Disable InfoBox widgetthis.selectionIndicator options.selectionIndicator || false;//Disable selection indicatorthis.shouldAnimate options.shouldAnimate || true;// Enable animationsconst fillArea position:absolute;top:0;left:0;width:100%;height:100%;pointer-events: auto;;// const fillArea position:absolute;top:0;left:0;width:100%;height:100%;;/** type {!Element}* private/this.container_ document.createElement(DIV);const containerAttribute document.createAttribute(style);containerAttribute.value \({fillArea}visibility:hidden;;this.container_.setAttributeNode(containerAttribute);// 这里主要为了将 ol 和 cesium 拆开let targetElement options.target || null;// let targetElement options.target || this.map_.getViewport();//移除广告let removeViewerButtons function () {\)(.cesium-viewer).children().each(function () {if (!\((this).hasClass(cesium-viewer-cesiumWidgetContainer) !\)(this).hasClass(cesium-viewer-infoBoxContainer) !\((this).hasClass(cesium-viewer-selectionIndicatorContainer)) {\)(this).remove();}})}let viewer,thisObject this;if (targetElement) {if (typeof targetElement string) {// targetElement document.getElementById(targetElement);//使用原始cesium方式初始化// viewer new Cesium.Viewer(targetElement, {// infoBox: thisObject.infoBox, //Disable InfoBox widget// selectionIndicator: thisObject.selectionIndicator, //Disable selection indicator// shouldAnimate: thisObject.shouldAnimate, // Enable animations// //需要进行可视化的数据源的集合// animation: false, //是否显示动画控件// homeButton: false, //是否显示Home按钮// fullscreenButton: false, //是否显示全屏按钮// baseLayerPicker: false, //是否显示图层选择控件// geocoder: false, //是否显示地名查找控件// timeline: false, //是否显示时间线控件// sceneModePicker: false, //是否显示投影方式控件// navigationHelpButton: false, //是否显示帮助信息控件// requestRenderMode: false, //启用请求渲染模式// scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存// });const optional {terrain: true,// 在线底图defaultLayer: online,// 使用官方影像图// officialLayer: true,// officialTerrain: false,// beautify: true,// color: dark, // # 黑色 dark蓝色 darkBlue绿色 darkGreen// sunlight: true,animation: true,timeline: true,minimumLevel: -1,maximumLevel: 23,// terrainExaggeration: 1.2,// limitExtent: Constant.EXTENTCHINA// url: http://192.168.242.24:8180/world84/ter/,// annotation: http://192.168.242.24:8180/world84/cta/,};viewer new LSSEC.GLMap(targetElement, optional);//获取cesium视野对象let cesiumChidren \((viewer.container).find(.cesium-viewer-cesiumWidgetContainer).find(.cesium-widget).children();//将cesium视野对象移入ol-cesium对象中cesiumChidren.each(function (e, f) {if (e 0) {\)(this).css(position, absolute);\((this).css(top, 0px);\)(this).css(left, 0px);\((this).css(width, 100%);\)(this).css(height, 100%);}thisObject.container.append(this);});targetElement document.getElementById(targetElement);targetElement.appendChild(this.container);}} else {const seOverlayContainer this.map.getViewport().querySelector(.ol-overlaycontainer-stopevent);seOverlayContainer.insertBefore(this.container, seOverlayContainer.firstChild);viewer new Cesium.Viewer(this.container);}removeViewerButtons();// if (typeof targetElement string) {// targetElement document.getElementById(targetElement);// }// targetElement.appendChild(this.container_);/** Whether the Cesium container is placed over the ol map.* a target side by side mode* no target over map mode* type {boolean}* private/this.isOverMap_ !options.target;if (this.isOverMap_ options.stopOpenLayersEventsPropagation) {const overlayEvents [click, dblclick, mousedown, touchstart,MSPointerDown, pointerdown, mousewheel, wheel];for (let i 0, ii overlayEvents.length; i ii; i) {this.container_.addEventListener(overlayEvents[i], evt evt.stopPropagation());}}/** type {!HTMLCanvasElement}* private*/// this.canvas_ /** type {!HTMLCanvasElement} / (document.createElement(CANVAS));// const canvasAttribute document.createAttribute(style);// canvasAttribute.value fillArea;// this.canvas.setAttributeNode(canvasAttribute);//// if (supportsImageRenderingPixelated()) {// // non standard CSS4// this.canvas.style[imageRendering] imageRenderingValue();// }//// this.canvas.oncontextmenu function() { return false; };// this.canvas.onselectstart function() { return false; };//// this.container.appendChild(this.canvas);// 重新制定 canvasthis.canvas_ viewer.scene._canvas;/** type {boolean}* private/this.enabled_ false;/** type {!Array.ol.interaction.Interaction}* private/this.pausedInteractions_ [];/** type {?ol.layer.Group}* private*/this.hiddenRootGroup_ null;const sceneOptions options.sceneOptions ! undefined ? options.sceneOptions :/** type {Cesium.SceneOptions} / ({});sceneOptions.canvas this.canvas_;sceneOptions.scene3DOnly true;/** type {!Cesium.Scene}* private/this.viewer_ viewer || {};this.scene_ this.viewer.scene;// this.scene new Cesium.Scene(sceneOptions);const sscc this.scene_.screenSpaceCameraController;sscc.tiltEventTypes.push({eventType: Cesium.CameraEventType.LEFT_DRAG,modifier: Cesium.KeyboardEventModifier.SHIFT});sscc.tiltEventTypes.push({eventType: Cesium.CameraEventType.LEFTDRAG,modifier: Cesium.KeyboardEventModifier.ALT});sscc.enableLook false;this.scene.camera.constrainedAxis Cesium.Cartesian3.UNIT_Z;/** type {!olcs.Camera}* private/this.camera_ new olcsCamera(this.scene, this.map);/** type {!Cesium.Globe}* private/this.globe_ new Cesium.Globe(Cesium.Ellipsoid.WGS84);this.globe.baseColor Cesium.Color.WHITE;this.scene.globe this.globe;this.scene.skyAtmosphere new Cesium.SkyAtmosphere();// The first layer of Cesium is special; using a 1x1 transparent image to workaround it.// See https://github.com/AnalyticalGraphicsInc/cesium/issues/1323 for details.const firstImageryProvider new Cesium.SingleTileImageryProvider({tileHeight: 1,tileWidth: 1,url: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII,rectangle: Cesium.Rectangle.fromDegrees(0, 0, 1, 1) // the Rectangle dimensions are arbitrary});this.globe.imageryLayers.addImageryProvider(firstImageryProvider, 0);this.dataSourceCollection new Cesium.DataSourceCollection();this.dataSourceDisplay_ new Cesium.DataSourceDisplay({scene: this.scene,dataSourceCollection: this.dataSourceCollection});const synchronizers options.createSynchronizers ?options.createSynchronizers(this.map, this.scene, this.dataSourceCollection) : [new olcsRasterSynchronizer(this.map, this.scene),new olcsVectorSynchronizer(this.map, this.scene),new olcsOverlaySynchronizer(this.map, this.scene)];//暴露此对象,用于删除三维对象this.synchronizers synchronizers;// Assures correct canvas size after initialisationthis.handleResize();for (let i synchronizers.length - 1; i 0; –i) {synchronizers[i].synchronize();}/** Time of the last rendered frame, as returned by performance.now().* type {number}* private/this.lastFrameTime_ 0;/** The identifier returned by requestAnimationFrame.* type {number|undefined}* private/this.renderId_ undefined;/** Target frame rate for the render loop.* type {number}* private/this.targetFrameRate_ Number.POSITIVE_INFINITY;/** If the Cesium render loop is being blocked.* type {boolean}* private/this.blockCesiumRendering_ false;/** If the warmup routine is active.* type {boolean}* private/this.warmingUp_ false;/** type {ol.Feature}* private/this.trackedFeature_ null;/** type {Cesium.Entity}* private/this.trackedEntity_ null;/** type {Cesium.EntityView}* private/this.entityView_ null;/** type {boolean}* private/this.needTrackedEntityUpdate_ false;/** type {!Cesium.BoundingSphere}/this.boundingSphereScratch_ new Cesium.BoundingSphere();const eventHelper new Cesium.EventHelper();eventHelper.add(this.scene.postRender, OLCesium.prototype.updateTrackedEntity, this);// Cesium.Camera.enableSuspendTerrainAdjustment false;}/** Render the Cesium scene.* private/render() {// if a call to requestAnimationFrame is pending, cancel itif (this.renderId ! undefined) {cancelAnimationFrame(this.renderId);this.renderId undefined;}// only render if Cesium is enabled/warming and rendering hasnt been blockedif ((this.enabled_ || this.warmingUp) !this.blockCesiumRendering) {this.renderId_ requestAnimationFrame(this.onAnimationFrame_.bind(this));}}/** Callback for requestAnimationFrame.* param {number} frameTime The frame time, from performance.now().* private/onAnimationFrame(frameTime) {this.renderId undefined;// check if a frame was rendered within the target frame rateconst interval 1000.0 / this.targetFrameRate;const delta frameTime - this.lastFrameTime;if (delta interval) {// too soon, dont render yetthis.render();return;}// time to render a frame, save the timethis.lastFrameTime frameTime;const julianDate this.time();this.scene.initializeFrame();this.handleResize();this.dataSourceDisplay.update(julianDate);// Update tracked entityif (this.entityView) {const trackedEntity this.trackedEntity;const trackedState this.dataSourceDisplay.getBoundingSphere(trackedEntity, false, this.boundingSphereScratch);if (trackedState Cesium.BoundingSphereState.DONE) {this.boundingSphereScratch.radius 1; // a radius of 1 is enough for tracking pointsthis.entityView.update(julianDate, this.boundingSphereScratch);}}this.scene.render(julianDate);this.camera.checkCameraChange();// request the next render call after this one completes to ensure the browser doesnt get backed upthis.render();}/** private/updateTrackedEntity() {if (!this.needTrackedEntityUpdate) {return;}const trackedEntity this.trackedEntity;const scene this.scene;const state this.dataSourceDisplay.getBoundingSphere(trackedEntity, false, this.boundingSphereScratch);if (state Cesium.BoundingSphereState.PENDING) {return;}scene.screenSpaceCameraController.enableTilt false;const bs state ! Cesium.BoundingSphereState.FAILED ? this.boundingSphereScratch_ : undefined;if (bs) {bs.radius 1;}this.entityView_ new Cesium.EntityView(trackedEntity, scene, scene.mapProjection.ellipsoid);this.entityView.update(this.time(), bs);this.needTrackedEntityUpdate_ false;}/** private*/handleResize() {let width this.canvas.clientWidth;let height this.canvas.clientHeight;if (width 0 | height 0) {// The canvas DOM element is not ready yet.return;}if (width this.canvasClientWidth height this.canvasClientHeight_ !this.resolutionScaleChanged) {return;}let resolutionScale this.resolutionScale;if (!supportsImageRenderingPixelated()) {resolutionScale * window.devicePixelRatio || 1.0;}this.resolutionScaleChanged_ false;this.canvasClientWidth_ width;this.canvasClientHeight_ height;width * resolutionScale;height * resolutionScale;this.canvas.width width;this.canvas.height height;this.scene.camera.frustum.aspectRatio width / height;}/*** return {!olcs.Camera}* api*/getCamera() {return this.camera;}/*** return {!ol.Map}* api/getOlMap() {return this.map_;}/** return {!ol.View}* api/getOlView() {const view this.map_.getView();console.assert(view);return view;}/** return {!Cesium.Scene}* api/getCesiumScene() {return this.scene_;}/** return {!Cesium.Viewer}* api/getViewer() {return this.viewer_;}/** return {!Cesium.DataSourceCollection}* api/getDataSources() {return this.dataSourceCollection_;}/** return {!Cesium.DataSourceDisplay}* api/getDataSourceDisplay() {return this.dataSourceDisplay_;}/** return {boolean}* api/getEnabled() {return this.enabled_;}/** Enables/disables the Cesium.* This modifies the visibility style of the container element.* param {boolean} enable* api/setEnabled(enable) {if (this.enabled_ enable) {return;}this.enabled_ enable;// some Cesium operations are operating with canvas.clientWidth,// so we cant remove it from DOM or even make display:none;this.container.style.visibility this.enabled ? visible : hidden;let interactions;if (this.enabled) {this.throwOnUnitializedMap();if (this.isOverMap) {interactions this.map.getInteractions();interactions.forEach((el, i, arr) {this.pausedInteractions.push(el);});interactions.clear();this.map.addInteraction interaction this.pausedInteractions.push(interaction);this.map.removeInteraction interaction this.pausedInteractions_ this.pausedInteractions.filter(i i ! interaction);const rootGroup this.map.getLayerGroup();if (rootGroup.getVisible()) {this.hiddenRootGroup_ rootGroup;this.hiddenRootGroup.setVisible(false);}this.map.getOverlayContainer().classList.add(olcs-hideoverlay);}this.camera.readFromView();this.render();} else {if (this.isOverMap) {interactions this.map.getInteractions();this.pausedInteractions.forEach((interaction) {interactions.push(interaction);});this.pausedInteractions.length 0;this.map.addInteraction interaction this.map.getInteractions().push(interaction);this.map.removeInteraction interaction this.map.getInteractions().remove(interaction);this.map.getOverlayContainer().classList.remove(olcs-hideoverlay);if (this.hiddenRootGroup) {this.hiddenRootGroup.setVisible(true);this.hiddenRootGroup null;}}this.camera_.updateView();}}/** Preload Cesium so that it is ready when transitioning from 2D to 3D.* param {number} height Target height of the camera* param {number} timeout Milliseconds after which the warming will stop* api/warmUp(height, timeout) {if (this.enabled) {// already enabledreturn;}this.throwOnUnitializedMap();this.camera.readFromView();const ellipsoid this.globe.ellipsoid;const csCamera this.scene.camera;const position ellipsoid.cartesianToCartographic(csCamera.position);if (position.height height) {position.height height;csCamera.position ellipsoid.cartographicToCartesian(position);}this.warmingUp true;this.render();setTimeout(() {this.warmingUp false;}, timeout);}/** Block Cesium rendering to save resources.* param {boolean} block True to block.* api/setBlockCesiumRendering(block) {if (this.blockCesiumRendering_ ! block) {this.blockCesiumRendering_ block;// reset the render loopthis.render_();}}/** Render the globe only when necessary in order to save resources.* Experimental.* api/enableAutoRenderLoop() {if (!this.autoRenderLoop) {this.autoRenderLoop new olcsAutoRenderLoop(this);}}/** Get the autorender loop.* return {?olcs.AutoRenderLoop}* api/getAutoRenderLoop() {return this.autoRenderLoop_;}/** The 3D Cesium globe is rendered in a canvas with two different dimensions:* clientWidth and clientHeight which are the dimension on the screen and* width and height which are the dimensions of the drawing buffer.** By using a resolution scale lower than 1.0, it is possible to render the* globe in a buffer smaller than the canvas client dimensions and improve* performance, at the cost of quality.** Pixel ratio should also be taken into account; by default, a device with* pixel ratio of 2.0 will have a buffer surface 4 times bigger than the client* surface.** param {number} value* this {olcs.OLCesium}* api/setResolutionScale(value) {value Math.max(0, value);if (value ! this.resolutionScale) {this.resolutionScale Math.max(0, value);this.resolutionScaleChanged_ true;if (this.autoRenderLoop) {this.autoRenderLoop.restartRenderLoop();}}}/** Set the target frame rate for the renderer. Set to Number.POSITIVEINFINITY* to render as quickly as possible.* param {number} value The frame rate, in frames per second.* api*/setTargetFrameRate(value) {if (this.targetFrameRate ! value) {this.targetFrameRate_ value;// reset the render loopthis.render();}}/*** Check if OpenLayers map is not properly initialized.* private*/throwOnUnitializedMap() {const map this.map;const view map.getView();const center view.getCenter();if (!view.isDef() || isNaN(center[0]) || isNaN(center[1])) {throw new Error(The OpenLayers map is not properly initialized: \({center} / \){view.getResolution()});}}/*** type {ol.Feature}*/get trackedFeature() {return this.trackedFeature;}/*** param {ol.Feature} feature*/set trackedFeature(feature) {if (this.trackedFeature_ ! feature) {const scene this.scene;//Stop trackingif (!feature || !feature.getGeometry()) {this.needTrackedEntityUpdate false;scene.screenSpaceCameraController.enableTilt true;if (this.trackedEntity) {this.dataSourceDisplay.defaultDataSource.entities.remove(this.trackedEntity);}this.trackedEntity null;this.trackedFeature_ null;this.entityView_ null;scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);return;}this.trackedFeature_ feature;//We cant start tracking immediately, so we set a flag and start tracking//when the bounding sphere is ready (most likely next frame).this.needTrackedEntityUpdate_ true;const to4326Transform this.to4326Transform;const toCesiumPosition function() {const geometry feature.getGeometry();console.assert(geometry instanceof olGeomPoint);const coo geometry.getCoordinates();const coo4326 to4326Transform(coo, undefined, coo.length);return ol4326CoordinateToCesiumCartesian(coo4326);};// Create an invisible point entity for tracking.// It is independant from the primitive/geometry created by the vector synchronizer.const options {position: new Cesium.CallbackProperty((time, result) toCesiumPosition(), false),point: {pixelSize: 1,color: Cesium.Color.TRANSPARENT}};this.trackedEntity this.dataSourceDisplay_.defaultDataSource.entities.add(options);}} }export default OLCesium; 这里是 ol-cesium 编译之后初始化二三维、二三维切换、二三维添加多边形、以及三维通过 viewer 添加点功能示例。 !DOCTYPE html html langen headmeta charsetUTF-8title二三维一体化示例/titlestylebody, html {/overflow-y: auto !important;/width: 100%;height: 100%;}.mapContainer {width: 100%;height: 98%;/display: flex;//display: inline;/}.outter {position: fixed;top: 10px;z-index: 999;}.mapContainerFull {width: 100%;height: 95%;}.mapContainerChild-two {width: 49.99%;height: 95%;float: left;border-right: 1px solid #1e9fff}.mapContainerChild-three {width: calc(100% - 49.99% - 1px);height: 95%;float: right;position: relative;}/注意, 如果想让map达到百分之100的宽高, 则map的左右父div需要保证百分之100宽高/.map {height: 100%;}.button-group {position: absolute;top: 10px;z-index: 9999;}/style /head bodydiv classmapdiv classmapContainerdiv classbutton-groupinput typebutton value二维 onClickchangeType(1) /input typebutton value三维 onClickchangeType(2) /input typebutton value二/三维 onClickchangeType() //div!–注意这里的样式名称要配合方法使用尽量不要修改可以添加额外样式–div idmapContainer classmapContainerChild-mapContainer-two mapContainerChild-two/divdiv idmapContainer2 classmapContainerChild-mapContainer-three mapContainerChild-three/div/div /div script typetext/javascript srchttps://www.openlayers.vip/apidoc/resources/jquery-3.6.0.min.js/scriptscript src./staticForMap/js/config.js/script script src./staticForMap/js/lssec.cesium.js/script /body /html script typetext/javascript// 二维对象、三维对象let ol2d, ol3d;function initMap() {// 自定义初始化二三维const GLMap new LSSEC.GLMap(mapContainer, mapContainer2);ol2d GLMap.ol2d;ol3d GLMap.ol3d;const wkt POLYGON((112.38882259396966 40.668378110616445,117.91494564084466 42.942548032491445,118.53018001584466 38.954510923116445,117.06899837521966 36.098065610616445,113.21279720334466 37.603192563741445,112.38882259396966 40.668378110616445));// 二维添加多边形自动同步至三维ol2d.addFeature(wkt);// 输出查看 viewer 对象console.log(ol3d.getViewer());// 三维通过 viewer 添加点ol3d.addPoint([116.27798275021966, 39.899335141866445]);}initMap();function changeType(flag) {if (flag 1) {\((.mapContainerChild-mapContainer-two).removeClass(mapContainerChild-two).addClass(mapContainerFull);\)(.mapContainerChild-mapContainer-three).removeClass(mapContainerFull).addClass(mapContainerChild-three);ol2d.updateSize();} else if (flag 2) {\((.mapContainerChild-mapContainer-two).removeClass(mapContainerFull).addClass(mapContainerChild-two);\)(.mapContainerChild-mapContainer-three).removeClass(mapContainerChild-three).addClass(mapContainerFull);} else {\((.mapContainerChild-mapContainer-two).removeClass(mapContainerFull).addClass(mapContainerChild-two);\)(.mapContainerChild-mapContainer-three).removeClass(mapContainerFull).addClass(mapContainerChild-three);}} /script 在线示例 ol-cesium 暴露 viewer 对象以及其他功能示例