对要素应用效果

尝试一下在线预览
此示例演示如何使用空间关系来发现要素在空间上如何相互关联。它在 layerViews 上设置一个 featureEffect 以显示满足空间过滤器的特征，同时将不满足空间过滤器的特征灰显。这可以通过创建一个新的 FeatureEffect 并指定它的 filter 和 excludedEffect 属性来完成。然后可以将 featureEffect 对象应用到图层视图的 featureEffect 属性。
工作原理

应用程序加载后，用户可以选择：
层 - 设置空间过滤器
预定义几何 - 查看图层中的特征如何在空间上与此几何相关
空间关系 - 指定您希望在几何之间看到的空间关系类型
距离 - 围绕预定义几何创建缓冲区并使用缓冲区进行空间过滤
单位 - 指定应用到缓冲区的距离单位
当用户进行选择以显示空间过滤器中包含的要素时，图层将更新，同时使空间过滤器中排除的要素变暗。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Apply effects to features | Sample | GeoScene API for JavaScript 4.22</title>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

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

      #infoDiv {
        background-color: white;
        padding: 10px;
        width: 260px;
        margin: 5px;
        position: absolute;
        bottom: 15px;
        right: 10px;
        font-size: 14px;
        display: none;
      }

      .geometry-options {
        display: flex;
        flex-direction: row;
      }

      .geometry-button,
      .layer-button {
        flex: 1;
        border-style: solid;
        border-width: 1px;
        border-image: none;
      }

      .geometry-button-selected {
        background: #4c4c4c;
        color: #fff;
      }

      .options {
        max-width: 260px;
        width: 100%;
        height: 25px;
      }

      #distanceNum {
        width: 100%;
        height: 60px;
      }
    </style>
    <script>
      require([
        "geoscene/WebMap",
        "geoscene/layers/GraphicsLayer",
        "geoscene/views/MapView",
        "geoscene/Graphic",
        "geoscene/core/watchUtils",
        "geoscene/geometry/geometryEngine",
        "geoscene/widgets/Slider"
      ], (WebMap, GraphicsLayer, MapView, Graphic, watchUtils, geometryEngine, Slider) => {
        let bufferGraphic, featureLayerView;
        let featureFilter = {};
        let layerViews = {};
        let filterGeometries = {};

        //FeatureFilter variables
        let filterGeometry = null;
        let geometryRel = "intersects";
        let distance = 0;
        let unit = "meters";

        const map = new WebMap({
          portalItem: {
            id: "971eae060595416283eaac4ad54cbbda"
          }
        });

        const bufferGeometriesLayer = new GraphicsLayer();

        map.load().then(() => {
          // add the graphics layer to the top once webmap loads
          map.layers.unshift(bufferGeometriesLayer);
          // loop through webmap's operational layers
          map.layers.forEach((layer, index) => {
            // loop through all layerviews, add them to global variable
            // so that they can be accessed later for filtering
            view.whenLayerView(layer).then((layerView) => {
              if (layer.type === "feature") {
                let type = layer.geometryType;
                layerViews[type] = layerView;
                if (layerView.layer.geometryType === "point") {
                  // set the point layer view as the active layer view
                  featureLayerView = layerView;
                }
              }
            });
          });
        });

        let view = new MapView({
          map: map,
          container: "viewDiv",
          padding: { right: 260 }
        });

        // geometry filter distance UI components
        const distanceUnit = document.getElementById("distance-select");
        const spatialRelType = document.getElementById("relationship-select");

        const distanceNum = new Slider({
          container: "distanceNum",
          min: 0,
          max: 1000,
          values: [0],
          steps: 1,
          visibleElements: {
            rangeLabels: true,
            labels: true
          }
        });

        // listen to change and input events on UI components
        distanceNum.on("thumb-drag", distanceVariablesChanged);
        distanceUnit.onchange = distanceVariablesChanged;
        spatialRelType.onchange = distanceVariablesChanged;

        // get user entered values from distance related options
        function distanceVariablesChanged() {
          unit = distanceUnit.value;
          distance = distanceNum.values[0];
          geometryRel = spatialRelType.value;
          updateBuffer();
        }

        // update the buffer graphic if user is filtering by distance
        function updateBuffer() {
          if (distance > 0 && filterGeometry) {
            const newBufferGeometry = geometryEngine.geodesicBuffer(filterGeometry, distance, unit);
            bufferGeometriesLayer.graphics.getItemAt(0).geometry = newBufferGeometry;
            updateFilter();
          } else {
            bufferGraphic.geometry = null;
            updateFilter();
          }
        }


        // set the geometry filter on the visible FeatureLayerView
        function updateFilter() {
          featureFilter = {
            // autocasts to FeatureFilter
            geometry: filterGeometry,
            spatialRelationship: geometryRel,
            distance: distance,
            units: unit
          };
          // set effect on excluded features
          // make them gray and transparent
          if (featureLayerView) {
            featureLayerView.featureEffect = {
              filter: featureFilter,
              excludedEffect: "grayscale(100%) opacity(30%)"
            }
          }
        }


        // click events for the layer type buttons
        document.getElementById("point-layer-button").onclick = layersChangedClickHandler;
        document.getElementById("line-layer-button").onclick = layersChangedClickHandler;
        document.getElementById("polygon-layer-button").onclick = layersChangedClickHandler;

        // Make the selected layerview visible while setting the other layerviews invisible
        function layersChangedClickHandler(event) {
          for (let key in layerViews) {
            layerViews[key].visible = false;
          }
          const geometryType = event.target.value;
          let layerView = layerViews[geometryType];
          layerView.visible = true;
          featureLayerView = layerView;
          updateBuffer();
          setActiveButton(this);
        }

        // geometry buttons - use the selected geometry to set effect
        document.getElementById("point-geometry-button").onclick = geometryButtonsClickHandler;
        document.getElementById("line-geometry-button").onclick = geometryButtonsClickHandler;
        document.getElementById("polygon-geometry-button").onclick = geometryButtonsClickHandler;
        function geometryButtonsClickHandler(event) {
          const geometryType = event.target.value;

          for (let key in filterGeometries) {
            filterGeometries[key].visible = false;
          }
          const filterGraphic = filterGeometries[geometryType];
          filterGraphic.visible = true;
          filterGeometry = filterGraphic.geometry;

          updateBuffer();
          setActiveButton(this);
        }

        document.getElementById("clearFilter").onclick = () => {
          filterGeometry = null;
          bufferGraphic.geometry = null;
          for (let key in filterGeometries) {
            filterGeometries[key].visible = false;
          }
          updateFilter();
          setActiveButton();
        };

        function setActiveButton(selectedButton) {
          // focus the view to activate keyboard shortcuts for sketching
          const elements = document.getElementsByClassName("geometry-button-selected");
          if (selectedButton) {
            for (let i = 0; i < elements.length; i++) {
              if (elements[i].classList.contains("layer-button") && selectedButton.classList.contains("layer-button")) {
                elements[i].classList.remove("geometry-button-selected");
              } else if (
                elements[i].classList.contains("geometry-button") &&
                selectedButton.classList.contains("geometry-button")
              ) {
                elements[i].classList.remove("geometry-button-selected");
              }
              selectedButton.classList.add("geometry-button-selected");
            }
          } else if (!selectedButton) {
            for (let i = 0; i < elements.length; i++) {
              if (elements[i].classList.contains("geometry-button")) {
                elements[i].classList.remove("geometry-button-selected");
              }
            }
          }
        }

        // add predefined point, line and polygon features
        view.when(() => {
          const polygon = {
            type: "polygon",
            rings: [
              [-8369152.108088223, 4858625.975183949],
              [-8364871.261276581, 4858713.161169337],
              [-8365068.4747812, 4855823.856429268],
              [-8369472.561371844, 4856045.031150761],
              [-8369152.108088223, 4858625.975183949]
            ],
            spatialReference: view.spatialReference
          };
          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: {
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [51, 51, 204, 0.4],
              style: "solid",
              outline: {
                color: "white",
                width: 1
              }
            },
            visible: false
          });
          filterGeometries[polygonGraphic.geometry.type] = polygonGraphic;

          const line = {
            type: "polyline",
            paths: [
              [polygonGraphic.geometry.extent.xmin, polygonGraphic.geometry.extent.ymin],
              [polygonGraphic.geometry.extent.xmax, polygonGraphic.geometry.extent.ymax]
            ],
            spatialReference: view.spatialReference
          };
          const lineGraphic = new Graphic({
            geometry: line,
            symbol: {
              type: "simple-line",
              color: [51, 51, 204, 0.5],
              width: "4px"
            },
            visible: false
          });
          filterGeometries[lineGraphic.geometry.type] = lineGraphic;

          const point = {
            type: "point",
            x: polygonGraphic.geometry.centroid.x,
            y: polygonGraphic.geometry.centroid.y,
            spatialReference: view.spatialReference
          };

          const pointGraphic = new Graphic({
            geometry: point,
            symbol: {
              type: "text",
              color: [51, 51, 204, 0.9],
              text: "\ue61d",
              font: {
                size: 24,
                family: "CalciteWebCoreIcons"
              }
            },
            visible: false
          });
          filterGeometries[pointGraphic.geometry.type] = pointGraphic;

          bufferGraphic = new Graphic({
            symbol: {
              type: "simple-fill",
              color: [151, 151, 204, 0.5],
              style: "solid",
              outline: {
                color: "white",
                width: 1
              }
            },
            visible: true
          });
          bufferGeometriesLayer.addMany([bufferGraphic, polygonGraphic, lineGraphic, pointGraphic]);
          document.getElementById("infoDiv").style.display = "block";
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="infoDiv" class="geoscene-widget">
      <b>Explore spatial relationships</b><br/><br/>
      <label for="layers">Select a layer:</label>
      <div class="geometry-options" id="layers">
        <button
          class="esri-widget--button esri-icon-map-pin layer-button
          geometry-button-selected"
          id="point-layer-button"
          value="point"
          title="Select a point layer to see how it is spatially related to one of the predefined geometries"></button>
        <button
          class="esri-widget--button esri-icon-polyline layer-button"
          id="line-layer-button"
          value="polyline"
          title="Select a line layer to see how it is spatially related to one of the predefined geometries"></button>
        <button
          class="esri-widget--button esri-icon-polygon layer-button"
          id="polygon-layer-button"
          value="polygon"
          title="Select a polygon layer to see how it is spatially related to one of the predefined geometries"></button>
      </div>
      <br />Select a predefined geometry:
      <div class="geometry-options">
        <button
          class="esri-widget--button esri-icon-map-pin geometry-button"
          id="point-geometry-button"
          value="point"
          title="Filter by point"></button>
        <button
          class="esri-widget--button esri-icon-polyline geometry-button"
          id="line-geometry-button"
          value="polyline"
          title="Filter by line"></button>
        <button
          class="esri-widget--button esri-icon-polygon geometry-button"
          id="polygon-geometry-button"
          value="polygon"
          title="Filter by polygon"></button>
      </div>
      <br />
      <label for="relationship-select">Spatial relationship:</label>
      <select id="relationship-select" class="options">
        <option value="intersects" selected>intersects</option>
        <option value="contains">contains</option>
        <option value="crosses">crosses</option>
        <option value="envelope-intersects">envelope-intersects</option>
        <option value="overlaps">overlaps</option>
        <option value="touches">touches</option>
        <option value="within">within</option>
        <option value="disjoint">disjoint</option> </select><br /><br />
      <div class="tooltip">
        <label for="distanceNum">Change distance:</label>
        <div id="distanceNum"></div>
      </div>
      <label for="distance-select">Distance unit:</label>
      <select id="distance-select" class="options">
        <option value="meters">meters</option>
        <option value="kilometers">kilometers</option>
        <option value="feet">feet</option>
        <option value="miles">miles</option>
        <option value="nautical-miles">nautical-miles</option> </select><br /><br
        /><br />
      <button class="geoscene-button" id="clearFilter" type="button">Clear all
        filter</button>
    </div>
  </body>
</html>
MapView
FeatureEffect
FeatureFilter
GeoScene API for JavaScript示例中心

对要素应用效果

工作原理
