使用Openlayers绘制Geoserver离线瓦片

最新推荐文章于 2023-06-09 12:48:44 发布
最新推荐文章于 2023-06-09 12:48:44 发布
阅读量1k 收藏 3
点赞数
分类专栏： Geoserver 文章标签： Geoserver
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xbw12138/article/details/110149307
版权

需求

将遥感影像tif数据通过Geoserver进行发布，为了加快服务器响应速度，我们使用Geoserver对遥感数据做了缓存处理，如下图，使用离线瓦片，我这里出现了中文不识别的问题，因此没法直接Submit去执行切片任务，F12查看元素，修改一下Form表单里的参数，将不正常显示的文字修改为实际的中文，再点Submit就提交成功了，要注意该页面有两个表单提交的地方，要修改对应的地方才可以。
在这里插入图片描述
在这里插入图片描述

代码

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="imagetoolbar" content="no">
    <title>武汉市疫情反演</title>
    <link rel="stylesheet" href="assets/css/main.css" type="text/css">
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/ol.js"></script>
    <link rel='stylesheet' href='assets/css/ol.css' type='text/css'>
    <script src="assets/js/ol3-layerswitcher.js"></script>
    <link rel="stylesheet" href="assets/css/ol3-layerswitcher.css" type="text/css">
    <!-- 参数 -->
    <script type="text/javascript">
        //示例标注点武汉市的信息对象
        var featuerInfo = {
            marker: [116.17356, 34.7716],
            name: 'XX医院'
        }

        var keyLabel = {
            'b': 'XX医院',
            'n': 'XX医院',
            'w': 'XX医院',
            'c': 'XX医院',
            'x': 'XX医院'
        }
        // 数据三
        var name = '疫情';
        var workspace = 'b';
        var legend = 'b';
        var city = '武汉市';
        var time = '2020';
        var layer = city + '_' + time;
        var isGradient = false;

        var mapSource = {
            legend: {
                url: 'http://127.0.0.1:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=application/json&STRICT=false&style=',
                layer: workspace + ':' + legend,
                isGradient: isGradient,
            },
            base: {
                url: 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=4f62e1d82bd46e2ff470b291c2260156',
                name: '地图'
            },
            label: {
                url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=4f62e1d82bd46e2ff470b291c2260156',
                name: '注记'
            },
            yaogan: {
                url: 'http://127.0.0.1:8080/geoserver/gwc/service/wms',
                name: name + '_' + layer,
                layer: workspace + ':' + layer
            },
            river: 'http://127.0.0.1:6075/basic_query/river_query/river_jjj',
            bound: 'http://127.0.0.1:6075/public/geo_bound/bound?workspace=' + workspace + '&layer=' + layer
        }
    </script>

    <!-- 初始化地图 -->
    <script type="text/javascript">
        var projection = new ol.proj.Projection({
            code: 'EPSG:4326',
            units: 'degrees',
            axisOrientation: 'neu'
        });

        $(function () {
            function ScaleControl(opt_options) {
                var options = opt_options || {};

                var element = document.createElement('div');
                element.setAttribute('id', 'scale');
                element.className = 'ol-scale-value';

                ol.control.Control.call(this, {
                    element: element,
                    target: options.target
                });
            };
            ol.inherits(ScaleControl, ol.control.Control);
            ScaleControl.prototype.setMap = function (map) {
                map.on('postrender', function () {
                    var view = map.getView();
                    var resolution = view.getResolution();
                    var dpi = 90.71428571428572;
                    var mpu = map.getView().getProjection().getMetersPerUnit();
                    var scale = resolution * mpu * 39.37 * dpi;

                    if (scale >= 9500 && scale <= 950000) {
                        scale = Math.round(scale / 1000) + 'K';
                    } else if (scale >= 950000) {
                        scale = Math.round(scale / 1000000) + 'M';
                    } else {
                        scale = Math.round(scale);
                    }
                    document.getElementById('scale').innerHTML = 'Scale = 1 : ' + scale;
                }, this);
                ol.control.Control.prototype.setMap.call(this, map);
            }

            function ZoomControl(opt_options) {
                var options = opt_options || {};

                var element = document.createElement('div');
                element.setAttribute('id', 'zoom');
                element.className = 'ol-zoom-value';

                ol.control.Control.call(this, {
                    element: element,
                    target: options.target
                });

            };
            ol.inherits(ZoomControl, ol.control.Control);
            ZoomControl.prototype.setMap = function (map) {
                map.on('moveend', function () {
                    var view = map.getView();
                    document.getElementById('zoom').innerHTML = 'Zoom level = ' + view.getZoom();
                }, this);
                ol.control.Control.prototype.setMap.call(this, map);
            }

            var view = new ol.View({
                center: [0, 0],
                zoom: 2,
                projection: projection,
                extent: [-180.0, -90.0, 180.0, 90.0]
            });

            var map = new ol.Map({
                controls: ol.control.defaults({ attribution: false }).extend([
                    new ol.control.MousePosition(),
                    new ScaleControl(),
                    new ZoomControl()
                ]),
                layers: [],
                target: 'map',
                view: view
            });

            map.getView().fit(getBound(mapSource.bound), map.getSize());

            // 获取图例
            // 渐变图例，用于特征污染物空间分布
            getLegend(mapSource.legend.url, mapSource.legend.layer, mapSource.legend.isGradient)

            // 创建图层
            layerBase = getlayerBase(mapSource.base.url, mapSource.base.name);
            layerLabel = getlayerLabel(mapSource.label.url, mapSource.label.name);
            layerYaogan = getlayerYaogan(mapSource.yaogan.url, mapSource.yaogan.name, mapSource.yaogan.layer);

            // 创建marker
            layerMarker = getlayerMarker(featuerInfo);

            // 添加图层
            map.addLayer(layerBase);
            map.addLayer(layerLabel);
            map.addLayer(layerMarker);

            // 添加多条河流图层
            map.addLayer(getlayerRiver(mapSource.river));

            // 遥感影像图层
            map.addLayer(layerYaogan);

            // 图层选择
            map.addControl(new ol.control.LayerSwitcher());
            // 图层事件
            setEventPopup(map);
        });
    </script>

    <!-- 创建图层 -->
    <script type="text/javascript">
        // 创建地图图层
        function getlayerBase(url, title) {
            return new ol.layer.Tile({
                title: title,
                type: 'base',
                visible: true,
                source: new ol.source.XYZ({
                    url: url,
                    wrapX: false
                })
            });
        }

        // 创建注记图层
        function getlayerLabel(url, title) {
            return new ol.layer.Tile({
                title: title,
                visible: true,
                source: new ol.source.XYZ({
                    url: url,
                    wrapX: false
                })
            });
        }

        // 获取河流绘制风格
        function getRiverStyle(title) {
            return new ol.style.Style({
                stroke: new ol.style.Stroke({ //边界样式
                    color: '#0000FF',
                    width: 2
                }),
                text: new ol.style.Text({
                    text: title,
                    fill: new ol.style.Fill({ color: '#aa3300' }),
                    stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 })
                })
            });
        }

        // 创建河流图层
        function getlayerRiver(url) {
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                async: false,
                success: function (data) {
                    layerRiverArray = []
                    $.each(data.resData, function (i, item) {
                        layerRiverArray.push(
                            new ol.layer.Vector({
                                title: item.properties.name,
                                source: new ol.source.Vector({
                                    features: (new ol.format.GeoJSON()).readFeatures(item)
                                }),
                                style: getRiverStyle(item.properties.name)
                            })
                        )
                    });
                }
            });

            return new ol.layer.Group({
                title: '京津冀河流',
                layers: layerRiverArray
            });
        }

        // 创建遥感图层
        function getlayerYaogan(url, title, layerName) {
            return new ol.layer.Tile({
                title: title,
                visible: true,
                source: new ol.source.TileWMS({
                    url: url,
                    params: { 'LAYERS': layerName, 'VERSION': '1.1.1' },
                })
            });
        }

        // 创建marker图层
        function getlayerMarker(featuerInfo) {
            var createLabelStyle = getcreateLabelStyle();
            var iconFeature = new ol.Feature({
                //坐标点
                geometry: new ol.geom.Point(featuerInfo.marker),
                //名称属性
                name: featuerInfo.name,
            });
            iconFeature.setStyle(createLabelStyle(iconFeature));

            //矢量标注图层
            return new ol.layer.Vector({
                title: '标记点',
                visible: true,
                source: new ol.source.Vector({
                    features: [iconFeature]
                })
            });
        }
    </script>

    <!-- 创建marker -->
    <script type="text/javascript">
        // 图标样式
        function getcreateLabelStyle() {
            return function (feature) {
                return new ol.style.Style({
                    image: new ol.style.Icon(
                        /** @type {olx.style.IconOptions} */
                        {
                            //设置图标点
                            anchor: [0.5, 60],
                            //图标起点
                            anchorOrigin: 'top-right',
                            //指定x值为图标点的x值
                            anchorXUnits: 'fraction',
                            //指定Y值为像素的值
                            anchorYUnits: 'pixels',
                            //偏移
                            offsetOrigin: 'top-right',
                            // offset:[0,10],
                            //图标缩放比例
                            scale: 0.5,
                            //透明度
                            opacity: 1.0,
                            //图标的url
                            src: 'assets/image/marker.png'
                        }),
                    text: new ol.style.Text({
                        //位置
                        textAlign: 'center',
                        //基准线
                        textBaseline: 'middle',
                        //文字样式
                        font: 'normal 14px 微软雅黑',
                        //文本内容
                        text: feature.get('name'),
                        //文本填充样式（即文字颜色）
                        fill: new ol.style.Fill({ color: '#aa3300' }),
                        stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 })
                    })
                });
            }
        }

        // 点击事件
        function setEventPopup(map) {
            var container = document.getElementById("popup");
            var content = document.getElementById("popup-content");
            var popupCloser = document.getElementById("popup-closer");

            var overlay = new ol.Overlay({
                element: container,
                autoPan: true
            });

            map.on('click', function (e) {
                var pixel = map.getEventPixel(e.originalEvent);
                map.forEachFeatureAtPixel(pixel, function (feature) {
                    var coodinate = e.coordinate;
                    content.innerHTML = '<p class="markerText">' + feature.values_.name + '</p><br><p>' + coodinate + '</p>';
                    overlay.setPosition(coodinate);
                    map.addOverlay(overlay);
                });
            });

            popupCloser.addEventListener('click', function () {
                overlay.setPosition(undefined);
            });
        }
    </script>

    <!-- 获取边界 -->
    <script type="text/javascript">
        function getBound(url) {
            $.ajax({
                type: "GET",
                url: url,
                dataType: "json",
                async: false,
                success: function (data) {
                    array_bound = [data.resData.minx, data.resData.miny, data.resData.maxx, data.resData.maxy]
                }
            });
            return array_bound;
        }
    </script>

    <!-- 图例 -->
    <script type="text/javascript">
        // 创建图例
        // isGradient 是否是渐变色
        function getLegend(url, layer, isGradient) {
            $.ajax({
                type: "GET",
                url: url + layer,
                dataType: "json",
                success: function (data) {
                    var label_array = data.Legend[0].rules[0].symbolizers[0].Raster.colormap.entries;
                    // 图例分为渐变与正常图例
                    if (isGradient) {
                        var background_image = "linear-gradient(";
                        var startValue = "";
                        var endValue = "";
                        $.each(label_array, function (i, item) {
                            if (item.opacity == "1.0") {
                                if (item.label != "") {
                                    if (startValue == "") {
                                        startValue = item.label;
                                    } else if (startValue != "" && endValue == "") {
                                        endValue = item.label;
                                    }
                                }
                                background_image += item.color;
                                background_image += ",";
                            }
                        });
                        $("#label").css("background-image", background_image.substr(0, background_image.length - 1) + ")");
                        $("#label_min").text(startValue);
                        $("#label_max").text(endValue);
                    } else {
                        $("#table").html('');
                        $.each(label_array, function (i, item) {
                            if (item.opacity == "1.0") {
                                $("#table").append($('<tr><td style="background-color: ' + item.color + ';">' + keyLabel[item.label] + '</td></tr>'));
                            }
                        });
                    }
                }
            });
        }
    </script>
