当前位置： 首页 > wzjs >正文

做网站做地区好还是全国的好处网络营销试卷

wzjs 2025/7/21 17:41:30
做网站做地区好还是全国的好处,网络营销试卷,网站jquery在线优化,聊城网站建设方案最近由于在工作中涉及到了海量图形渲染的问题，因此我开始研究相关的解决方案。在咨询了许多朋友之后发现矢量切片似乎是行业内最常用的一种解决方案，于是我便开始研究它该如何使用。 一、什么是矢量切片 矢量切片按照我的理解就是用栅格切片的方式把矢…

最近由于在工作中涉及到了海量图形渲染的问题，因此我开始研究相关的解决方案。在咨询了许多朋友之后发现矢量切片似乎是行业内最常用的一种解决方案，于是我便开始研究它该如何使用。

一、什么是矢量切片

矢量切片按照我的理解就是用栅格切片的方式把矢量数据也切成金字塔，只不过切割的不是栅格图片，而是矢量数据的描述性文件。

矢量切片的特点

因此矢量切片它就兼具矢量数据与栅格数据的优点，比如说：

  • 矢量瓦片相比于栅格图片更加灵活，可以直接访问矢量要素，因为矢量数据是以要素为单位的，而栅格数据它就是一个图片那就难以直接访问到具体的要素了。
  • 可直接在客户端获取请求指定地物的信息，无须再次请求服务器。因为空间数据和属性数据一起被请求到客户端了，无需再次请求了。
  • 样式可改变和定制。因为我们拿到的只是矢量数据，因此就可以在客户端自由的给它设置样式。
  • 相比于原始矢量数据，矢量瓦片更小巧，进行了重新编码并切分，在被请求时可以只返回请求区域和相应级别的数据。这个优点也就是我想使用它的理由，我期望矢量切片可以帮助我解决海量图形渲染的问题。
  • 数据更新快，甚至可以说是实时的，当数据库中的空间数据变化后，再次请求的数据是更新后的数据。

二、发布矢量切片服务

如何发布矢量瓦片服务，具体要看你使用的是什么WebGIS服务器，不同的WebGIS服务器操作的步骤可能都不一样，需要专门去查阅相关资料。我在实验的过程中是使用GeoServer来发布矢量切片的。

GeoServer中发布矢量切片

1.下载Vector Tiles 插件

GeoServer中无法直接实现矢量切片，需要下载对应的插件。

插件在官网中就可以下载（Download - GeoServer），但是注意要到自己所安装的对应geoserver版本的下载页面中去下载插件，如果下载了其它版本下的插件，可能会在启动geoserver时导致报错。

由于我安装的是2.21.5版本的geoserver，因此就进入这个版本的下载页面。

然后下滑到下面的 Extensions 部分就可以找到对应的插件。

2.安装Vector Tiles插件

将下载的插件解压之后得到如下的这些文件，复制其中的.jar文件（jar包）。

将复制好的文件放到geoserver的 WEB-INF/lib目录下，这个目录中都是各种.jar文件，比较好辨认。

3.检查Vector Tiles插件是否安装成功

安装插件成功后重新启动GeoServer，然后打开GeoServer的图层页面

然后随便选择一个矢量图层

然后进入Tile Caching页面

滚动页面到 "Tile Image Formats" 部分，除了标准的GIF/PNG/JPEG格式之外，如果你好看到以下的内容就表示插件安装成功了。

4.发布矢量切片

发布矢量切片的过程也很简单，首先将自己准备的数据创建为一个矢量图层（具体的步骤我就不多说了）。

这里我就随便选择了一个GeoServer中的美国人口的矢量面图

点击进入“图层编辑”页面，然后再进入“Tile Caching”选项卡

滚动页面到 "Tile Image Formats" 部分，勾选application/json;type=geojson、application/json;type=topojson和application/vnd.mapbox-vector-tile这几个选项（注意：这三个选项对应了三种不同格式的矢量切片数据，我们每勾选一种就会GeoServer就会制作发布一种对应格式的矢量切片）

最后点击保存，一个带有矢量切片的图层就准备好了。

三、OpenLayers中加载矢量切片

1.加载TMS服务的矢量切片

网上绝大多数的文章中都是加载的TMS服务的矢量切片，这种加载方式看起来还是比较简单的，但是我在实际使用的时候却发现“困难重重”实际上用起来比较麻烦。

获取TMS服务地址

首先第一步我们要搞清楚我们所发布的矢量瓦片的TMS服务的url地址是什么。可以打开Goeserver去查看。

点击左上角的logo进入首页

在首页点击TMS的链接

进入的这个页面中就记录了目前我的这台GeoServer服务器上发布的所有TMS服务的url。

找到之前设置了矢量切片的图层的链接（例如我下面的这个美国人口的图层）

这其中以geojson、topojson和pbf结尾的url就是矢量切片的url。

