地图瓦片服务加载
地图瓦片服务加载有两种方式：
1.在初始化时，通过配置加载
2.调用addTileLayer方法加载
1.通过初始化配置加载
在开篇的教程中，我们已经通过这种方式加载过卫星影像底图：
ts
new Viewer(el, {
depthTestTerrain: true, //开启深度检测(遮挡关系)
controlAsMapbox: true, //操作对齐mapbox
imageryLayers: [
{
type: "tile",
option: {
// 卫星影像瓦片
url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png",
},
},
],
})结果展示:
2.调用addTileLayer方法加载
addTileLayer方法支持两种类型的地图服务——xyz瓦片和wms地图服务
加载xyz瓦片
在上面通过配置加载卫星影像的例子中，实际上加载的地图服务就是xyz瓦片，下面我们换一个xyz地图数据源试试：
ts
fair.addTileLayer({
type: "tile",
option: {
url: "https://server.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}.png",
},
})结果展示：
加载wms服务
ts
//加载中国省级行政区划wms服务
fair.addTileLayer({
type: "wms",
option: {
url: "/geoserver/YX_yimin/wms",
layers: "YX_yimin:china_province",
parameters: {
transparent:"TRUE", //启用透明
format:"image/png"
},
},
})结果展示：
wms服务也支持通过sld_body参数动态设置样式：
ts
fair.addTileLayer({
type: "wms",
option: {
url: "/geoserver/YX_yimin/wms",
layers: "YX_yimin:china_province",
parameters: {
transparent: "TRUE", //启用透明
format: "image/png",
SLD_BODY: `<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.1.0/StyledLayerDescriptor.xsd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ogc="http://www.opengis.net/ogc" xmlns:se="http://www.opengis.net/se" version="1.1.0">
<NamedLayer>
<se:Name>china_province</se:Name>
<UserStyle>
<se:FeatureTypeStyle>
<se:Rule>
<se:Name>Single symbol</se:Name>
<se:PolygonSymbolizer>
<se:Fill>
<se:SvgParameter name="fill">#449911</se:SvgParameter>
<se:SvgParameter name="fill-opacity">0.5</se:SvgParameter>
</se:Fill>
<se:Stroke>
<se:SvgParameter name="stroke">#814545</se:SvgParameter>
<se:SvgParameter name="stroke-width">2</se:SvgParameter>
<se:SvgParameter name="stroke-linejoin">bevel</se:SvgParameter>
</se:Stroke>
</se:PolygonSymbolizer>
</se:Rule>
</se:FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
`,渲染结果：
