arcgis学习系列-3向地图中添加Layer_arcgis新建layer-CSDN博客

本文链接：https://blog.csdn.net/naturessdfsafagf/article/details/102516484

概述

本篇你将学习如何往2D地图中加载feature图层。
使用arcgis api for javascript可以很简单的创建一个web地图app展示基础地图和图层。Arcgis online拥有大量的tile和vector tile基础地图，包括街道、卫星图、矢量街道图、矢量街道导航图等，你可以从中进行选择。
你也可以通过添加feature layers.来加载自己的数据集。这些图层由arcgis online寄存或由其他的arcgis服务寄存。默认情况下会使用预先定制的符号绘制feature layer层到地图中，不过也可以使用renderer提供自己的风格。
Feature layer的数据也是可控的，通过写一条sql表达式来限制数据检索即可实现。
另外一种常见的自定义的操作是配置一个弹出窗口，当用户点击feature layer时弹出，用于展示图层的信息。

在这片文章中，你将建造一个app，使用基础地图和feature层来展示洛杉矶附件的小路起点。
现在让我们开始吧！

步骤

参照练习1创建一个地图应用程序。
在require添加FeatureLayer模块

   require([
      "esri/Map",
      "esri/views/MapView",
      //*** ADD ***//
      "esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {}

在主函数的最后创建一个FeatureLayer对象，并设置url属性为Trailheads终结点，然后添加图层到地图中。

    // Trailheads point feature layer
      var featureLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
      });

      map.add(featureLayer);

备注：如果图层没有预先配置和保存样式，api会使用默认的图标加载所有的图层。因此如果要提高图层的可视性，学习如何定制图层样式，请参阅：《练习4》

运行应用程序。

恭喜，你做到了！！！！

继续挑战

添加更过的图层
使用下面的url，创建线图层和多边形图层。先添加线图层和多边形图层，这样点图层就会在最上面。
• Trails (line)

https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0

• Parks and Open Spaces (polygon)

https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0

过滤feature层
Feature层相当于一条查询返回的结果集，通过增加查询条件可以限制返回的结果数量。

  // Trails
      var featureLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        definitionExpression: "ELEV_GAIN < 250"
      });

完整的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css">
    <style>
        body{
           
        }
        #mapView{
            width:600px;
            height:400px;
        }
    </style>
    <script src="https://js.arcgis.com/4.11/"></script>
    <script>
        require([
            'esri/Map',
            //'esri/views/SceneView',
            'esri/views/MapView',
            'esri/widgets/BasemapToggle',
            'esri/widgets/BasemapGallery',
           'esri/layers/FeatureLayer'
        ], function (Map, MapView, BasemapToggle,BasemapGallery,FeatureLayer) {
            var map = new Map({
                basemap:"topo-vector"
            });
            var mv = new MapView({
                container: "mapView",
                map: map,
                center: [-118.71511, 34.09042],
                zoom: 11,
                //camera: {
                //    tilt: 65,
                //    position: {
                //        x: 118.44647,
                //        y: 36.872738,
                //        z: 2000
                //    }
                //}
            });

            //切换基础地图01
            //var mapTog = new BasemapToggle({
            //    view: mv,
            //    nextBasemap:"satellite"
            //});
            //mv.ui.add(mapTog,"bottom-right");

            //切换基础地图02
            var mapGal = new BasemapGallery({
                view: mv,
                source: {
                    portal: {
                        url: "https://www.arcgis.com",
                        useVectorBaseMaps:false
                    }
                }
            });
            mv.ui.add(mapGal, "top-right");

            /***************************/
            //添加Point 图层
            var fl = new FeatureLayer({
                url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"

            });
            map.add(fl);
            /**************************/
        });

    </script>

</head>
<body>
    <div id="mapView">

    </div>
</body>
</html>