本学习系列将以Cesium + Vue3 + Vite +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，详情请参阅原文 Cesium+Vue3学习系列（16）---Cesium加载Geoserver发布的矢量（.shp）WMS数据服务
之前在 Cesium+Vue3学习系列（4）---图层管理功能封装里初步封装了图层管理功能，本篇在其基础上扩展如何实现在Cesium中加载Geoserver发布的矢量（shp、shapefile）WMS数据服务。
1、新建工作区
2、新建数据存储，选择Shapefile - ESRI(tm) Shapefiles (*.shp)。
3、选择步骤（1）的工作区，设置连接参数（路径最好不要有中文），注意矢量数据最好是WGS84坐标系。设置字符集为UTF-8（有时需要设置为GB2312或GBK），防止汉字属性乱码
4、点击“发布”
5、然后进入编辑页面
在数据tab页里需要点击“从数据中计算”以及“Compute from native bounds”，自动获取shp范围。然后点击“保存”
6、在图层预览（LayerPreview）中找到刚刚保存的数据。这是Polygon默认的样式。如果用户想要自定义数据样式。需要使用uDig或者QGIS软件进行处理，导出sld即可。具体操作过程可自行百度，网上有很多教程。
7、新建样式（如果不需要自定义样式，请忽略步骤7-9）。设置样式名称，工作空间，上传步骤6里导出的sld样式文件，并点击“upload”。然后点击“验证”按钮看样式是否有问题。没问题的话，点击保存。
<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:xlink="http://www.w3.org/1999/xlink" xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.1.0/StyledLayerDescriptor.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.1.0" xmlns:se="http://www.opengis.net/se" xmlns:ogc="http://www.opengis.net/ogc">
<NamedLayer>
<se:Name>beijing</se:Name>
<UserStyle>
<se:Name>beijing</se:Name>
<se:FeatureTypeStyle>
<se:Rule>
<se:Name>Single symbol</se:Name>
<se:PolygonSymbolizer>
<se:Fill>
<se:SvgParameter name="fill">#94d180</se:SvgParameter>
</se:Fill>
</se:PolygonSymbolizer>
</se:Rule>
<se:Rule>
<se:TextSymbolizer>
<se:Label>
<ogc:PropertyName>name</ogc:PropertyName>
</se:Label>
<se:Font>
<se:SvgParameter name="font-family">微软雅黑</se:SvgParameter>
<se:SvgParameter name="font-size">13</se:SvgParameter>
<se:SvgParameter name="font-weight">bold</se:SvgParameter>
</se:Font>
<se:LabelPlacement>
<se:PointPlacement>
<se:AnchorPoint>
<se:AnchorPointX>0</se:AnchorPointX>
<se:AnchorPointY>0.5</se:AnchorPointY>
</se:AnchorPoint>
</se:PointPlacement>
</se:LabelPlacement>
<se:Halo>
<se:Radius>2</se:Radius>
<se:Fill>
<se:SvgParameter name="fill">#ffffff</se:SvgParameter>
</se:Fill>
</se:Halo>
<se:Fill>
<se:SvgParameter name="fill">#e31a1c</se:SvgParameter>
</se:Fill>
<se:Graphic>
<se:Mark>
<se:Fill>
<se:SvgParameter name="fill">#ffffff</se:SvgParameter>
</se:Fill>
<se:Stroke>
<se:SvgParameter name="stroke">#808080</se:SvgParameter>
<se:SvgParameter name="stroke-width">0.5</se:SvgParameter>
</se:Stroke>
</se:Mark>
<se:Size>4</se:Size>
</se:Graphic>
<se:VendorOption name="maxDisplacement">1</se:VendorOption>
<se:VendorOption name="graphic-resize">stretch</se:VendorOption>
</se:TextSymbolizer>
</se:Rule>
</se:FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
8、然后在编辑样式页面，勾选上Default和Associated。
编辑
9、回到图层预览页面。点击openlayers即可看到发布的shp数据及样式。
10、配置矢量wms
// wms测试数据
export const wmsShpTestInfo: ILayerItem = {
id: LayerIdFlag.WMS_SHAPETEST,
name: "wmsShpTest",
type: "imagery_wms",
url : 'http://localhost:8080/geoserver/gongzhonghao/wms', //用户需调整为自己的geoserver地址
layer : 'gongzhonghao:beijing', //用户需调整为自己的图层名称
}
11、前端加载数据代码
const changeWmsShpTest = (val: string | number | boolean) => {
if (val) {
// 加载wms矢量图层
mLayerManager?.Add(wmsShpTestInfo)
// 跳转到指定坐标
viewer?.camera.flyTo({
destination: Cartesian3.fromDegrees(116.37, 40.22, 1000000.0)
});
} else {
// 移除wms矢量图层
mLayerManager?.Remove(LayerIdFlag.WMS_SHAPETEST)
}
}
12、最终效果。
13、更多详细代码，请关注Cesium+Vue3学习系列（16）---Cesium加载Geoserver发布的矢量（.shp）WMS数据服务，。
注：本篇所用的数据及.sld样式文件放在了public/testdata/shp文件夹里，用户可自行测试使用。
