SuperMap处理并发布矢量图层全流程+Cesium加载、移除图层以及点击图层查询对应属性信息

前段时间想将某地的一些点线面矢量图层添加到Cesium视图中，到官网找了找示例发现有个“添加MVT”的示例，但是示例里面是将各矢量图层制作成了一幅地图并发布加载，而我的需求是在Cesium场景中通过图层管理模块将每个矢量图层单独加载或移除，具体实现见下文，如有不足欢迎评论区指正、交流。

一、矢量数据处理及发布流程

说明：本人使用的是64位SuperMap iDesktop 11i和SuperMap iServer 11.0.0版本软件。

第一步：打开SuperMap iDesktop软件鼠标右击“数据源”→“新建文件型数据源”。

第二步：鼠标右击新建的数据源点击“导入数据集”,选择需要导入的矢量图层点击“导入”。

此处需要特别注意！！！↓↓↓

将数据导入后一定要右击数据→“属性”→“坐标系”，查看数据坐标信息。如果数据是平面坐标未定义坐标系，则此时只需要将坐标定义为4490即国家2000地理坐标系即可，如下图所示。

 如果数据本身有坐标则需要“转换投影”，我的原数据是投影坐标系，如果不进行坐标转换则发布出来无法进行WebGL 3D浏览，此时在代码中加载则会报错“Cannot read properties of undefined (reading 'east')”的错误，具体转换如下图。

 转换完成后最好再查询一下坐标系是否转换成功，这里要注意定义投影和转换投影的区别。

第三步：双击工作空间管理器里转换坐标后的数据，此时软件视图界面就会出现此图层。

第四步：在图层管理器中右击该图层→“图层风格”，即可对地图的风格进行自定义修改，如果不需要修改则可跳过此步骤。

第五步：设置好图层风格之后在地图窗口右击鼠标选择“保存地图”（每个图层都重复上述步骤，也就是将每个矢量图层都保存为一张地图，这样才能实现每个图层的单独添加和移除）。

第六步：地图保存完成后查看地图坐标系是4490——国家2000坐标系无误后即可保存该工作空间。（最好关掉SuperMap iDesktop软件，个人发现同一个工作空间加载的文件型数据源不能同时被SuperMap iDesktop和SuperMap iServer两个软件同时读取，有些朋友如果发现自己的工作空间打开无法链接到数据源可以尝试关掉iServer进程，然后重新打开）

第七步：启动SuperMap iServer，进入iServer服务管理。

第八步：点击“快速发布”→“文件型工作空间”→选择刚才保存的工作空间文件，如果工作空间未设置密码则不填→选择“REST-地图服务”→点击“发布”即可。

 如上图，发布完成后点击“for WebGL3D”浏览，如果能显示图层则说明发布成功。

二、矢量图层的添加移除及属性信息的查询

图层发布成功后就可以添加到Cesium场景中，下图是对添加的图层进行属性查看。

通过上述方法将图层发布完成后，就可以通过addVectorTilesMap方法对图层进行添加：

viewer.scene.addVectorTilesMap({
    url: 'xxx',  //图层服务地址
    canvasWidth: 512,
    name: 'XXX',
    viewer
});

图层移除：

viewer.scene.removeVectorTilesMap("要移除图层的名称")

但是，有的朋友可能会有疑问，在SuperMap iServer中只发布了一次，生成了一个URL,怎样能选择每次要添加的是哪个图层呢？

本人当时做到这一步也一脸懵，但是仔细研究了以下控制台的请求就发现，SuperMap iServer发布生成的URL实际上返回了一个所有图层的信息数组，其中就包含了每个图层的请求路径，而且这个数组中每个图层的索引是固定不变的（应该根据工作空间中地图保存的顺序排列，只要工作空间中地图顺序不变则每个图层对应在数组中的位置就不会改变），因此可根据这个特点确定每个图层的请求URL。

本人是基于Vue和Element UI开发，控制图层显隐是通过Element UI的el-tree组件，具体代码过于繁琐这里就不展示了，总体实现逻辑就是首先通过axios请求获取到图层信息数组，然后通过图层在数组中的索引确定图层URL，再通过addVectorTilesMap方法对图层进行添加，移除图层除了上述的removeVectorTilesMap方法外还可以通过控制图层的显隐性来实现。

怎样获取每个图层的属性信息？

在开发过程中偶然发现点击图层会有对应地块的高亮显示，于是我想那会不会拾取到对应地块的属性信息呢，于是经过一番探索发现确实可以通过鼠标点击获取到对应地块的属性。具体实现就是监听鼠标左键单击事件，点击后如果点击到了地块上则获取对应的属性信息，如下图所示，红框内就是图层属性信息所“隐藏”的地方，然后再配合一些简单的DOM结构将属性渲染到页面即可实现点击地块显示对应属性信息的效果。

要注意的就是，这里获取对象中的属性不能采用“属性名.属性名”即“点语法”的方法获取对象属性信息，而要采用图中中括号的方式，因为这里会有一个“layerID”是变量，如果直接采用“点语法”获取属性会报错，至于“layerID”具体代表什么这里实在不好用语言解释（大概意思就是其中有一层的属性名是根据图层变化也动态变化的，观察之后发现和拾取的图层的_layerID属性是一致的，于是这里就先在上面获取了layerID作为这一层的键），大家可以在自己代码中输出一下即可明白。

---

总结

以上内容就是我个人在使用SuperMap系列软件和开发包在实现矢量图层的添加和移除以及图层点击查询属性的功能中具体的做法和心得，希望对大家有所帮助，由于我个人也是第一次研究，如果有不对的地方（或者有其他更便捷的实现方式）欢迎各位大佬评论区交流讨论。