ArcGIS API for JS4.7加载ArcGIS Server发布的REST和WMS地图服务

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

GIS开发者

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

阅读量4.7k

点赞数 3

分类专栏： ArcGIS操作与开发 WebGIS开发文章标签： ArcGIS Server WMS MapIamgeLayer

本文链接：https://blog.csdn.net/GISuuser/article/details/81099355

版权

WebGIS开发同时被 2 个专栏收录

77 篇文章 119 订阅

订阅专栏

ArcGIS操作与开发

48 篇文章 22 订阅

订阅专栏

使用ArcGISAPI for JS4.7加载ArcGIS Server发布的REST和WMS地图服务，ArcGIS Server为本机安装，需要提前完成跨域设置。

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>ArcGIS demo</title>
    <link type="text/css" rel="stylesheet" href="http://localhost/arcgis/esri/css/main.css"/>
    <script src="http://localhost/arcgis/init.js"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="viewDiv"></div>
<script>
    require(["esri/Map",
        "esri/config",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/geometry/Extent",
        "esri/layers/WMSLayer",
        "dojo/domReady"
    ], function (Map,
                 esriConfig,
                 MapView,
                 MapImageLayer,
                 Extent,
                 WMSLayer) {
        esriConfig.request.corsEnabledServers.push("localhost:6443");//设置地图服务器已允许跨域
        var map = new Map({
					basemap: "streets"//ESRI提供的底图
        });
        var view = new MapView({
            map: map,
            container: "viewDiv",
        });
        view.ui.remove("attribution");//移除底部ESRI logo
        //添加ArcGIS动态切片
        // var layer = new MapImageLayer({
        // 	url: "https://localhost:6443/arcgis/rest/services/zhengzhou/MapServer"
        // });
        // map.add(layer);
        //加载WMS地图服务
        var layer = new WMSLayer({
            url: "https://localhost:6443/arcgis/services/zhengzhou/MapServer/WMSServer",
            version: "1.1.1"
        });
        map.add(layer);
        //设置地图显示范围
        view.extent = new Extent({
            xmin: 113.642578125,
            ymin: 34.7222900390625,
            xmax: 113.73870849609375,
            ymax: 34.78546142578125,
            spatialReference: {
                wkid: 4326
            }
        });
    })
</script>
</body>

</html>

运行效果如下：

运行结果