QGis+PostGis+Geoserver+Cesium_天道酬勤~

网络投稿 02-07 5841

前言:

? ? ? ? 手把手,?教你怎么从QGis数据生产=>Postgis存储=>Geoserver?WMS接口发布=>Cesium?网页发布.

????????Cesium?说明:?如果是不需要大屏展示,?不需要做特效的,只专注于业务的,?非常适合,?开发速度极快,各种现成的行业工具应有尽有,例如测量/?三维规划/?方案预演/?直接与航空测量的超大三维Tiles?对接,?但如果需要大展展示,?需要特效,?则不适合在网页中实现,?使用?Cesium?配合 C++?的方式,以突破浏览器1.5G内存的限制,来实现.

1.?安装 QGIS

????????下载安装:?下载QGishttps://qgis.org/downloads/QGIS-OSGeo4W-3.16.13-3.msi

????????初始化参照:QGis 使用高德画KML_usdnfo的专栏-CSDN博客1、下载QGis并安装https://·/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali" }), "Cartocdn": new Cesium.UrlTemplateImageryProvider({ url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', }), "ArcGis": new Cesium.ArcGisMapServerImageryProvider({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' }), "Baidu": new BaiduImageryProvider({ url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1" }), "GaoDe":new Cesium.UrlTemplateImageryProvider({ url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", }), "GaoDe2":new Cesium.UrlTemplateImageryProvider({ url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}", }) };

Viewer.js

// 初始化Cesium视图 ABJ.Viewer.Fun.Init = function () { ABJ.Viewer.V = new Cesium.Viewer('CesiumContainer', { timeline: false, animation: false, vrButton: false, skyAtmosphere: false, sceneModePicker: true, geocoder: false, infoBox: true, imageryProvider: Viewer_ImageryProviderList.GaoDe, // 设置底图 baseLayerPicker: false }); ABJ.Viewer.V._cesiumWidget._creditContainer.style.display = "none"; ABJ.Viewer.V._cesiumWidget._supportsImageRenderingPixelated = Cesium.FeatureDetection.supportsImageRenderingPixelated(); ABJ.Viewer.V._cesiumWidget._forceResize = true; };

Geoserver.js

// 向当前视图添加KML ABJ.Geoserver.Fun.SetKmlOne = function (kmlFileUrl) { // 指定当前视图 let options = { camera: ABJ.Viewer.V.scene.camera, canvas: ABJ.Viewer.V.scene.canvas, }; // 如果已经存在则清除 if (ABJ.Geoserver.Data.KmlOne !== null) { ABJ.Viewer.V.dataSources.removeAll(); ABJ.Geoserver.Data.KmlOne = null; } // 执行添加 ABJ.Geoserver.Data.KmlOne = ABJ.Viewer.V.dataSources.add( Cesium.KmlDataSource.load( kmlFileUrl, options ) ); }

Camera.js

ABJ.Camera.Fun.Fly = function (de,di,fun,untime) { ABJ.Viewer.V.camera.flyTo({ destination :Cesium.Cartesian3.fromArray([de.x,de.y, de.z+10]), // 设置位置 orientation: { heading :di.heading, // 方向 pitch :di.pitch,// 倾斜角度 roll :di.roll }, duration:2, complete:function () { self.setTimeout(function(){ fun(); },untime); }, // pitchAdjustHeight:1000, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。 maximumHeight:100, // 相机最大飞行高度 }); };

Main.js

// ABJ.Main = function () { // 加载完成所有配置项中的资源后 // ABJ.DataAutoLod.Fun.Init(function () { // Cesium 视图初始化 ABJ.Viewer.Fun.Init(); //连接Geoserver ABJ.Geoserver.Fun.SetKmlOne("http://localhost:8080/geoserver/test_work/wms?service=WMS&version=1.1.0&request=GetMap&layers=test_work%3Atest_layer&bbox=110.27046245841392%2C25.250798376527673%2C110.31802880437051%2C25.270892210117772&width=768&height=330&srs=EPSG%3A4326&styles=&format=application%2Fvnd.google-earth.kml%2Bxml%3Bmode%3Dnetworklink"); //飞到这里 , 想要新角度 ? 使用Cesium获取既可. ABJ.Camera.Fun.Fly( { "x": -2162033.090310472, "y": 5726676.973082143, "z": 2779312.779700766 }, { "heading": 0.01814634369112955, "pitch": -1.3741685991069836, "roll": 6.283110594219279 },function (){},30000); // 初始化Cesium相机 // ABJ.Camera.Fun.Init(); // 初始化Cesium的鼠标 // ABJ.Mouse.Fun.Init(); // 初始化Cesium模型配置项 // ABJ.Models.Fun.Init(); // 初始化所有工具栏 : 测绘工具 \ 三维工具 \ 等等 // ABJ.Tools.Fun.Init(); // 初始化所有配置项中的窗口 // ABJ.ViewBox.Fun.Init(); // 初始化所有3dTile场景 // ABJ.TilesetScene.Fun.Init(); // 初始化Cesium标签的配置项 // ABJ.Label.Fun.Init(); // 初始化Cesium键盘的配置项 // ABJ.Keyboard.Fun.Init(); // 初始化资源树 // ABJ.FancyTree.Fun.Init(); // 接入OA平台 // ABJ.ViewBox.Fun.Open("OA", null); // 接入地信平台 // ABJ.ViewBox.Fun.Open("DX", null); // 初始化书籍平台,可用于标书制作 // ABJ.ViewBox.Book.Init(); // }); // }