QGis+PostGis+Geoserver+Cesium

已于 2022-09-05 10:51:18 修改
阅读量6.8k 收藏 59
点赞数 14
分类专栏： Gis 文章标签： qgis javascript postgis
于 2021-11-22 12:08:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/usdnfo/article/details/121461065
版权

前言:

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

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

1. 安装 QGIS

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

        初始化参照:QGis 使用高德 画KML_usdnfo的专栏-CSDN博客1、下载QGis并安装https://www.qgis.org/en/site/我的版本是：3.62、设置QGis的用户界面为中文菜单：Settings=>Options=>General把 【OverrideSystem Locale】 勾上将【User interface tranlation 】设置为：简体中文将【Locale （numbers, date and currency formats)】 设置为：Chinese China (zh_CN)关..https://blog.csdn.net/usdnfo/article/details/110436757

2. 安装PostGis

        1. 安装postgresql-:

Postgres14https://get.enterprisedb.com/postgresql/postgresql-14.1-1-windows-x64.exe

        2.安装PostGis

3. 安装GeoServer

Geoserver 2.20https://udomain.dl.sourceforge.net/project/geoserver/GeoServer/2.20.0/geoserver-2.20.0-bin.zip

4. QGis连接PostGis

        

5. QGIS 上传到Postgis

        数据制作方法：QGis 使用高德 画KML_usdnfo的专栏-CSDN博客

 

 

 

 6. 使用Geoserver发布Postgis数据

复制文件

 

 

 

 

 

 

 

 

 

 

 

 

7. Cesium 发布 Geoserver

下载Cesium

