arcgis javacript4.x加载WMS服务图层

最新推荐文章于 2024-07-08 16:55:35 发布

FlyToTheWorld

最新推荐文章于 2024-07-08 16:55:35 发布

阅读量721

点赞数

文章标签：其他

本文链接：https://blog.csdn.net/flytotheworld/article/details/123826435

版权

arcgis javacript 3.x加载WMS图层

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map with WMS</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.39/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

  </style>
  <script src="https://js.arcgis.com/3.39/"></script>
  <script>
    var map;
    require([
      'esri/map', 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', 'esri/geometry/Extent',
      'dojo/_base/array', 'dojo/dom', 'dojo/dom-construct', 'dojo/parser', "esri/InfoTemplate", "esri/toolbars/draw",
      "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/graphic", "esri/Color",
      "dojo/on", "esri/geometry/Polyline", "esri/symbols/PictureMarkerSymbol", "esri/dijit/BasemapGallery", "esri/symbols/SimpleFillSymbol",
      "esri/geometry/Polygon", "esri/symbols/Font",
      'dojo/domReady!'
    ], function (Map, WMSLayer, WMSLayerInfo, Extent, array, dom, domConst, parser,
      InfoTemplate, Draw, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, Color, on, Polyline, PictureMarkerSymbol,
      BasemapGallery, SimpleFillSymbol, Polygon, Font) {
      //parser.parse();
      ///加载图层
      map = new Map('map', {
        basemap: "osm",
        center: [121.07, 37.686],
        zoom: 14
      });

      //构建图层
      var layer1 = new WMSLayerInfo({
        name: 'shelby:wanhuaShpGroup',
        title: 'satellite'
      });
      var resourceInfo = {
        extent: new Extent(-126.40869140625, 31.025390625, -109.66552734375, 41.583203125, {//左下角到右上角的点坐标
          wkid: 4326//坐标系设置为GCS_WGS_1984
        }),
        layerInfos: [layer1]
      };
      var wmsLayer = new WMSLayer('http://localhost:8080/geoserver/shelby/wms', {//geoserver中wms服务地址
        resourceInfo: resourceInfo,
        visibleLayers: ['shelby:wanhuaShpGroup'],//geoserver中发布图层的名称（工作区：图层名字）
      });
      map.addLayers([wmsLayer]);
    });
  </script>
</head>

<body class="claro">
    <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
    </div>
  </div>
</body>

</html>

arcgis javacript 4.x加载WMS图层

注意在4.x中，WMSLayerInfo不再时对象，不能new。将构建图层的代码换成下面的即可加载WMS服务图层

let layer = new WMSLayer({
                url: "http://localhost:8080/geoserver/shelby/wms",// url to the service,
                sublayers: [{
                    name: "shelby:wanhuaShpGroup"// name of the sublayer,
                    //legendUrl: // url to the legend
                }]
            });
            map.add(layer);

FlyToTheWorld

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