高德地图加载WMS服务

最新推荐文章于 2024-07-19 17:16:05 发布

无状态746

最新推荐文章于 2024-07-19 17:16:05 发布

阅读量997

点赞数 8

文章标签： html5

本文链接：https://blog.csdn.net/qq_67323801/article/details/134737189

版权

使用高德地图api加载第三方标准图层wms，wms服务发布于geoserver。

结果：

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>map</title>
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <style>
      html,
      body,
      #container {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>

    <!--高德地图的key-->
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "你的code",
      };
    </script>

    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"
    ></script>

    <script>
      //加载高德标准地图
      var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [108, 34],
        layers: [
          //只显示默认图层的时候，layers可以缺省
          new AMap.TileLayer(), //高德默认标准图层
        ],
        zoom: 3.5,
      });
      //加载geoserver发布的wms地图服务
      var wms = new AMap.TileLayer.WMS({
        url: "http://localhost:8090/geoserver/temperature/wms",//一直错在没有加最后一个wms！！！！！
        blend: true,
        zooms: [0, 8],
        tileSize: 256,
        opcaity: 0.5,
        params: {
          'LAYERS': 'temperature:web-mer', //wms地图服务GetMap参数里的layers,工作空间:图层名
          VERSION: "1.1.0",
          SRS: "EPSG:3857",
        },
      });
      wms.setMap(map);
    </script>
  </body>
</html>

参考官网示例：

WMS-三方标准图层-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)

遇到的问题：

看官网url的参数说明的时候，以为url是geoserver的工作空间uri

试了半天也不显示，控制台报错如下

点开链接也是404。后来才发现url应该是在geoserver中点击Layer Preview，打开要加载的wms服务的地址，之前少了后面的/wms

很蠢的问题。

ps话说官网给的wms服务url好像不能打开了？

无状态746

关注

8
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
高德地图加载WMS服务

点开链接也是404。后来才发现url应该是在geoserver中点击Layer Preview，打开要加载的wms服务的地址，之前少了后面的/wms。使用高德地图api加载第三方标准图层wms，wms服务发布于geoserver。看官网url的参数说明的时候，以为url是geoserver的工作空间uri。ps话说官网给的wms服务url好像不能打开了？试了半天也不显示，控制台报错如下。
复制链接

扫一扫