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 3dtiles 加载本地数据_cesium结合geoserver实现地图空间查询(附源码下载)
weixin_39977276的博客
11-30 1109
前言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...
QGIS连接操作
最新发布
u014576749的博客
06-05 218
localhost为本地数据库，链接的数据库名为Mapdata，用户密码是PostGIS数据库的用户密码。URL添加发布地图路径即可，支持地图发布和地图切片连接。
【WebGIS】 矢量栅格可视化网页实践——基于cesium、geoserver、postgis
runepic的博客
08-23 2178
矢量数据借助postgis上传到postgre数据库，连同栅格数据发布到geoserver； 构建web项目，引入相关拓展库，使用的jsp仅为展示前端功能； 前端借助cesium调用地图服务加载地图
PostGIS空间数据表建立及Cesium可视化空间数据.docx
04-28
基于postgresql数据库，安装postgis插件后，创建空间数据表，并使用nodejs + express服务空间数据表，在前端采用Cesium加载空间数据，实现空间数据可视化
cesium学习记录03-QGis数据生产=＞Postgis存储=＞Geoserver发布=＞Cesium调用
木卯彳亍的博客
02-28 1557
Gis数据生产=>Postgis存储=>Geoserver 发布=>Cesium 调用
3DTiles数据
10-16
b3dm数据，能在Cesium显示，本人已测试，不同LOD的精心建模数据，josnset是根数据，
geoserver使用postgis数据进行矢量切片，并用openlayer加载
09-28 799
将shp数据导入postgis中 geoserver导入postgis数据 openlayer加载 有个问题，就是实时更新数据库中的数据后，之前已经切片过要素数据不会更新，而缩放另一个视图层级，数据又是更新的 <template> <div> <div id="map" style="width: 100vw; height: 100vh"></div> </div> </template....
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实现缩略图工程源码...
Cesium加载Geoserver跨域问题
10-15
https://blog.csdn.net/qq_40216244/article/details/109046931 ceslium加载Geoserver跨域问题方法步骤，真实有效。
postgresql+postgis.zip
03-03
此外，PostGIS还可以与其他GIS软件（如QGIS）集成，实现地图的可视化和编辑。 8. **安全与备份**：对于生产环境，务必对数据库进行定期备份，并设定适当的访问权限。PostgreSQL支持多种备份策略，如使用`pg_dump`和...
QGIS+postgresql操作
11-23
QGIS+postgresql操作，数据查询及导出导入 QGIS+postgresql操作，数据查询及导出导入 QGIS+postgresql操作，数据查询及导出导入
地理信息系统+qgis+软件安装包+处理地理空间数据
01-18
地理信息系统+qgis+软件安装包+处理地理空间数据 开源免费软件QGIS 3.16.15 处理多种数据源的空间数据，特别是shp文件
QGIS设计导出Geoserver服务使用的SLD样式
qq_37647812的博客
01-03 1209
利用QGIS桌面软件，设计shp图层样式，导出Geoserver服务使用的SLD样式
3-借助QGIS和Geoserver发布一个Shapefile
lovewhoilove
09-27 545
本节将用到的数据下载地址：https://docs.geoserver.org/latest/en/user/_downloads/30e405b790e068c43354367cb08e71bc/nyc_roads.zip，将其解压并放置在GeoServer安装目录的data_dir目录下（我这里的路径为C:\geoserver-2.19.2\data_dir，则数据的目录为C:\geoserver-2.19.2\data_dir\nyc_roads）。 1 创建一个Workspace Workspace
使用 QGIS 设置GeoServer栅格图层样式
GIS工具
04-10 1230
地理空间数据没有内在的可视化功能，必须对其进行样式设置才能在地图上直观地表示。默认情况下，GeoServer 使用称为样式层描述符 (SLD) 的标记语言来定义显示数据的样式规则。SLD 是一种基于 XML 的语言，允许用户和软件控制地理空间数据的视觉描绘。这种语言确保客户端和服务器都可以理解如何直观地呈现数据。添加样式要添加新样式，请导航至数据 > 样式页面，然后单击添加新样式链接。您将被重定向到新的样式页面，该页面与“样式编辑器数据”选项卡相同。
从零开始gis——(2)gis开发环境的搭建 qgis + geoserver + postgresql + postgis + openlayer
lqx_sunhan的博客
08-11 8258
1.gis开发都用什么? 最好用的一站式gis解决方案是esri公司的arcgis。 他提供了 arcgis desktop(绘图用的) + arcgis server(发布地图服务) + arcgis js api(做页面开发的js库) 功能强大,js api简单易用，不过这个并不是开源免费的，是收费的，不过破解版都有，大家可以自己去尝试，本篇文章不做细讲。 2.我们使用的技术栈...
1.（高级示例篇）leaflet+postgres+postgis+geoserver实现最短路径规划分析
GIS之家家长
04-26 1527
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 实现最短路径规划分析，其完整博客查看顺序： 3.（地图工具篇）GeoServer安装与启动 7.（地图工具篇）PostgreSQL 10.18软件安装详细教程 8.（地图工具篇）PostGIS 3.1.2软件安装详细教程 9.（地图工具篇）ArcMap处理路网数据成单线格式 10.（地图工具篇）PostgreSQL导入shape数据 11.（地图工
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、付费专栏及课程。

余额充值