矢量切片从制作到前端调用

目录

组织数据和配图

填写地图视图的元数据信息

制作矢量切片方案

生成切片索引

生成矢量切片包

共享包以及在登录门户中发布矢量切片服务

前端加载矢量切片服务

补充1:矢量切片支持cgs2000以及自定义坐标系

补充2:矢量切片属性查询(桌面)

补充3:矢量切片属性查询(前端)


本篇博客介绍了矢量切片从制作到前端调用的全过程,具体如下:

  • 组织数据和配图

(略)如何组织数据和配图请参考文末的资料

  • 填写地图视图的元数据信息

  • 制作矢量切片方案

切片原点为数据的左上角点或者包括左上角的范围的点(注意输入x和y时不要用带逗号的形式,例如:321,576.194522 4,547,522.288352)

比例尺是二倍关系

如果使用现有的切片方案,那么切片大小一定要选择512*512 pixels(https://pro.arcgis.com/zh-cn/pro-app/tool-reference/data-management/create-vector-tile-index.htm

  • 生成切片索引

有助于加快生成vtpk包的速度

切片方案为上一步生成的切片方案

最大节点数使用默认的10000即可,表示每个切片中含有1w个节点,默认值,每个切片中含有的节点越少,要产生的切片就会越多

  • 生成矢量切片包

切片方案和索引面都是先前生成的切片方案

最小、最大缓存比例尺是自动从切片方案中读取的

整个操作过程,如下:

  • 共享包以及在登录门户中发布矢量切片服务

需要在Pro中登录arcgisonline门户或者portal门户

使用sharepackage工具

在门户网站中将共享的矢量切片包点击“发布”按钮,发布成矢量切片服务。

  • 前端加载矢量切片服务

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>矢量切片地图服务</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
 
  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.14/"></script>
 
  <script>
    require(["esri/Map", "esri/views/MapView", "esri/layers/VectorTileLayer"], function (Map, MapView, VectorTileLayer) {
      var map = new Map();
 
      var view = new MapView({
        container: "viewDiv",
        map: map
      });
      var layer = new VectorTileLayer({
         url: "https://tiles.arcgis.com/tiles/sWtFyaI42NMU3lLl/arcgis/rest/services/test200011/VectorTileServer"
      });
     
      map.add(layer);
     
    });
  </script>
</head>
 
<body>
  <div id="viewDiv"></div>
</body>
 
</html>
  • 补充1:矢量切片支持cgs2000以及自定义坐标系

例如:对自定义坐标系(例如:cgs2000 高斯投影,中央经线为117.5E)的数据制作vtpk

  • 补充2:矢量切片属性查询(桌面)

实现方式:配置Pop-up Source

基于同一个数据需要发布一个矢量切片服务和一个要素服务,然后在矢量切片服务上配置pop-up source为要素服务或者动态地图服务

  • 补充3:矢量切片属性查询(前端)

思路一:发布一个与矢量切片一样数据源的要素服务,在前端显示设置其为透明,实质上查的是要素服务的属性。

思路二:借助如esri-loader,vue,mapbox 等解析arcgis的矢量切片

 

  • 参考资料:

基于矢量切片的电子地图配图(一)为什么要重新配图?:http://zhihu.esrichina.com.cn/article/3329  
基于矢量切片的电子地图配图(二)示例数据来源:http://zhihu.esrichina.com.cn/article/3330 
基于矢量切片的电子地图配图(三)配图准备:http://zhihu.esrichina.com.cn/article/3331
基于矢量切片的电子地图配图(四)配置基础要素:http://zhihu.esrichina.com.cn/article/3332
基于矢量切片的电子地图配图(五)显示行政区划名称:http://zhihu.esrichina.com.cn/article/3339
基于矢量切片的电子地图配图(六)关于字体:http://zhihu.esrichina.com.cn/article/3340 
基于矢量切片的电子地图配图(七)配置水系:http://zhihu.esrichina.com.cn/article/3433
基于矢量切片的电子地图配图(八)配置兴趣点:http://zhihu.esrichina.com.cn/article/3435

ArcGIS 矢量切片全接触 http://zhihu.esrichina.com.cn/article/3468
矢量切片二三事 https://blog.youkuaiyun.com/weixin_44616652/article/details/105266321  
矢量切片相关说明 http://zhihu.esrichina.com.cn/article/3871

 

### 如何在GeoServer中发布矢量切片WFS服务 #### 插件准备与安装 为了支持矢量切片功能,需要下载并安装对应版本的矢量切片插件。确保所使用的插件版本与当前运行的GeoServer版本一致[^4]。例如,如果使用的是GeoServer 2.14.1,则需下载 `geoserver-2.14.1-vectortiles-plugin.zip` 并解压到 GeoServer 的指定目录下。 将插件放置于 GeoServer 安装路径中的 `webapps/geoserver/WEB-INF/lib` 文件夹内[^3]。完成后重启 GeoServer 服务以使更改生效。 --- #### 数据源配置 在 GeoServer 中创建一个新的工作区或选择现有的工作区作为矢量切片发布的基础环境。随后导入待处理的数据集(如 SHP 文件或其他格式),并通过 WFS 或其他协议验证其可用性[^5]。 对于大规模矢量数据(如包含数百万个点的对象集合),建议提前优化存储结构,或者通过索引技术提升查询效率,从而减少前端请求时延。 --- #### 矢量切片发布设置 进入 GeoServer 主界面,在目标图层的操作选项中找到 **“Vector Tiles”** 功能入口。点击后按照提示完成以下操作: 1. 设置输出格式:通常推荐采用 PBF (ProtocolBuffer Binary Format),这是目前主流的地图客户端(如 Mapbox 和 Leaflet)广泛支持的标准。 2. 配置瓦片网格体系:定义缩放级别范围以及对应的分辨率参数。这些设定直接影响最终生成的矢量切片覆盖区域和细节程度[^2]。 3. 自定义样式规则(可选):尽管矢量切片允许前端动态调整视觉效果,但在某些场景下也可以预设基本外观以便快速展示。 保存修改后的配置项,并测试访问链接确认无误即可正式投入使用。 --- #### 调用方式说明 一旦成功部署了基于 WFS 协议的矢量切片服务,就可以利用第三方库实现跨平台交互。以下是两个常见框架的具体实例代码片段供参考: ##### 使用Mapbox GL JS加载矢量切片 ```javascript map.addSource('example', { 'type': 'vector', 'tiles': ['http://localhost:8080/geoserver/gwc/service/tms/1.0.0/{workspace}:{layer}@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf'], 'minzoom': 0, 'maxzoom': 22 }); ``` ##### 借助Leaflet.VectorGrid扩展组件呈现结果 ```javascript L.vectorGrid.protobuf( 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/{workspace}:{layer}@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf', {} ).addTo(map); ``` 上述脚本分别展示了如何借助现代 WebGIS 工具无缝对接后台提供的资源流。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值