高德地图API添加GeoServer发布的WMS图层

内容摘要：

在加载高德地图API的基础上，利用GeoServer发布shp格式的WMS图层，将WMS图层对应显示在高德地图上，并设置图层样式。

目录

 一、设置投影坐标

 二、添加图层样式

三、关键代码实现

---

 一、设置投影坐标

ArcMap版本：10.7 

通过查询高德地图JS API参考手册可知，高德地图仅支持符合OGC标准的EPSG3857坐标系统的WMS和WMTS地图服务，因此首先在ArcMap中设置图层的投影方式为EPSG3857坐标系统对应的WGS 1984 Web Mercator (Auxiliary Sphere)。

高德地图官方文档：WMS/WMTS-参考手册-地图 JS API 1.4 | 高德地图API (amap.com)

 若图层未定义投影坐标系，选择ArcToolBox中的数据管理工具→投影和变换→定义投影，

 若图层已定义投影坐标系，选择ArcToolBox中的数据管理工具→投影和变换→投影。

将修改后的图层数据导出，在GeoServer上发布，若坐标参考系统中本机SRS读取为EPSG:3857即为成功设置投影坐标系。

 二、添加图层样式

在GeoServer的数据→Styles中为图层添加样式。

设置name为style1，Format选择SLD，Style Editor中全部代码如下：

（本例设置填充色为#5698c3蓝色，透明度为0.2，边框为#000000黑色，宽度为1）

<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
    xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
    xmlns="http://www.opengis.net/sld"
    xmlns:ogc="http://www.opengis.net/ogc"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <NamedLayer>
    <Name>dongbei</Name>
    <UserStyle>
      <Title>Custom Style with Red Fill</Title>
      <FeatureTypeStyle>
        <Rule>
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">#5698c3</CssParameter> <!-- 蓝色填充 -->
              <CssParameter name="fill-opacity">0.2</CssParameter> <!-- 设置透明度为0.2 -->
            </Fill>
            <Stroke>
              <CssParameter name="stroke">#000000</CssParameter> <!-- 黑色边框 -->
              <CssParameter name="stroke-width">1</CssParameter>
            </Stroke>
          </PolygonSymbolizer>
        </Rule>
      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

 提交样式，在JavaScript中添加'STYLES': 'style1' 即可使用该样式。

三、关键代码实现

在HTML中添加加载地图的代码如下：

//地图容器
<div id="container"></div>
<script src="//webapi.amap.com/maps?v=2.0&key=你申请的Key"></script>

在JavaScript中添加加载WMS图层的代码如下：

// 加载高德地图
var map = new AMap.Map('container', {
        zoom: 9.6, //设置缩放级别
        center: [121.456493, 31.252764] //设置中心点坐标
    });

// 加载WMS图层
    var wms = new AMap.TileLayer.WMS({
        url: 'http://localhost:8008/geoserver/geoserver/wms', //此处修改为你的地址
        blend: true,
        blend: true,
        tileSize: 256,
        params: {
          'LAYERS': 'geoserver:example', //此处修改为你的图层名称
           VERSION: '1.1.0',
          'STYLES': 'style1' // 指定样式名称
        }
    });

//显示WMS图层
    wms.setMap(map); 

---

欢迎交流🌹🌹