代码编织梦想

Openlayers(四)WMTS请求优化和图层颜色更改

目标

  • 优化WMTS请求
  • WMTS前端修改图层颜色

效果对比

优化后
在这里插入图片描述
原图
在这里插入图片描述

加载我们自定义图层时候,我们的面数据在地图上只显示部分位置,但是使用WMTS加载满屏瓦片会导致很多无效的瓦片请求,

具体报错为“ XX is out of range, min: XX max:XX”,简单的意思就是

WMTS服务通常只提供有限的瓦片范围,请求超出该范围的瓦片会导致此错误。

在这里插入图片描述

在这里插入图片描述

文档内容对应参数是extent,该参数不是必填项.
平铺网格的范围:XYZ平铺格线的原点是范围的左上角。如果未提供maxResolution,则网格的零级别由一个瓦片适合所提供范围的分辨率定义。
经过分析是WMTS没有设置参数extent,导致报错,虽然该请求不会导致使用,但是会发起很多无效请求和增加服务器负担。
在这里插入图片描述

这里的数据其实是对应Geoserver图层中边框的XY参数
在这里插入图片描述

1.前期准备

依照上节文章导入openlayers(三)操作geoserver。
代码使用vue3+若依后台

首先新建一个工作空间’qg’,然后导入湖南省、广东省市级shp数据,
数据来源可以使用这篇文章中省市数据

https://blog.csdn.net/qq_46877697/article/details/121432672

在这里插入图片描述

2.代码分析

前端代码使用正确的extent参数
在这里插入图片描述

加载效果,参数仅请求有效图层

在这里插入图片描述

3.多图层请求

比如我请求图层包括湖南、广东两个图层等。

我们不需要到Geoserver中查询每个extent参数,我们可以使用fetch()请求获取XML数据,把图层边框参数放到前端Map中保存。
相应参数是XML数据,请求参数是工作空间,可获取该工作空间下所有图层extent参数,代码如下

此时需要注意前端,要保证fetch()接口获取到XML,再处理WMTS请求。

// 图层边框范围map,key图层命名Native Name,value图层边框4个点位数组
const layersExtentMap= new Map()
// 接口请求获取XXX作空间下,所有图层边框范围 最大最小xy
function postAllExtent(){
    // 定义WMTS GetCapabilities请求URL
    let url = 'http://'+ postUrl+'/geoserver/'+workPace+'/gwc/service/wmts?request=GetCapabilities';
    // 发送WMTS GetCapabilities请求并解析响应
  fetch(url).then(function(response) {
      return response.text();
    }).then(function(text) {
      // 解析WMTS GetCapabilities响应
      let parser = new WMTSCapabilities();
      let result = parser.read(text);
      // 获取指定图层的Native Bounding Box信息
      let layers = result.Contents.Layer;
      for (let i = 0, ii = layers.length; i < ii; ++i) {
        let layer = layers[i];
        // key图层命名Native Name,value图层边框4个点位数组
        layersExtentMap.set(layer.Identifier,layer.WGS84BoundingBox)
      }
  
    });
  }

此时可以优化WTMS请求方式

  let tileGrid = new WMTSTileGrid({
      //设置 边框范围 //TODO
      // extent: [109.650790017,20.21417992,117.31371173,25.5196163260001],
      extent:layersExtentMap.get(layerData.layerName),
      origin: getTopLeft(projectionExtent),
      matrixIds: ['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'
      ],
      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],
      wrapX: true
    })

4.图层颜色更改之前端修改

这里需要使用openlayers中的Raster对象中的operation方法,该方法可以在使用wmts请求获取到瓦片图片后修改图片RGB颜色。

import {   Raster as RasterSource } from 'ol/source';

let postLayerData = [{
  layerName : 'hn',
  colour :[186,148,209]
},{
  layerName : 'gd',
  colour :[244,234,43]
}]
layerData.colour = [XXX,XXX,XXX]
    const raster = new RasterSource({
      sources: [
        //传入图层,这里是天地图矢量图或者天地图矢量注记
        temSource,
      ],
      //这里设置为image类型,与官方示例不同,优化速度
      operationType: 'image',
      operation: function (pixels, data) {
        //执行颜色转换方法,注意,这里的方法需要使用lib引入进来才可以使用
        for (let i = 0; i < pixels[0].data.length; i += 4) {
          //将rgb的值
          pixels[0].data[i] = data.layerRgb[0]; //R
          pixels[0].data[i + 1] = data.layerRgb[1];//G
          pixels[0].data[i + 2] = data.layerRgb[2];//B
        }
        return pixels[0];
      },
      //线程数量
      threads: 10,
      //允许operation使用外部方法
    });
      raster.on('beforeoperations', function (event) {
      const data = event.data;
      data['layerRgb'] = layerData.colour
    })