然后就可以拿到一个类似于http://localhost:8080/geoserver/gwc/service/tms/1.0.0/topp%3Astates@EPSG%3A4326@geojson这样的url。这个url由几个部分组成：

  1. http://localhost:8080/geoserver/gwc/service/tms/1.0.0 这部分在同一个GeoServer服务器上是固定的。
  2. /topp%3Astates 这部分表示图层名，其中的%3A是冒号的URL编码形式，所以我这里的图层就叫做topp:states
  3. @EPSG%3A4326 这部分表示投影，我这使用的是 EPSG:4326
  4. @geojson 这部分表示数据的格式

一个完整的TMS的url还不止上面的这些，它应该还要包括切片的具体信息，例如：http://localhost:8080/geoserver/gwc/service/tms/1.0.0/topp%3Astates@EPSG%3A4326@geojson/3/2/1.geojson

后面的/3/2/1分别代表切片的层级、列号和行号。

加载TMS矢量切片的方式

OpenLayers中加载矢量切片都需要使用VectorTile 图层 + VectorTile数据源的方式来实现。

创建VectorTile 图层时可以通过style属性给请求到的矢量瓦片数据设置样式。

创建VectorTile数据源时则主要是要设置三个属性：

  1. url，即矢量瓦片服务的地址，由于OpenLayers中不支持直接请求TMS服务，所以需要通过请求XYZ服务的方式请求TMS，因此url要写成"http://localhost:8080/geoserver/gwc/service/tms/1.0.0/BeiJiang%3Abj@EPSG%3A4326@geojson/{z}/{x}/{-y}.geojson"的形式，也就是用占位符{z}、{x}、{y}来表示切片的层级、列号和行号。但是这里有一点特殊的地方在于使用的是{-y}，之所以这样写是因为XYZ瓦片的y坐标从顶部开始向下递增，TMS瓦片的y坐标从底部开始向上递增，也就是说他们的y轴方向相反，所以url中要写成{-y}进行转换。
  2. format，这个属性是用来将矢量数据转换为Feature的，如果矢量切片的数据类型是geojson就使用GeoJSON转换器，如果矢量切片的数据类型是pbf就使用MVT转换器（这些转换器都是OpenLayers封装好的的都在ol/format目录下面）。
  3. tileGrid，这个属性应该用来定义切片规则的，具体怎么定义的我也搞不懂。这里由于我们使用的是加载XYZ服务的方式，所以可以直接使用OpenLayers内置的createXYZ函数来直接创建适合XYZ服务的tileGrid。但是在使用createXYZ函数时特别要注意，其中的extent属性默认为 EPSG:3857 投影的范围，如果你像我一样使用的是其它的投影（例如 EPSG:4326）,那就必需要手动将这个属性设置为你所使用的投影的范围，否则请求的url将会404（不要问我是怎么知道的😭）
import { VectorTile as VectorTileLayer } from "ol/layer";
import { VectorTile as VectorTileSource } from "ol/source";
import { Style, Stroke, Circle as CircleStyle } from "ol/style";
import { GeoJSON} from "ol/format";
import { createXYZ } from "ol/tilegrid";// 加载矢量切片
const riverVectorTileLayer = new VectorTileLayer({source: new VectorTileSource({url: "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/BeiJiang%3Abj@EPSG%3A4326@geojson/{z}/{x}/{-y}.geojson",format: new GeoJSON(),tileGrid: new createXYZ({extent: getProjection("EPSG:4326").getExtent(),maxZoom: 18,}),}),style: function (feature) {const style = new Style({stroke: new Stroke({color: "blue",width: 1,}),});return style;},
});
map.addLayer(riverVectorTileLayer);

但是我使用上面的这套代码进行加载却失败了，请求到的数据都是空的，这个就很奇怪，我看到很多的博客中都是这么写的，他们都能加载出来，我却加载不出来 ╭(╯^╰)╮。

之后，我历经了千辛万苦终于找到了原因出在哪里，我发现只要将层级z减一就能够请求到正确的矢量切片数据，这就说明XYZ的层级跟TMS的层级好像是不匹配的，有可能XYZ切片的层级是从1开始计数的，而TMS切片的层级是从0开始计数的。

想要将z减一，就需要使用tileUrlFunction属性，这个属性接收一个函数，然后XYZ切片的坐标就会作为参数传入到函数中，之后就可以根据XYZ切片的坐标来换算出TMS切片的坐标。

要换算的地方有两个，一是将z减一这个比较简单，二是要将y进行转换（因为它们的y轴是相反的）。

