geoserver 发布矢量切片服务，并使用leaflet 加载

最新推荐文章于 2024-05-24 13:29:39 发布

Li.map

最新推荐文章于 2024-05-24 13:29:39 发布

阅读量2.8k

点赞数 1

分类专栏： GIS开发

本文链接：https://blog.csdn.net/u012123612/article/details/98940602

版权

GIS开发专栏收录该内容

8 篇文章 1 订阅

订阅专栏

1.服务发布

（1）geoserver 连接mySql数据库:
下载插件：http://geoserver.org/release/2.14.5/；
现在mySql 支持的插件，以及矢量切片插件

在这里插入图片描述
插件解压放到：geoserver安装目录\webapps\geoserver\WEB-INF\lib下；
（2）连接数据库

（3）数据发布。连接成功后，选择图层–添加新的资源–选择数据源–找到数据–发布

填写基本参数，name，坐标系等，注意：数据需要有geometry（几何）字段。
例如：update lane set shape= geomfromtext(‘point(108.9465236664 34.2598766768)’)
在这里插入图片描述
勾选矢量切片格式，及坐标系

“保存”后，找到矢量切片地址：
单击geoserver图标–TMS

2.leaflet 加载矢量切片

leaflet 矢量切片插件下载
在这里插入图片描述
本文以Leaflet.VectorGrid为例，其他方式读者自行尝试
关键代码如下：

function vectorGridLayer(url, options) {
            let layerOptions = options || {};
            let vectorTileLayerStyles = {};
            layerOptions.renderFactory = layerOptions.renderFactory ? layerOptions.renderFactory : L.svg.tile;
            vectorTileLayerStyles[layerOptions.layerName] = options.vectorTileLayerStyles;
            layerOptions.vectorTileLayerStyles = vectorTileLayerStyles;
            let layer = L.vectorGrid.protobuf(url, layerOptions);
            return {
                layer: layer
            };
        };

    function getVectorTileLayer(){
            let url = 'http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/cite%3Alane_info@3857@pbf/{z}/{x}/{-y}.pbf';
            let localVectorTileOptions = {
                renderFactory: L.canvas.tile,
                layerName: 'lane_info',
                vectorTileLayerStyles: function (feature, zoom) {
                    let weight = 0;
                    let roadclass = feature.nroadclass;
                    //根据地图等级设置显示的矢量数据
                    if (zoom <= 13) {
                        if (roadclass == '41000' || roadclass == '42000' || roadclass == '43000') {
                            weight = 1;
                        } else {
                            weight = 0;
                        }
                    } else if (zoom < 17 && zoom > 13) {
                        if (roadclass == '41000' || roadclass == '42000' || roadclass == '43000' || roadclass == '44000') {
                            weight = 2;
                        } else {
                            weight = 0;
                        }
                    } else {
                        weight = 2;
                    }
                    //根据属性设置颜色
                    let color = feature.color;
                    let lineColor = '';
                    if (color == '1') {
                        lineColor = '#34b000';
                    } else if (color == '2') {
                        lineColor = '#fecb00';
                    } else if (color == '3') {
                        lineColor = '#df0100';
                    } else {
                        lineColor = '#8e0e0b';
                    }
                    return {
                        weight: weight,
                        color: lineColor || '#34b000'
                    };
                }
            };
            let vectorGridLayer = vectorGridLayer(url, localVectorTileOptions);
            return vectorGridLayer;
    }

    let vectorTileLayer=getVectorTileLayer();
    map.addLayer(vectorTileLayer);