在这里插入图片描述

5.图层颜色更改之Geoserver修改

geoserver中有一个样式功能,我们可以看到polygon(面样式)
在这里插入图片描述

打开一个图层预览,面数据默认样式使用的是-polygon(面样式)
在这里插入图片描述

我们新建一个样式,命名和相应图层保持一致

在这里插入图片描述

填写XML文件,其中

面-填充颜色

 <CssParameter name="fill">#FFF89A</CssParameter>

边框线-颜色和粗细

<CssParameter name="stroke">#12a2ee</CssParameter>
<CssParameter name="stroke-width">0.2</CssParameter>
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
    xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
    xmlns="http://www.opengis.net/sld"
    xmlns:ogc="http://www.opengis.net/ogc"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <!-- a named layer is the basic building block of an sld document -->

  <NamedLayer>
    <Name>Default Polygon</Name>
    <UserStyle>
        <!-- they have names, titles and abstracts -->

      <Title>Grey Polygon</Title>
      <Abstract>A sample style that just prints out a grey interior with a black outline</Abstract>
      <!-- FeatureTypeStyles describe how to render different features -->
      <!-- a feature type for polygons -->

      <FeatureTypeStyle>
        <!--FeatureTypeName>Feature</FeatureTypeName-->
        <Rule>
          <Name>Rule 1</Name>
          <Title>Grey Fill and Black Outline</Title>
          <Abstract>Grey fill with a black outline 1 pixel in width</Abstract>

          <!-- like a linesymbolizer but with a fill too -->
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">#FFF89A</CssParameter>
            </Fill>
            <Stroke>
              <CssParameter name="stroke">#12a2ee</CssParameter>
              <CssParameter name="stroke-width">0.2</CssParameter>
            </Stroke>
          </PolygonSymbolizer>
        </Rule>

        </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

此时在geoserver中预览图层效果

在这里插入图片描述
前端使用时候,如wmts请求图层时候可以添加STYLE参数。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42583549/article/details/129911105

openlayers 图层(layers) 详解-爱代码爱编程

声明:文章为本人原创,转载或使用请注明作者和出处!!谢谢! 文中代码可以在 https://github.com/QingyaFan/data-visualization 找到。 本文更新的版本可以在我的微信公众号阅读:

开源gis(二)——openlayers加载arcgis和geoserver在线离线切片_gis_morningsun的博客-爱代码爱编程_arcgis geoserver

一、引言         开始开源gis的不归路,第一课便是加载底图,底图目前主流的都是wmts,以后会研究一下wms,本文介绍了普通网络在线切片(如谷歌百度高德等)、Arcgis在线切片与离线切片、openlayer在线与离线切片。通过这三类主流的方式基本可以满足基本需求,如果遇到比较困难的可以直接研究下openlayer的切片加载原理,直接自己手动

openlayers3 地图图层(layers) 详解_何木木的博客-爱代码爱编程_openlayer3 图层层级

在 OpenLayers 中,图层是使用 layer 对象表示的,主要有 热度图层(heatmaplayer)、图片图层(imagelayer)、切片图层(tilelayer) 和 矢量图层(vectorlayer) 四种类型,它们都是继承 Layer 类的。 1、Layer 类       OpenLayers 初始化一幅地图(map),至少需要一个可

openlayers教程:多源数据加载之wmts-爱代码爱编程

目录 一、WMTS简介 二、WMTS的接口 2.1、GetCapabilities 2.2、GetTile 2.3、GetFeatureInfo 三、加载ArcGIS产品发布的WMTS服务数据 3.1、加载ArcGIS Online发布的WMTS服务数据  3.2、加载ArcGIS Server发布的WMTS服务数据 四、加载GeoSer

欢迎使用csdn-markdown编辑器day_weixin_44965318的博客-爱代码爱编程

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右S

openlayers 3 之 地图图层(layers) 详解_杨亚仑的博客-爱代码爱编程

 如果不是专业的地图工作者,看到地图,可能觉得地图就是一张将三维世界映射到二维空间,很多信息混杂在一起表示空间信息的动态可交互图片,其实这只是表面现象。实际上地图是由一个或多个图层组成的,使用不同的图层存储不同类型的地物,比如由存储道路的图层,有展示拥堵情况的图层,通常还有一个含有基础地理信息(比如政区划分)的底图图层。       在 OpenLaye

OpenLayers动态修改GeoServer发布的地图样式-爱代码爱编程

流程思路 1.改写GeoServer相应的SLD,使其支持动态修改样式; 2.修改前端请求WMS服务参数。 修改GeoServer的SLD 该部分在GeoServer官网上有说明,想了解更多请访问GeoServer官网:https://docs.geoserver.org/stable/en/user/styling/sld/extensions/s

