Arcgis api for JavaScript 4.X 学习——图层加载（要素图层、栅格图层、切片图层）

本文链接：https://blog.youkuaiyun.com/Yuewayio/article/details/124242589

本文详细介绍了如何使用ArcGIS JavaScript API加载矢量图层、栅格图层以及切片图层。示例代码涵盖了从创建FeatureLayer和MapImageLayer到添加到地图中显示的全过程，并提供了包含指北针、搜索控件等的完整HTML代码。此外，还展示了如何将切片服务作为底图以及单独加载切片图层的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 一定要掌握对应需求在官网中查询信息的能力，比如说要加载图层那么就需要对应到api reference下的layers下对应查找API Referencehttps://developers.arcgis.com/javascript/latest/api-reference/

2. 加载矢量图层，显示本地地图服务（FeatureLayer）

引入featurelayer库

require(["esri/layers/FeatureLayer"], (FeatureLayer) => { /* code goes here */ });

创建FeatureLayer，下面代码中的url需替换成自己的本地地图服务

var pointLayer= new FeatureLayer({

url: "http://localhost:6080/arcgis/rest/services/hubei/湖北/MapServer/0"

});

将图层加载到地图中显示

map.add(pointLayer);

3. 加载栅格图层，显示本地栅格地图服务（MapImageLayer）

引入MapImageLayer模块

require(["esri/layers/MapImageLayer"], (MapImageLayer) => { /* code goes here */ });

创建栅格图层，url自行替换

const RasterLayer = new MapImageLayer({

url: " http://localhost:6080/arcgis/rest/services/raster/raster/MapServer"

});

将栅格图层加载到地图中

map.add(RasterLayer);

4. 完整html代码附上（代码中添加了指北针、home键，搜索控件等可在API Reference->widgets下自行查找需要的控件）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      实例一
    </title>

    <link rel="stylesheet" href="http://localhost/4.18/esri/themes/light/main.css" />
    <script src="http://localhost/4.18/dojo/dojo.js"></script>

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

    <script>
      require([
        "esri/Map", 
        "esri/views/MapView", 
        "esri/layers/MapImageLayer",
        "esri/widgets/BasemapGallery",
        "esri/widgets/BasemapToggle",
        "esri/widgets/Home",
        "esri/widgets/Compass",
        "esri/widgets/LayerList",
        "esri/widgets/Legend",
        "esri/widgets/Search",
        "esri/layers/FeatureLayer"], 
          (
            Map,
            MapView,
            MapImageLayer,
            BasemapGallery,
            BasemapToggle,
            Home,
            Compass,
            LayerList,
            Legend,
            Search,
            FeatureLayer
      ) => {
        const map = new Map({
          basemap: "topo-vector"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center:[114.31667,30.51667],
          zoom: 7 }
        });


        const RasterLayer = new MapImageLayer({
          url: " 	http://localhost:6080/arcgis/rest/services/raster/raster/MapServer",
          title: "湖北栅格数据"
        });

        var pointLayer= new FeatureLayer({
          url: "http://localhost:6080/arcgis/rest/services/hubei/湖北/MapServer/0",
          title: "湖北点数据"       
        });

        var hbLayer= new FeatureLayer({
          url: "http://localhost:6080/arcgis/rest/services/hubei/湖北/MapServer/2",
          title: "湖北面数据" ,
          visible: false   
        });
        var countryLayer= new FeatureLayer({
          url: "http://localhost:6080/arcgis/rest/services/hubei/湖北/MapServer/1",
          title: "湖北线数据" ,
          visible: false      
        });
        const basemapToggle = new BasemapToggle({
          view: view,  
          nextBasemap: "hybrid"  
        });
        //添加
        const basemapGallery = new BasemapGallery({
          view: view
        });
        const homeWidget=new Home({
          view:view
        });
        const compass=new Compass({
          view: view
        });
        const layerList = new LayerList({
          view: view
        });
        const legend = new Legend({
          view: view
        });
        const searchWidget=new Search({
          view: view
        });

        
        map.add(RasterLayer);
        map.add(pointLayer);
        map.add(hbLayer);
        map.add(countryLayer);

        view.ui.add(compass, "top-left");
        view.ui.add(legend, { position: "bottom-right"});
        view.ui.add(homeWidget,"top-left");
        view.ui.add(compass,"top-left");
        view.ui.add(layerList,"top-right");
        view.ui.add(searchWidget,{
          position: "top-right",
          index: 0 //多个控件处于一个位置时，控制该插件在第几个出现
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

5. 矢量图层、栅格图层加载实现效果如下：

6. 切片图层加载（TileLayer）

（1）直接加切片服务当作底图（basemap）加载

注：记得在前面引入tilelayer模块

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      切片服务加载
    </title>

    <link rel="stylesheet" href="http://localhost/4.18/esri/themes/light/main.css" />
    <script src="http://localhost/4.18/dojo/dojo.js"></script>

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

    <script>
      require([
				"esri/Map",
				"esri/views/MapView",
				"esri/layers/TileLayer",
				"esri/Basemap"
			], function(Map,
				MapView,
				TileLayer,
				Basemap) {
        //自定义底图为发布的切片服务
				var basemap = new Basemap({
					baseLayers: [
						new TileLayer({
							url: "	http://localhost:6080/arcgis/rest/services/vector/HBvector/MapServer",
							title: "Basemap"
						})
					],
					title: "basemap",
					id: "basemap"
				});

				var map = new Map({
					basemap: basemap
				});

				var view = new MapView({
					container: "viewDiv",
					map: map,
					center: [114.31667,30.51667],//此部分自行选择视图中心经纬度
					zoom: 5
				});
			});

    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

成果展示如下

（2）加载切片图层

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      切片图层加载
    </title>

    <link rel="stylesheet" href="http://localhost/4.18/esri/themes/light/main.css" />
    <script src="http://localhost/4.18/dojo/dojo.js"></script>

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

    <script>
      require([
                "esri/Map",
                "esri/views/MapView",
                "esri/layers/TileLayer",
                "esri/layers/MapImageLayer",
                "esri/Basemap",
                "esri/widgets/BasemapToggle"
            ], function(Map,
                MapView,
                MapImageLayer,
                TileLayer,
                Basemap, BasemapToggle) {

                const tileLayer = new TileLayer({
                    url: "  http://localhost:6080/arcgis/rest/services/hbqiepian2/hubei2/MapServer"
                });

                var map = new Map({
                    basemap: "streets",
                    layers:[tileLayer]
                });

                var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    center: [114.31667,30.51667],
                    zoom: 5
                });
                
            });

    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

效果如下（注：页面第一次加载进来的时候，可能直接看不到切片图层，先右击检查看一下页面是否会报错，无报错的情况下缩放视图等待一会儿即可出现。）