https://github.com/CesiumGS/cesium/releases/download/1.87.1/Cesium-1.87.1.ziphttps://github.com/CesiumGS/cesium/releases/download/1.87.1/Cesium-1.87.1.zip

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url(scripts/Cesium/Widgets/widgets.css);

        html, body {
            width: 100%;
            height: 100%;
            border: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #CesiumContainer {
            width: 50%;
            height: 50%;
            border: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="CesiumContainer" ></div>
</body>
<script src="scripts/jquery-3.4.1.min.js?id=2423"></script>
<script src="scripts/fancytree/jquery-ui.min.js?id=2423"></script>
<script defer src="resources/fontawesome/js/all.js?id=2423"></script>
<link href="scripts/fancytree/ui.fancytree.css" rel="stylesheet" class="skinswitcher">
<script src="scripts/fancytree/jquery.fancytree.js?id=2423"></script>
<script src="scripts/fancytree/jquery.fancytree.glyph.js?id=2423"></script>
<script src="scripts/fancytree/jquery.fancytree.childcounter.js?id=2423"></script>
<script src="scripts/fancytree/jquery.fancytree.wide.js?id=2423"></script>
<script src="scripts/popper.min.js?id=234234"></script>
<script src="scripts/bootstrap/js/bootstrap.min.js?id=2423"></script>

<script src="Build/Cesium/Cesium.js?id=234234"></script>

<script src="/lib/turn.js?id=234234"></script>
<script src="/lib/turn.html4.min.js?id=234234"></script>
<link rel="stylesheet" href="/scripts/book/css/basic.css">

<script src="scripts/ABJ_v5/Config.js?id=2423"></script>
<script src="scripts/ABJ_v5/Action.js?id=2423"></script>
<script src="scripts/ABJ_v5/Camera.js?id=2423"></script>
<script src="scripts/ABJ_v5/DataAutoLod.js?id=2423"></script>

<script src="scripts/ABJ_v5/Label.js?id=234234"></script>
<script src="scripts/ABJ_v5/Label_style_data.js?id=234234"></script>

<script src="scripts/ABJ_v5/LineRoute.js?id=234234"></script>
<script src="scripts/ABJ_v5/Models.js?id=234234"></script>
<script src="scripts/ABJ_v5/Project.js?id=234234"></script>
<script src="scripts/ABJ_v5/TilesetScene.js?id=234234"></script>

<script src="scripts/ABJ_v5/ViewBox.js?id=234234"></script>
<script src="scripts/ABJ_v5/ViewBox_style_data.js?id=234234"></script>

<script src="scripts/ABJ_v5/Baidu.js?id=234234"></script>
<script src="scripts/ABJ_v5/Viewer.js?id=234234"></script>
<script src="scripts/ABJ_v5/Viewer_ImageryProviderList.js?id=234234"></script>
<script src="scripts/ABJ_v5/Mouse.js?id=234234"></script>
<script src="scripts/ABJ_v5/Share_fun.js?id=234234"></script>

<script src="scripts/ABJ_v5/Keyboard.js?id=234234"></script>
<script src="scripts/ABJ_v5/ChildWindow.js?id=234234"></script>

<script src="scripts/ABJ_v5/Tools.js?id=234234"></script>
<script src="scripts/ABJ_v5/Tools_style_data.js?id=234234"></script>

<script src="scripts/ABJ_v5/FancyTree.js?id=234234"></script>
<script src="scripts/ABJ_v5/CZML.js?id=234234"></script>
<script src="scripts/ABJ_v5/TileClassType.js?id=234234"></script>
<script src="scripts/ABJ_v5/index_4.js?id=2346666"></script>
<script src="scripts/ABJ_v5/Book.js?id=234435fwef3345234"></script>


<script src="scripts/ABJ_v5/Main.js?id=234234"></script>
<script src="scripts/ABJ_v5/gaode.js?id=234234"></script>
</html>

Config.js

ABJ = {
    Viewer: {
        V: null,
        ImageryProviderList: {},
        Fun: {
            Init: null
        }
    },
    Camera: {
        FixedPosition: null,
        MoveStartFunList: {},
        MoveEndFunList: {},
        Fun: {
            Init: null,
            Fixed: null,
            Fly: null,
            FixedCancel: null
        }
    },
    Geoserver:{
        Data:{
            
        },
        Fun:{
            Init: null
        }

    },
    Project: {
        Data: [],
        Fun: {
            Init: null
        }
    },
    Models: {
        DataBase: {},
        Dp_models_config: {},
        Data: {},
        Type: {},
        Fun: {
            Init: null,
            Create: null,
            Dp_models_Show_ALl: null,
            Dp_models_Hide_ALl: null,
            Dp_models_Show_Name: null,
            Show_da_lou_for_name: null

        }
    },
    Tools: {
        Dom: null,
        Data: {},
        StyleData: {},
        Fun: {
            Init: null,
            Click: null,
            Show: null,
            Hide: null,
            ShowAll: null,
            HideAll: null,
            ShowHideSwitch: null,
            ClickDefault: null
        }
    },
    Mouse: {
        MouseHandler: {},
        MouseBind: {
            LEFT_CLICK: null,
            LEFT_DOUBLE_CLICK: null,
            LEFT_DOWN: null,
            LEFT_UP: null,
            MIDDLE_CLICK: null,
            MIDDLE_DOWN: null,
            MIDDLE_UP: null,
            MOUSE_MOVE: null,
            PINCH_END: null,
            PINCH_MOVE: null,
            PINCH_START: null,
            RIGHT_CLICK: null,
            RIGHT_DOWN: null,
            RIGHT_UP: null,
            WHEEL: null
        },
        Fun: {
            Init: null
        }
    },
    Menu: {
        Data: {},
        StyleData: {},
        Fun: {
            Init: null
        }
    },
    Label: {
            pinBuilder: new Cesium.PinBuilder(),
        Data: {},
        DataBase: {},
        StyleData: {},
        CreateUseData: {
            Name: "名称",
            Text: "说明",
            Description: " <button onclick='window.parent.ABJ.Label.Fun.ShowModelTilesName(\"\")'>显示模型</button> ",
            ModelTilesName: "不显示",
            Size: 48,
            Image: null,
            Color: Cesium.Color.BLACK,
            StyleName: null,
            StyleId: 0
        },
        Fun: {
            Init: null,
            Create: null,
            CreateAndAdd: null,
            StartCreate: null,
            ClickCreate: null,
            EndCreate: null,
            RefreshList: null,
            RemoveLabel: null,
            DataSave: null,
            HideAll: null,
            ShowAll: null,
            ShowName: null
        }
    },
    ViewBox: {
        Dom: null,
        Book:{
            book_fly:null,
            book_label_cr_label:null,
            book_loadApp:null,
            book_get:null,
            book_go_page:null,
            is_book:false
        },
        Data: {
            Book_label:[],
            Book_data:null,
            Book_data_all:null,
            Book_check_page:null,
            Book_kml:null
        },
        StyleData: {},
        ZongTaiShiObj: null,
        MouseFun: {
            move_objects: null,
            move_x: 0,
            move_y: 0,
            move_mouse_down_fun: null,
            move_mouse_up_fun: null,
            move_doc_mouse_move_fun: null,
            move_doc_mouse_up_fun: null,
            change_objects: null,
            change_x: 0,
            change_y: 0,
            change_w: 0,
            change_h: 0,
            change_mouse_down_fun: null,
            change_mouse_up_fun: null,
            change_doc_mouse_move_fun: null,
            change_doc_mouse_up_fun: null,
            change_size_fun: null

        },
        Fun: {
            Init: null,
            Open: null,
            JsToCesiumColor: null,
            RefreshList: null,
            ZongTaiShi: null
        }
    },
    TilesetScene: {
        Data: {},
        Fun: {
            Init: null
        }
    },
    Action: {
        Data: {},
        Fun: {
            Init: null,
            Action_TackCamera_fun_sdfwefvsef: null,
            TakeCamera: null,
            CancelTakeCamera: null
        }
    },
    LineRoute: {
        Data: [],
        StyleData: {},
        Fun: {
            Init: null
        }
    },
    DataAutoLod: {
        LoadingNm: 0,
        LoadingArrLock: false,
        LoadingTimeCheck: null,
        Fun: {
            Init: null,
            LoadData: null,
            LoadDataArr: null
        }
    },
    Keyboard: {
        EntityObjects: null,
        Fun: {
            Init: null,
            keydown: null,
            keypress: null,
            keyup: null,
            w: null,
            s: null,
            a: null,
            d: null,
            q: null,
            e: null,
            Numpad8: null,
            Numpad5: null,
            Numpad4: null,
            Numpad6: null,
            Numpad7: null,
            Numpad9: null,
            z: null,
            x: null
        }
    },
    ChildWindow: {
        objects: null,
        Fun: {
            Open: null,
            JK: null
        }
    },
    FancyTree: {
        DingZhiObjects: null,
        FanSourceJson: [],
        objects: null,
        Fun: {
            Init: null,
            Refresh: null,
            _svg: null
        }
    },
    CZML: {
        Entity: null,
        PositionProperty: null,
        FilesData: null,
        Fun: {
            Init: null
        }
    },
    TileClassType: {
        ClassTypeTileData: null,
        Geometry: {
            Rectangle: {
                Step: 0,
                DegreesArrayHeights: [

                    ],
                objects: null
            }
        },
        Fun: {}
    }
};

Viewer_ImageryProviderList.js

// 所有可用的底图
Viewer_ImageryProviderList = {
    "Google": new Cesium.UrlTemplateImageryProvider({
        url: "https://mt1.google.cn/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();
//     });
// }

 

天道酬勤~
关注
  • 14
    点赞
  • 踩
  • 59
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
Cesium加载Geoserver跨域问题
10-15
https://blog.csdn.net/qq_40216244/article/details/109046931 ceslium加载Geoserver跨域问题方法步骤，真实有效。
geoserver使用postgis数据进行矢量切片，并用openlayer加载
09-28 796
将shp数据导入postgis中 geoserver导入postgis数据 openlayer加载 有个问题，就是实时更新数据库中的数据后，之前已经切片过要素数据不会更新，而缩放另一个视图层级，数据又是更新的 <template> <div> <div id="map" style="width: 100vw; height: 100vh"></div> </div> </template....
qgis设置geoServer图层样式
最新发布
IT_moshang的博客
06-17 189
layers面板可以通过view ->panels->layers Panel 打开。导入成功后，可以在layers中看到该图层。第一步： 在qgis中导入图层shp文件。第四步 将样式文件导入geoServer。选择图层，右键选择图层属性。保存style为sld文件。第三步：设置图层样式。
cesium 3dtiles 加载本地数据_cesium结合geoserver实现地图空间查询(附源码下载)
weixin_39977276的博客
11-30 1108
前言cesium 官网的api文档介绍地址cesium官网api，里面详细的介绍 cesium 各个类的介绍，还有就是在线例子：cesium 官网在线例子，这个也是学习 cesium 的好素材。内容概览1.cesium 结合 geoserver 实现地图空间查询2.源代码 demo 下载效果图如下：实现思路：首先利用 geoserver 发布的图斑 WFS 服务，通过 url 的 rest 请求，...
geoserver+postgis开发环境搭建，再加cesuim
henjuewang的博客
05-16 1184
geoserver1.下载jre 8.0 http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html注意9.0不支持，不需要Jdk2.下载geoserver  http://docs.geoserver.org/latest/en/user/installation/win_installe...
【WebGIS】 矢量栅格可视化网页实践——基于cesium、geoserver、postgis
runepic的博客
08-23 2175
矢量数据借助postgis上传到postgre数据库，连同栅格数据发布到geoserver； 构建web项目，引入相关拓展库，使用的jsp仅为展示前端功能； 前端借助cesium调用地图服务加载地图
从零开始学GeoServer源码九（如何集成Cesium以实现预览3dtiles和terrain服务？）
AIGIS的博客
05-24 3133
这里写目录标题1.前言2.思路3.准备一个预览页面4.在静态页面准备一个a标签跳转并传值5.完善静态页面5.1 获取要预览服务的唯一编号previewId5.2 准备加载3dtiles和terrain的函数5.3 发ajax获取服务的url6. 补全预览页面需要的Cesium依赖7.看看预览时的效果8.总结 1.前言   在第七篇中我们讲了如何使用 GeoServer 发布 3dtiles 和 terrain 文件，在那一篇中，我们最终实现了发布功能，但预览功能还是需要在 Cesium 的工程里去手动添加预
从零开始学GeoServer源码七（如何注册服务并发布3dtiles和cesium的地形terrain？）
AIGIS的博客
04-07 7626
  本来发布 3dtiles 和 cesium 的 terrain 文件并不是一定要依赖于 GeoServer ，使用 IIS 或者 Tomcat 都可以，但是发布服务，我习惯了使用 GeoServer ，因此，也就将这些功能整合到 GeoServer 里，方便自己使用。  发布 3dtiles 和 terrain 文件的本质，都是可以通过浏览器访问静态资源，我们知道 3dtiles 有四种格式，分别为 i3dm 、b3dm、pnts、cmpt。而 terrain 文件则是 cesium 的 quanti
PostGIS空间数据表建立及Cesium可视化空间数据.docx
04-28
基于postgresql数据库，安装postgis插件后，创建空间数据表，并使用nodejs + express服务空间数据表，在前端采用Cesium加载空间数据，实现空间数据可视化
GeoServer测试数据
03-24
NULL 博文链接：https://xnbhnly.iteye.com/blog/1075726
3dtiles
Zsh00058555的博客
03-22 1414
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结什么是3D Tiles数据？地图服务标准常见的标准正式学习准备工作CesiumWidgetModel图元Entity图元DataSourcesCostom DataSource数据BillboardPrimitive图元GeometryInstanceAppearance贴图效果ClassificationCameraWidget和Viewer的区别Property.
3DTiles数据
10-16
b3dm数据，能在Cesium显示，本人已测试，不同LOD的精心建模数据，josnset是根数据，
cesium-3d-tile/倾斜摄影超大场景（14GB）
05-13
超大倾斜摄影模型,由倾斜摄影osgb转换的3Dtiles格式，cesium可直接使用，亲测可用，模型为国内某一个景区摄影，高精度，范围广。
geoserver+postgis+openlayers 空间要素的增删改
06-13
geoserver+postgis+openlayers 空间要素的增删改功能，具体还可参考https://blog.csdn.net/rrrrroy_Ha/article/details/90904465
QGis+qt实现缩略图工程源码，没有运行环境，需自己配置运行环境
07-23
QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码QGis+qt实现缩略图工程源码...
postgresql+postgis.zip
03-03
此外，PostGIS还可以与其他GIS软件（如QGIS）集成，实现地图的可视化和编辑。 8. **安全与备份**：对于生产环境，务必对数据库进行定期备份，并设定适当的访问权限。PostgreSQL支持多种备份策略，如使用`pg_dump`和...
QGIS+postgresql操作
11-23
QGIS+postgresql操作，数据查询及导出导入 QGIS+postgresql操作，数据查询及导出导入 QGIS+postgresql操作，数据查询及导出导入
【GeoServer】当成一个文件资源服务器来用（发布地形）
...
05-24 1338
介绍了一下怎么把一些非图层文件的静态资源（比如说地形数据）放到GeoServer来用。
cesium学习记录03-QGis数据生产=＞Postgis存储=＞Geoserver发布=＞Cesium调用
木卯彳亍的博客
02-28 1553
Gis数据生产=>Postgis存储=>Geoserver 发布=>Cesium 调用
leaflet+geoserver+postgis
05-19
Leaflet是一个基于Web的交互式地图库，Geoserver是一个开源的地理空间数据服务器，PostGIS是一个基于PostgreSQL的地理空间数据库扩展。 在使用Leaflet、Geoserver和PostGIS来构建Web GIS应用程序时，通常的工作流程如下： 1. 准备地理空间数据并将其加载到PostGIS数据库中。 2. 配置Geoserver以访问PostGIS数据库，并将数据发布为Web服务。 3. 在Leaflet中编写JavaScript代码，以访问Geoserver中发布的Web服务，并在Web页面上呈现地图。 具体步骤如下： 1. 准备地理空间数据并将其加载到PostGIS数据库中。 首先，需要安装PostgreSQL和PostGIS扩展。然后，在PostgreSQL数据库中创建一个新的数据库，并在该数据库中启用PostGIS扩展。接下来，使用QGIS等GIS软件来创建或导入地理空间数据，并将其保存为PostGIS支持的格式（例如Shapefile）。最后，使用PostgreSQL客户端工具（例如pgAdmin）将地理空间数据加载到PostGIS数据库中。 2. 配置Geoserver以访问PostGIS数据库，并将数据发布为Web服务。 打开Geoserver的Web界面，在数据存储中添加新的PostGIS数据库，并配置数据库连接参数。然后，在Geoserver中创建工作区和数据图层，并将其发布为Web服务。在此过程中，可以选择不同的发布格式（例如WMS、WFS等）和地图样式（例如SLD文件）。 3. 在Leaflet中编写JavaScript代码，以访问Geoserver中发布的Web服务，并在Web页面上呈现地图。 在HTML页面中引入Leaflet库和Leaflet插件（例如Leaflet.markercluster）。然后，在JavaScript代码中编写Leaflet地图对象，并使用Ajax请求访问Geoserver中发布的Web服务。最后，将地图对象添加到HTML页面中，以呈现交互式地图。 总之，Leaflet、Geoserver和PostGIS可以一起使用来构建功能强大的Web GIS应用程序，可以实现从数据管理到地图呈现的全流程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天道酬勤~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值