# 进行y轴转换的公式
y_tms = 最大行号 - y_xyz
# 因为
最大行号 = 总行数 - 1
# 所以
y_tms = 总行数 - 1 - y_xyz
# 又因为
总行数 = 2 ^ z_tms  # 2的z次方
z_tms = z_xyz - 1
# 所以最终的公式为
y_tms = (2 ^ (z_xyz - 1)) - 1  - y_xyz
import { VectorTile as VectorTileLayer } from "ol/layer";
import { VectorTile as VectorTileSource } from "ol/source";
import { Style, Stroke, Circle as CircleStyle } from "ol/style";
import { GeoJSON} from "ol/format";
import { createXYZ } from "ol/tilegrid";// 加载矢量切片
const riverVectorTileLayer = new VectorTileLayer({source: new VectorTileSource({tileUrlFunction: function (tileCoord) {const [z, x, y] = tileCoord;const url ="http://localhost:8080/geoserver/gwc/service/tms/1.0.0/BeiJiang%3Abj@EPSG%3A4326@geojson/" +(z - 1) +"/" +x +"/" +(Math.pow(2, z - 1) - 1 - y) +".geojson";return url;},format: new GeoJSON(),tileGrid: new createXYZ({extent: getProjection("EPSG:4326").getExtent(),maxZoom: 18,}),}),style: function (feature) {const style = new Style({stroke: new Stroke({color: "blue",width: 1,}),});return style;},
});
map.addLayer(riverVectorTileLayer);

通过上面的方式我最终才将我自己的矢量切片加载出来了

2.加载WMTS服务的矢量切片

之后我又看到了另一种加载方式，通过WMTS进行加载。WMTS加载起来那就比TMS要复杂很多了，但是其实是有一条“捷径”的。

在GeoServer中，进入切片图层页面。

选择一个带有矢量切片的矢量图层，在预览的下拉菜单中选择带有geojson、topojson或pbf的选项就可以预览矢量切片

然后F12打开调试工具查看页面的源代码，在demo文件夹中就可以找到通过WMTS加载矢量切片的代码，直接照抄就可以了。

// 通过WMTS加载矢量切片
function addRiver_vectorTileWMTS() {const baseUrl = "http://localhost:8080/geoserver/gwc/service/wmts";const layerName = "BeiJiang:bj";const style = "";const gridsetName = "EPSG:4326";const format = "application/json;type=geojson";const 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,];const params = {REQUEST: "GetTile",SERVICE: "WMTS",VERSION: "1.0.0",LAYER: layerName,STYLE: style,TILEMATRIX: gridsetName + ":{z}",TILEMATRIXSET: gridsetName,FORMAT: format,TILECOL: "{x}",TILEROW: "{y}",};let url = baseUrl + "?";for (var param in params) {url = url + param + "=" + params[param] + "&";}url = url.slice(0, -1);riverVectorTileLayer = new VectorTileLayer({source: new VectorTileSource({url,format: new GeoJSON(),projection: "EPSG:4326",tileGrid: new WMTSTileGrid({extent: [-180, -90, 180, 90],resolutions: resolutions,matrixIds: ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21",],}),}),style: function (feature) {const style = new Style({stroke: new Stroke({color: "blue",width: 1,}),});return style;},});map.addLayer(riverVectorTileLayer);
}

参考资料

  1. 矢量切片(Vector tile)_a vectortile source can only be rendered if it has-CSDN博客
  2. Openlayer加载geoserver发布的矢量切片_openlayers 加载geoserver xyz-CSDN博客
  3. QGIS加载Geoserver发布的矢量瓦片服务 - 槑孒 - 博客园
  4. 10openlayers加载矢量瓦片图层-CSDN博客
  5. GeoServer官方教程：矢量切片
  6. OpenLayers教程十：多源数据加载之瓦片地图原理二
  7. 【webgis】地图切片|矢量地图切片|栅格地图切片-CSDN博客
http://www.dtcms.com/wzjs/39614.html

相关文章：

  • 网站建设公司比较百度关键词推广一年多少钱
  • swoole 网站开发互联网营销有哪些方式
  • apmserv配置多个网站seo知识是什么意思
  • 网站建设添加视频教程网站推广步骤
  • 网站空间绑定域名网推怎么做最有效
  • 百度网站权重查询多用户建站平台
  • 网站 云建站如何弄一个自己的网站
  • 开原网站建设怎么做网络营销推广啊
  • wordpress调用php文件优化资讯
  • 网站设计模板含数据库关键字c语言
  • 网站改版升级通知seo手机关键词网址
  • 那个网站做代买搜狗seo软件
  • 北京做公司网站百度营销登录平台
  • 动态网站建设教程网站seo服务公司
  • 长沙网站优化外包服务官网设计比较好看的网站
  • 上海工商网站外贸平台哪个网站最好
  • 做网签合同的网站是制作网页多少钱
  • 网站备案最快多久凤凰网全国疫情实时动态
  • wordpress相关阅读禁止显示图片关键词seo是什么
  • csgo菠菜网站开发北京seo优化外包
  • 网站开发与app开发的区别福清网络营销
  • 网上做批发有哪些网站靠谱网络营销概述ppt
  • 彩票网站给实体店做代销网站关键词优化方案
  • 做问卷调查赚钱的网站好百度热搜seo
  • 网站后台无编辑器网站制作400哪家好
  • vs网页设计教程深圳优化公司排名
  • 小网站发布要怎么做购物链接
  • 北京便宜网站建设seo教程下载
  • web产品销售网站开发本地推广最有效的方法
  • 金华义乌网站建设网络营销工具有哪些