</head>

<body>
    <!-- Content here -->
    <div id="map">
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content">
            </div>
        </div>
    </div>
    <div id="labels">
        <div id="label" class="my-label-value">
            <table id="table" style="background-color:azure;"></table>
        </div>
        <label id="label_min" class="my-label-min-value"></label>
        <label id="label_max" class="my-label-max-value"></label>
    </div>
</body>

</html>

最终效果

在这里插入图片描述

后期完善代码

修改后可以根据按钮选择不同的模块进行整体数据切换，更加灵活

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="imagetoolbar" content="no">
    <title>遥感监测Demo</title>
    <link rel="stylesheet" href="assets/css/main.css" type="text/css">
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/ol.js"></script>
    <link rel='stylesheet' href='assets/css/ol.css' type='text/css'>
    <script src="assets/js/ol3-layerswitcher.js"></script>
    <link rel="stylesheet" href="assets/css/ol3-layerswitcher.css" type="text/css">
    <!-- 参数 -->
    <script type="text/javascript">
        var keyLabel = {
            '敏感数据': '敏感数据',
            '敏感数据': '敏感数据',
            '敏感数据': '敏感数据',
        }

        var baseSource = {
            base: {
                url: 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=4f62e1d82bd46e2ff470b291c2260156',
                name: '地图'
            },
            label: {
                url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=4f62e1d82bd46e2ff470b291c2260156',
                name: '注记'
            },
            river: "http://127.0.0.1:6075/basic_query/river_query/river_jjj"
        }
    </script>

    <!-- 初始化地图 -->
    <script type="text/javascript">
        var projection = new ol.proj.Projection({
            code: 'EPSG:4326',
            units: 'degrees',
            axisOrientation: 'neu'
        });

        $(function () {
            function ScaleControl(opt_options) {
                var options = opt_options || {};

                var element = document.createElement('div');
                element.setAttribute('id', 'scale');
                element.className = 'ol-scale-value';

                ol.control.Control.call(this, {
                    element: element,
                    target: options.target
                });
            };
            ol.inherits(ScaleControl, ol.control.Control);
            ScaleControl.prototype.setMap = function (map) {
                map.on('postrender', function () {
                    var view = map.getView();
                    var resolution = view.getResolution();
                    var dpi = 90.71428571428572;
                    var mpu = map.getView().getProjection().getMetersPerUnit();
                    var scale = resolution * mpu * 39.37 * dpi;

                    if (scale >= 9500 && scale <= 950000) {
                        scale = Math.round(scale / 1000) + 'K';
                    } else if (scale >= 950000) {
                        scale = Math.round(scale / 1000000) + 'M';
                    } else {
                        scale = Math.round(scale);
                    }
                    document.getElementById('scale').innerHTML = 'Scale = 1 : ' + scale;
                }, this);
                ol.control.Control.prototype.setMap.call(this, map);
            }

            function ZoomControl(opt_options) {
                var options = opt_options || {};

                var element = document.createElement('div');
                element.setAttribute('id', 'zoom');
                element.className = 'ol-zoom-value';

                ol.control.Control.call(this, {
                    element: element,
                    target: options.target
                });

            };
            ol.inherits(ZoomControl, ol.control.Control);
            ZoomControl.prototype.setMap = function (map) {
                map.on('moveend', function () {
                    var view = map.getView();
                    document.getElementById('zoom').innerHTML = 'Zoom level = ' + view.getZoom();
                }, this);
                ol.control.Control.prototype.setMap.call(this, map);
            }

            var view = new ol.View({
                center: [0, 0],
                zoom: 2,
                projection: projection,
                extent: [-180.0, -90.0, 180.0, 90.0]
            });

            map = new ol.Map({
                controls: ol.control.defaults({ attribution: false }).extend([
                    new ol.control.MousePosition(),
                    new ScaleControl(),
                    new ZoomControl()
                ]),
                layers: [],
                target: 'map',
                view: view
            });

            // 这个默认边界不用改
            map.getView().fit([116.72650652077483, 39.6152906023194, 117.18901780224532, 39.9895594296541], map.getSize());

            // 创建图层
            layerBase = getlayerBase(baseSource.base.url, baseSource.base.name);
            map.addLayer(layerBase);

            layerLabel = getlayerLabel(baseSource.label.url, baseSource.label.name);
            map.addLayer(layerLabel);

            // 添加多条河流图层
            map.addLayer(getlayerRiver(baseSource.river));

            // 图层选择
            map.addControl(new ol.control.LayerSwitcher());
            // 图层事件
            setEventPopup(map);
        });
    </script>

    <!-- 创建图层 -->
    <script type="text/javascript">
        // 创建地图图层
        function getlayerBase(url, title) {
            return new ol.layer.Tile({
                title: title,
                type: 'base',
                visible: true,
                source: new ol.source.XYZ({
                    url: url,
                    wrapX: false
                })
            });
        }

        // 创建注记图层
        function getlayerLabel(url, title) {
            return new ol.layer.Tile({
                title: title,
                visible: true,
                source: new ol.source.XYZ({
                    url: url,
                    wrapX: false
                })
            });
        }

        // 获取河流绘制风格
        function getRiverStyle(title) {
            return new ol.style.Style({
                stroke: new ol.style.Stroke({ //边界样式
                    color: '#0000FF',
                    width: 2
                }),
                // text: new ol.style.Text({
                //     text: title,
                //     fill: new ol.style.Fill({ color: '#aa3300' }),
                //     stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 })
                // })
            });
        }

        // 创建河流图层
        function getlayerRiver(url) {
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                async: false,
                success: function (data) {
                    layerRiverArray = []
                    $.each(data.resData, function (i, item) {
                        layerRiverArray.push(
                            new ol.layer.Vector({
                                title: item.properties.name,
                                source: new ol.source.Vector({
                                    features: (new ol.format.GeoJSON()).readFeatures(item)
                                }),
                                style: getRiverStyle(item.properties.name)
                            })
                        )
                    });
                }
            });

            return new ol.layer.Group({
                title: '敏感数据',
                layers: layerRiverArray
            });
        }

        // 创建遥感图层
        function getlayerYaogan(url, title, layerName) {
            return new ol.layer.Tile({
                title: title,
                visible: true,
                source: new ol.source.TileWMS({
                    url: url,
                    params: { 'LAYERS': layerName, 'VERSION': '1.1.1' },
                })
            });
        }

        // 创建marker图层
        function getlayerMarker(featuerInfo) {
            var createLabelStyle = getcreateLabelStyle();
            var iconFeature = new ol.Feature({
                //坐标点
                geometry: new ol.geom.Point(featuerInfo.marker),
                //名称属性
                name: featuerInfo.name,
            });
            iconFeature.setStyle(createLabelStyle(iconFeature));

            //矢量标注图层
            return new ol.layer.Vector({
                title: featuerInfo.name,
                visible: true,
                source: new ol.source.Vector({
                    features: [iconFeature]
                })
            });
        }
    </script>

    <!-- 创建marker -->
    <script type="text/javascript">
        // 图标样式
        function getcreateLabelStyle() {
            return function (feature) {
                return new ol.style.Style({
                    image: new ol.style.Icon(
                        /** @type {olx.style.IconOptions} */
                        {
                            //设置图标点
                            anchor: [0.5, 60],
                            //图标起点
                            anchorOrigin: 'top-right',
                            //指定x值为图标点的x值
                            anchorXUnits: 'fraction',
                            //指定Y值为像素的值
                            anchorYUnits: 'pixels',
                            //偏移
                            offsetOrigin: 'top-right',
                            // offset:[0,10],
                            //图标缩放比例
                            scale: 0.5,
                            //透明度
                            opacity: 1.0,
                            //图标的url
                            src: 'assets/image/marker.png'
                        }),
                    // text: new ol.style.Text({
                    //     //位置
                    //     textAlign: 'center',
                    //     //基准线
                    //     textBaseline: 'middle',
                    //     //文字样式
                    //     font: 'normal 14px 微软雅黑',
                    //     //文本内容
                    //     text: feature.get('name'),
                    //     //文本填充样式（即文字颜色）
                    //     fill: new ol.style.Fill({ color: '#aa3300' }),
                    //     stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 })
                    // })
                });
            }
        }

        function setEventPopup(map) {
            var container = document.getElementById("popup");
            var content = document.getElementById("popup-content");
            var popupCloser = document.getElementById("popup-closer");

            var overlay = new ol.Overlay({
                element: container,
                autoPan: true
            });

            map.on('click', function (e) {
                var pixel = map.getEventPixel(e.originalEvent);
                map.forEachFeatureAtPixel(pixel, function (feature) {
                    var coodinate = e.coordinate;
                    content.innerHTML = '<p class="markerText">' + feature.values_.name + '</p><br><p>' + coodinate + '</p>';
                    overlay.setPosition(coodinate);
                    map.addOverlay(overlay);
                });
            });

            popupCloser.addEventListener('click', function () {
                overlay.setPosition(undefined);
            });
        }
    </script>

    <!-- 获取边界 -->
    <script type="text/javascript">
        function getBound(url) {
            $.ajax({
                type: "GET",
                url: url,
                dataType: "json",
                async: false,
                success: function (data) {
                    array_bound = [data.resData.minx, data.resData.miny, data.resData.maxx, data.resData.maxy]
                }
            });
            return array_bound;
        }
    </script>

    <!-- 获取marker数据 -->
    <script type="text/javascript">
        function getMarker(url) {
            $.ajax({
                type: "GET",
                url: url,
                dataType: "json",
                async: false,
                success: function (data) {
                    markerArray = []
                    $.each(data.resData.resList, function (i, item) {
                        markerArray.push({
                            "id": item.waterCode,
                            "name": item.waterName,
                            "marker": [item.longitude, item.latitude]
                        })
                    });
                }
            });
            return markerArray;
        }
    </script>

    <!-- 图例 -->
    <script type="text/javascript">
        // 创建图例
        // isGradient 是否是渐变色
        function getLegend(url, layer, isGradient) {
            $.ajax({
                type: "GET",
                url: url + layer,
                dataType: "json",
                success: function (data) {
                    var label_array = data.Legend[0].rules[0].symbolizers[0].Raster.colormap.entries;
                    // 图例分为渐变与正常图例
                    if (isGradient) {
                        var background_image = "linear-gradient(";
                        var startValue = "";
                        var endValue = "";
                        $.each(label_array, function (i, item) {
                            if (item.opacity == "1.0") {
                                if (item.label != "") {
                                    if (startValue == "") {
                                        startValue = item.label;
                                    } else if (startValue != "" && endValue == "") {
                                        endValue = item.label;
                                    }
                                }
                                background_image += item.color;
                                background_image += ",";
                            }
                        });
                        $("#table").html('');
                        $("#label").css("background-image", background_image.substr(0, background_image.length - 1) + ")");
                        $("#label_min").text(startValue);
                        $("#label_max").text(endValue);
                    } else {
                        $("#table").html('');
                        $.each(label_array, function (i, item) {
                            if (item.opacity == "1.0") {
                                $("#table").append($('<tr><td style="background-color: ' + item.color + ';">' + keyLabel[item.label] + '</td></tr>'));
                            }
                        });
                        $("#label").removeAttr("style");
                        $("#label_min").text("");
                        $("#label_max").text("");
                    }
                }
            });
        }
    </script>
    <script type="text/javascript">
        // 创建图层
        function createLayer(workspace, legend, layer, name, isGradient, markerData) {
            var mapSource = {
                legend: {
                    url: 'http://127.0.0.1:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=application/json&STRICT=false&style=',
                    layer: workspace + ':' + legend,
                    isGradient: isGradient,
                },
                yaogan: {
                    url: 'http://127.0.0.1:8080/geoserver/gwc/service/wms',
                    name: name + layer,
                    layer: workspace + ':' + layer
                },
                bound: 'http://127.0.0.1:6075/public/geo_bound/bound?workspace=' + workspace + '&layer=' + layer
            }

            // 清除图层
            try {
                map.removeLayer(layerYaogan);
                map.removeLayer(layerMarker);
            } catch (e) {

            }
            // 遥感影像图层
            layerYaogan = getlayerYaogan(mapSource.yaogan.url, mapSource.yaogan.name, mapSource.yaogan.layer);
            map.addLayer(layerYaogan);
            // 获取图例, 渐变图例，用于特征污染物空间分布
            getLegend(mapSource.legend.url, mapSource.legend.layer, mapSource.legend.isGradient)
            // 移动镜头
            map.getView().fit(getBound(mapSource.bound), map.getSize());

            // 创建marker
            layerMarkerGroup = []
            markerData.forEach(val => {
                layerMarkerGroup.push(getlayerMarker(val))
            });
            layerMarker = new ol.layer.Group({
                title: '标记点',
                layers: layerMarkerGroup
            })
            map.addLayer(layerMarker);
        }

        // 切换数据
        function change1() {
            var name = '敏感数据';
            var workspace = '敏感数据';
            var legend = '敏感数据';
            var city = '敏感数据';
            var time = '2019-11';
            var layer = city + '_' + legend + '_' + time;
            var isGradient = true;
            var markerData = getMarker('http://127.0.0.1:6075/remote_sensing/water_pollution/search?belong=' + city + '&time=' + time)
            createLayer(workspace, legend, layer, name, isGradient, markerData)
        }
        function change2() {
            var name = '敏感数据';
            var workspace = '敏感数据';
            var legend = '敏感数据';
            var city = '敏感数据';
            var time = '2018';
            var layer = city + '_' + time;
            var isGradient = false;
            var markerData = []
            createLayer(workspace, legend, layer, name, isGradient, markerData)
        }
        function change3() {
            var name = '敏感数据';
            var workspace = '敏感数据';
            var legend = '敏感数据';
            var city = '敏感数据';
            var time = '2018';
            var layer = city + '_' + time;
            var isGradient = false;
            var markerData = []
            createLayer(workspace, legend, layer, name, isGradient, markerData)
        }
    </script>
