ArcGIS中根据不同的比例尺下,显示不同的要素怎么设置？

Question

ArcGIS中根据不同的比例尺下,显示不同的要素怎么设置？类似高德地图，比如一开始默认显示的是路线，和政府，放大一级显示的内容更多，放到最大，显示的最详细。比例尺缩小，显示的内容就少，这种怎么实现效果？

Answer 1

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7398582
• 您还可以看一下 黄晓军老师的ArcGIS在国土空间·城乡规划中的实战应用课程中的 计算及重分类各类因子小节, 巩固相关知识点
  
• 除此之外, 这篇博客: ArcGIS 地图的一些常用方法汇总中的 4.我直接贴上整个代码，附带注释。以供更好的理解，或整体使用。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  代码如下（示例）：

      createMapView() {
        var map;
        var view;
        var that = this;
        var nnerId = "";
        loadModules([              //引入的这些注意顺序，有时候顺序不对，也会报错加载不出来的。
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Sketch", //绘图小组件
          "esri/Graphic", //现实世界地理现象的矢量表示
          "esri/layers/GraphicsLayer", //绘制图层
          "esri/layers/GroupLayer",
          "esri/layers/MapImageLayer",
          "esri/layers/TileLayer",
          "esri/layers/FeatureLayer", //矢量图层
          "esri/renderers/HeatmapRenderer",
          "esri/widgets/LayerList",
          "esri/tasks/support/Query", //用于从图层或图层视图执行要素查询的参数
          "esri/tasks/QueryTask", //查询操作
          "esri/symbols/SimpleLineSymbol", //	创建线符号
          "esri/symbols/SimpleFillSymbol", //  创建面符号
          "esri/widgets/Slider",
          "esri/geometry/Point",
          "dojo/dom", //定义了核心 dojo DOM 构建 API（dom.byid)
          "dojo/on", //用于 DOM 节点和其他事件发射对象的通用事件处理程序模块，提供规范化的事件侦听和事件调度功能。
          "esri/Color", //创建新的颜色对象
        ]).then(
          ([
            config,
            Map,
            MapView,
            Sketch,
            Graphic,
            GraphicsLayer,
            GroupLayer,
            MapImageLayer,
            TileLayer,
            FeatureLayer,
            HeatmapRenderer,
            LayerList,
            Slider,
            QueryTask,
            Query,
            SimpleFillSymbol,
            SimpleLineSymbol,
            Point,
            dom,
            on,
            Color,
          ]) => {
            var layer = new TileLayer({
              url: "",   //注释：地图分为电子地图，影像地图等多种。（看你需要的是省市地图，还是全国地图，把地图链接放在这里。默认加载的就是当前的地图图层。）
            });
            map = new Map();
            map.add(layer);
  
            // 初始化图层视角
            const view = new MapView({
              container: "viewDiv",     //跟页面的id相对应
              map: map,
              popup: { defaultPopupTemplateEnabled: true }, //开启"FeatureLayer"特征图层属性弹窗
            });
  
            // 初始化地图视角和视图更新
            const location = new Point({
              x: this.longitude,     //经纬度，视角
              y: this.latitude,
              spatialReference: 4490,
            });
            view.center = location;
            view.zoom = this.zooms;   //视角大小
            // view.zoom = 6;
  
            //创建多个不同类型的图层，并进行组合，以列表的方式显示
            const FWM = new FeatureLayer({
              url: "",     //楼栋图层，点击可以获取当前的楼栋信息。(根据你自己需求，可用可不用)
              title: "楼栋图层",
              visible: false,
              outFields: ["*"],
            });
            const yxLayer = new TileLayer({
              url: "",  //对应的另一种地图。
              title: "影像地图",
              visible: false,
            });
  
            var citiesRenderer = {
              type: "simple", // autocasts as new SimpleRenderer()
              symbol: {
                type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                size: 6,
                color: "black",
                outline: {
                  // autocasts as new SimpleLineSymbol()
                  width: 0.5,
                  color: "white",
                },
              },
            };
            // 视频监控图层
            var citiesLayer = new FeatureLayer({
              id: "video",
              title: "视频监控图层",
              outFields: ["channo", "id"], //获取图层表字段，"*"=返回所有字段，字段名称=返回指定字段
              url: "", //视频图层
              renderer: citiesRenderer,
            });
            //地图的点击事件
            view.on("click", function (event) {
              view.hitTest(event).then(function (response) {
                if (response.results.length) {
                  var graphic = response.results.filter(function (result) {
                    return result.graphic.layer === citiesLayer;
                  })[0].graphic;
                  console.log(graphic.attributes.channo);  
                 //可以获取到当前点击的楼栋或视频编码信息。当然要进行视频播放的话，还得需要播放器等
                } else {
                  console.log("选中图层内容,才能返回数据");
                }
              });
            });
  
            //组合图层
            const demographicGroupLayer = new GroupLayer({
              title: "图层控制",
              // visible: false,
              visibilityMode: "independent", //exclusive=图层互斥，始终显示一个，inherited=图层叠加显示
              layers: [yxLayer, FWM, citiesLayer],   //多个图层组合起来。
              opacity: 1, //图层透明度
            });
            map.add(demographicGroupLayer); // 添加图层组到地图
  
            //创建图层列表小部件，并添加至右上角
            view.when(() => {
              const layerList = new LayerList({
                view: view,
              });
              view.ui.add(layerList, "top-left");
            });
            view.ui.move("zoom", "bottom-right");
            //添加绘图小部件
            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);
            view.when(() => {
              var sketch = new Sketch({
                layer: graphicsLayer,
                view: view,
                //single:只能操作一次，再次操作需要选择操作
                //continuous:连续操作
                //update:操作完成后，将选择图形进行更新操作
                creationMode: "update",
              });
              view.ui.add(sketch, "top-right");
  
              sketch.on("create", function (event) {
                if (event.state === "complete") {
                  console.log(event);
                  //使用graphic.geometry 去查询相交特征
                  //console.log(event.graphic.geometry);
                  //使用geometry（QueryTask）
                  querysTask(event.graphic.geometry);
                }
              });
            });
  
            //去掉地图右下角logo
            view.ui._removeComponents(["attribution"]);
            view.on("click", function (e) {
              console.log(e);
            });
            //4.7空间查询（QuerysTask）
            function querysTask(geometry) {
              // console.log(geometry);
              var china =
                "http://10.101.21.140:81/ServiceAdapter/MAP/FWM2000/f61896e203dbb6216c19a86c1364da20/0";
              var qTask = new QueryTask({
                url: china, //全国矢量
              });
              var query = new Query({
                returnGeometry: true,
                outFields: ["*"], //结果要素包含的属性字段
              });
              query.geometry = geometry;
              query.where = "1=1";
              //空间参考信息
              query.outSpatialReference = map.spatialReference;
              //查询的标准，此处代表和geometry相交的图形都要返回
              query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
              // //执行空间查询
              qTask.execute(query).then(function (results) {
                showQueryResult(results.features);
              });
            }
  
            //4.8执行查询
            function showQueryResult(queryResult) {
              console.log("queryResult:", queryResult);  //用图标工具选中的地方全部的楼栋名称及经纬度
              //创建线符号
              var lineSymbol = new SimpleLineSymbol(
                SimpleLineSymbol.STYLE_DASH,
                new Color([0, 255, 0, 0.5])
              ); //rgba:0.5是设置的透明度
              //创建面符号
              var fill = new SimpleFillSymbol(
                SimpleFillSymbol.STYLE_SOLID,
                new Color([0, 255, 0])
              );
              if (queryResult.length == 0) {
                dom.byId("divShowResult").innerHTML = "查询结果为空！";
                return;
              }
              var htmls = "";
              if (queryResult.length >= 1) {
                htmls = htmls + '<table style="text-align: center;width: 100%;">'; //创建一个表，使用了转义字符
                htmls = htmls + "<tr><th>楼栋信息</th></tr>";
                for (var i = 0; i < queryResult.length; i++) {
                  htmls = htmls + "<td>" + queryResult[i].attributes.MC + "</td>";
                  htmls = htmls + "</tr>";
                }
                htmls = htmls + "</table>";
                dom.byId("tasblea").innerHTML = htmls;   //这是我自己写的进行了一个循环，展示我所选中的所有楼栋名称，在页面中显示出来。
              }
            }
            //下面的两个方法，一个是经纬度，一个是圆点样式的设置。用来在地图中显示当前定位的地方。
            const polygon = {
              type: "point",
              longitude: this.longitude,
              latitude: this.latitude,
            };
            // console.log(this.longitude);
            const simpleFillSymbol = {
              type: "simple-marker",
              color: [116, 15, 224], // Orange
              outline: {
                color: [255, 255, 255], // White
                width: 2,
              },
            };
            const pointGraphic = new Graphic({
              geometry: polygon,
              symbol: simpleFillSymbol,
            });
  
            graphicsLayer.add(pointGraphic);
  
  		 //热力图
            var heatmapRenderer = new HeatmapRenderer({
              //设置渲染器
              colorStops: [
                { ratio: -0.1, color: "rgba(0, 255, 0, 0)" },
                { ratio: 0.5, color: "rgba(255, 140, 0, 1)" },
                { ratio: 0.9, color: "rgba(255, 0,   0, 1)" },
              ],
              blurRadius: 6, //确定一个点周围的影响区域
              //maxPixelIntensity: 20,
              //minPixelIntensity: 20
            });
  
            var heatDataUrl = ``;  //热力图的经纬度接口。
            $.getJSON(heatDataUrl, {}, function (data, textStatus, jqXHR) {
              //读取数据，设置点数据集
              var features = [];
              for (var i = 0; i < data.data.length; i++) {
                var x = data.data[i].lng;
                var y = data.data[i].lat;
                features.push({
                  geometry: {
                    type: "point",
                    x: x,
                    y: y,
                  },
                  attributes: {
                    ObjectID: i, //重要！！！
                  },
                });
              }
              var featureLayer = new FeatureLayer({
                source: features, //点数据集
                title: "热力图",
                objectIdField: "ObjectID", //重要！！！
                renderer: heatmapRenderer, //渲染器
              });
              map.add(featureLayer);
            });
          }
        );
      },
  

  ---

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^