OpenLayers源码阅读(四):TileImage及TileArcGISRest、XYZ、WMTS-爱代码爱编程

前提:需要对网格地图服务WMTS有一定的了解,了解其切片原理,明确坐标系、原点、级别与分辨率等概念。 目录 1、我们如何使用1.1 TileArcGISRest1.2 XYZ1.3 WMTS2、属性2.1 TileImage2.2 TileArcGISRest2.3 XYZ2.4 WMTS3、阅读源码3.1 TileImage3.2 T

openlayers3教程详细_OpenLayers 3 入门教程-爱代码爱编程

OpenLayers 3 入门教程 摘要 OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它的落后。 OL3已运用现代的设计模式从底层重写。 最初的版本旨在支持第2版提供的功能,提供大量商业或免费的瓦片资源以及最流行的开源矢量数据格式。

openlayers3教程详细_openLayers 3知识回顾-爱代码爱编程

openlayers 知识前段时间帮助同事重构一个地图类的项目,然后就学习了openLayer3这个框架,但是官网上没有中文版,也没有详细的例子解释,我只能遇到看不懂的就翻译成中文来用,为了方便以后再用这个ol,能够更快的上手,就花了几天的时间总结了ol的知识,ol功能很丰富,API也很多,没有写太多,只是写了怎么用的,只要学会了根本,就可以很快的使用

openlayer 图层上下_OpenLayers 之 图层(Layers) 详解-爱代码爱编程

声明:文章为本人原创,转载或使用请注明作者和出处!!谢谢! 如果不是专业的地图工作者,看到地图,可能觉得地图就是一张将三维世界映射到二维空间,很多信息混杂在一起表示空间信息的动态可交互图片,其实这只是表面现象。实际上地图是由一个或多个图层组成的,使用不同的图层存储不同类型的地物,比如由存储道路的图层,有展示拥堵情况的图层,通常还有一个含有基础地理信息

openlayers 使用天地图 切换图层-爱代码爱编程

前言: 刚开发完一个模块,主要的功能都是由openlayers实现的,写篇博客,一个是为后来者指引条明路(前端的大佬们都只喜欢讲理论,我不喜欢理论,我只喜欢实现的过程,所以这篇文章我只会告诉你怎么实现。同时作者的水平也不高,没有达到做封装的地步,如果你觉得简单,那就再好不过了。),二是给自己做个总结。 看不懂?没关系,我也看不懂,但相信你有过openl

vue+openlayers图形交互,实现多边形绘制、编辑和保存-爱代码爱编程

知识点: 1.绘制多边形,实例化ol.interaction.Draw对象draw_inter = new ol.interaction.Draw({ source: source_draw,//矢量地图源 type: "Polygon",//绘图类型 }); //将交互绘图对象添加到地图中 map.addInteraction(draw_inter)

Openlayers + Vue实现GIS地图的一些常见问题(整理)-爱代码爱编程

本文是博主在开发过程中遇到的一些问题的整理。 学习教程为:《WebGIS之Openlayers全面解析(第二版)》一书。 Openlayers实现离线地图的实现方案 前端: Openlayers 后端: GeoServer 基于 JavaEE 的解决方案 GeoServer(服务器) uDig(桌面软件) Tomact(中间件) PostGIS|M

Vue+Openlayers实现加载天地图WMTS服务显示-爱代码爱编程

场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图: Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 上面在Vue中使用Openlayers加载OSM地图显示。 如果要加载天地图显示流程类似。 天地图

webgis —— 从指定层级开始显示某一张影像图_纯爱枫若情的博客-爱代码爱编程

思考 想必深入用过 cesium 的小伙伴都知道,cesium 可以支持加载很多不同类型的影像服务,呈现渲染在三维地球上。 但是 cesium 有个不太好的地方是,其提供的接口,不直接支持从指定某一层级开始加载影像图。

一文搞清各种来源的wmts服务加载,告别ctrl+c,v_逸然健在的博客-爱代码爱编程

温馨提示:觉得码字太多,看不下去的,可以直接从后往前看。 一、WMTS服务加载方式         第一种是根据request=getcapabilitites的方式读取xml文件来加载文件中包含的服务。根据需要再进行指定图层,比如:http://localhost:8080/geoserver/gwc/service/wmts?SERVICE=wmt

如何在openlayers中使用iconfont或font awesome字体图标_xiangshangdemayi的博客-爱代码爱编程

目录 前言1.准备工作2.新建一个最简单的helloworld页面3.看看效果4.注意点1-需使用Unicode写法4.注意点2-需注意iconfott.woff2的请求顺序5.总结 前言   本文我们主要讲