</head>

<body>
    <button onclick="change1()">敏感数据</button>
    <button onclick="change2()">敏感数据</button>
    <button onclick="change3()">敏感数据</button>
    <!-- Content here -->
    <div id="map">
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content">
            </div>
        </div>
    </div>
    <div id="labels">
        <div id="label" class="my-label-value">
            <table id="table" style="background-color:azure;"></table>
        </div>
        <label id="label_min" class="my-label-min-value"></label>
        <label id="label_max" class="my-label-max-value"></label>
    </div>
</body>

</html>

在这里插入图片描述

后续问题

后续运行出现了很多问题，重新部署后的Geoserver没有进行Tile Cache，导致地图加载不出来，记得一开始是可以【如果提前做好切片缓存，加载本地切片，如果没有提前做切片，则在浏览过程中生成切片缓存】这样的，后来不知道咋改成这样了，因为当时已经生成好了缓存了，所以测试没有出现问题，现在新的环境，用这套代码没有办法加载出图层来。

做了如下修改

		var projection = new ol.proj.Projection({
            code: 'EPSG:4326',
            units: 'degrees',
            axisOrientation: 'neu'
        });
        var gridsetName = 'EPSG:4326';
        //切片名
        var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
        //切片大小
        var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
		var url = "http://wsl:6079/geoserver/gwc/service/wmts"；
		// 创建遥感图层
        function getlayerYaogan(url, title, layerName) {
            //设置地图投影
            return new ol.layer.Tile({
                title: title,
                visible: true,
                source: new ol.source.WMTS({
                    url: url,
                    layer: layerName,
                    matrixSet: gridsetName,
                    format: 'image/png',
                    projection: projection,
                    //切片信息
                    tileGrid: new ol.tilegrid.WMTS({
                        tileSize: [256, 256],
                        extent: [-180.0, -90.0, 180.0, 90.0],//范围
                        origin: [-180.0, 90.0],
                        resolutions: resolutions,
                        matrixIds: gridNames
                    }),
                    wrapX: true
                })
            });
        }

就可以实现【如果提前做好切片缓存，加载本地切片，如果没有提前做切片，则在浏览过程中生成切片缓存】了

xbw12138
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用openlayers在加载离线瓦片（里面附带下载瓦片的软件，请往下看）
浩星
05-15 2737
首先先来看看效果：这个是谷歌卫星图 然后我们说说怎么实现的吧： <!DOCTYPE html> <html> <head> <title>离线瓦片</title> <link rel="stylesheet" href="css/ol.css"> </head> <body> &lt...
OpenLayers教程十四：多源数据加载之离线瓦片地图
不睡觉的怪叔叔的博客
07-12 2062
本文转载自：http://weilin.me/ol3-primer/ch05/05-04.html 其实离线瓦片地图和在线瓦片地图是一样的原理，都是瓦片。只是离线瓦片地图存储在本地，而且它的存取方式，可以由开发者自己来定义，而在线瓦片地图则不一定。在不理解原理的情况下，很多人拥有了离线瓦片，却不知道如何加载，所以这里单独来讲解。 示例的瓦片就只有一张。如果放大或者缩小，...
使用openlayers加载本地离线地图瓦片的一个最简单地例子
netying的专栏
03-30 1999
上一篇文章写了 leaflet，本篇说一下openlayers。 第一步，下载： https://github.com/openlayers/openlayers/releases/download/v6.2.1/v6.2.1-dist.zip 解压后，我们只需要其中两个文件ol.css，ol.js 第二步，下载瓦片，参考上篇文章，https://blog.csdn.net/netying...
Openlayers中加载Geoserver切割的EPSG:900913离线瓦片图层组
BADAO_LIUMANG_QIZHI的博客
01-19 532
场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示： Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示_BADAO_LIUMANG_QIZHI的博客-CSDN博客 上面讲的是切割单个图层并显示离线瓦片地图，如果是一个图层组，包含多个图层的话要怎么加载显示。 比如这个图层组的预览中有三个图层，灰色线是一个图层，黑色线是一个图层，文字是一个图层。 这种多图层的图层组怎样切割瓦片并离线加载显示。 注
离线地图瓦片下载 高德地图 谷歌地图 天地图 Mapbox地图 矢量 卫星地图下载
qq_33950912的博客
10-21 3363
地图瓦片下载离线，支持 高德地图瓦片 谷歌地图 Mapbox bingMap OpenStreeMap 自定义瓦片地址 下载
openLayers geoserver常见问题
03-23
访问Geoserver发布的图片（如WMS服务）使用`OpenLayers.Layer.WMS`类，传入服务URL和图层名称。 TMS（Tile Map Service）是一种分块加载地图图像的服务，OpenLayers支持TMS图层，通过`OpenLayers.Layer.TMS`创建。 ...
openlayers编辑地图图层并保存到geoserver
05-09
在这个例子中，我们可能会看到如何使用OpenLayers加载一个来自GeoServer的地图服务，展示在网页上。通过`ol.Map`对象，我们可以设置地图的基本属性，如中心点、比例尺等。`ol.View`用来控制地图的视图，而`ol.layer....
WebGIS之OpenLayers全面解析源码.rar
07-10
在实际应用中，开发者可以使用OpenLayers向GeoServer请求地图服务，或者提交编辑后的地理数据。 **6. 示例代码** 压缩包中的"29260----WebGIS之OpenLayers全面解析---资源"可能包含了与书中讲解配套的源代码实例。...
openlayers_note.rar_openLayer_openlayers
09-23
9. **瓦片缓存**：优化地图加载速度，学习如何配置和使用OpenLayers的缓存机制。 10. **服务接口**：可能涉及与GIS服务器如GeoServer、MapServer的交互，以及调用WFS服务进行空间数据操作。 "www.pudn.com.txt"...
webgis之openlayers全面解析
01-15
1. **多源地图服务支持**：OpenLayers可以接入多种地图服务，如ESRI ArcGIS Server、MapServer、Geoserver等，同时也支持各种开放标准，如OGC的WMS、WFS等。 2. **丰富的图层类型**：除了基础的地图图层，...
地图的开发研究--基于openlayers+geoserver+tomcat的离线地图-geoserver的缓存机制（geowebcache）
奋斗中的小健健的专栏
12-13 5785
Geowebcache服务器拦截来至客户端的请求，判断本次请求的数据是否已经被缓存。如果请求数据已被缓存，则将这些缓存图片直接渲染至客户端；如果请求数据没有被缓存，则发送请求至WMS Server(提供网络地图服务的服务器如geoserver)，由服务器处理请求数据，并返回给Geowebcache服务器，Geowebcache服务器进过渲染及缓存数据图片后绘制到客户端。    最新的geoser
OpenLayers实战，Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能
最新发布
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-09 3007
Openlayers默认加载地图瓦片很慢，通过对比使用openlayers和leaflet加载速度，能够明显看到openlayers加载速度比leaflet要慢很多。看了Openlayers源码发现是因为Openlayers的瓦片加载机制是通过tileQueue瓦片加载队列来顺序加载瓦片，瓦片总是一个个顺序的加载，而不是同时加载。
geoserver发布瓦片_多源数据加载之离线瓦片地图
weixin_39722375的博客
11-29 1189
其实离线瓦片地图和在线瓦片地图是一样的原理，都是瓦片。只是离线瓦片地图存储在本地，而且它的存取方式，可以由开发者自己来定义，而在线瓦片地图则不一定。在不理解原理的情况下，很多人拥有了离线瓦片，却不知道如何加载，所以这里单独来讲解。 示例的瓦片就只有一张。如果放大或者缩小，就可能看不到地图瓦片了：瓦片：loadOfflineTiledMap.html:<html lang="...
Cesium 加载在线天地图瓦片和离线瓦片功能（cesium开发记录）
weixin_42508580的博客
11-25 6867
Cesium 加载在线天地图瓦片功能 1、未联网状态加载默认本地底图，保证地球有底图显示 let viewer = new Cesium.Viewer('cesiumContainer', { // 未联网状态下 默认显示球面地图 imageryProvider: new Cesium.TileMapServiceImageryProvider({ url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
geoserver发布离线瓦片卫星图TIF格式
qq_40482342的博客
09-30 6671
geoserver发布离线瓦片卫星图TIF格式 看了诸多关于geoserver发布离线瓦片的博客，发现别人的瓦片下载方式和工具跟我的不太相同，而且对与新人来说有点难以看明白，鄙人就写这样的一篇博客，给大家提供下我的用geoserver发布离线的瓦片图 本人自己的方法不足之处还望指出 我在这里发布的是通过全能地图下载器下载的瓦片地图（百度网盘：链接: https://pan.baidu.com/s/...
Windows下，使用Cesium+Mapbox 制作加载矢量瓦片
晚秋的专栏
09-26 3938
一、矢量瓦片生成 在这篇博客windows下使用tippecanoe把GeoJSON制作成矢量切片vectortile_十月的秋的专栏-CSDN博客详细介绍了如何在Windows中利用tippecanoe进行切片。 二、矢量瓦片发布 将利用下面命令生成的离线离线pbf瓦片部署到Tomcat下面： tippecanoe -e lakepbf -pC -Z8 -z14 -f lake.geojson 三、Cesium调用矢量瓦片服务 该方法是借鉴了github上的源码，使用的Cesium+m.
Geoserver项目开发_9.利用离线松散型瓦片发布Geoserver服务
zhangeximu的博客
04-28 2570
现有地图下载器都可以直接下载地图瓦片，如Google地图瓦片、天地图地图瓦片，那如何直接利用这些离线瓦片进行服务发布，而不需要自己再重新切一遍图？ 一、数据准备 1、全球范围天地图影像1-N级TMS瓦片。 2、全球范围天地图影像1级地图的tif和tfw文件（即拼接格式） （下图为Bigemap下载器支持的下载格式。拼接格式为tif，其余7种 存储格式均支持jpg和png两种格式。拼接和瓦片两种...
geoserver离线地图服务搭建和图层发布
敲代码的小小酥的博客
07-01 9911
geoserver发布多精度图层过程
webgis —— 为瓦片构建缓存
纯爱枫若情的博客
12-13 1770
了解 webgis 或接触过 webgis 相关应用的童鞋应该知道，webgis 应用有个特点，加载影像地图或者矢量地图是刚需。相信对于国内的 gis 行业的从业者来说，天地图应该不是一个陌生的存在吧。它是官方出品的地图，权威性较高。它更新比较及时，每年都会对部分区域的影像进行更新。国内热门地方，影像精度较高，达到亚米级别。坐标系采用 wgs84 坐标系，无偏差，无加密。至于缺点嘛，这里就不做过多的介绍了，用过的童鞋自然会明白。
geoserver xyz切片请求地址
qq_37891961的博客
09-02 4199
写在前面的话： 用geoserver有一段时间了，也有一些心得，越来越觉得geoserver分类与做的事情刚刚好（一个恰到好处的工具比一堆杂乱的工具堆起来看似强大的软件要好的多），也用过超图，同样也用过一段时间的arcgis,gesoserver给人的感觉就是瑞士军刀，做的东西不多，但是每一项都非常有用，又有各种插件扩展，二维地图基本适用，给人很完整很舒服的感觉。 geoserver 把所有数据都放到数据库中 数据库数据例如：postgersql 栅格数据：img,tiff等文件都属于geose

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值