arcgis for js 如何用contains过滤数据

添加全部数据

// 构建map容器
var view = new MapView({
    container: 'mapId',
    map: map
});
/********************
       * 添加底图
********************/
var imageLayer = new MapImageLayer({
    url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
     id: 'basicLayer'
});
map.add(imageLayer)

 通过geojson添加边界数据（这里以北京为例）

var geojsonLayer = new GeoJSONLayer({
   id: 'beijing',
   url: './data/beijing.json'
});
map.add(geojsonLayer)

因为我的geojson数据是墨卡托，底图数据是经纬度，所以还要进行墨卡托转经纬度的转换，并根据边界数据进行地图定位

// 查询北京范围内的geometry并进行坐标转换
map.findLayerById('beijing').queryFeatures().then((res) => {
   let tempArr = []
   res.features[0].geometry.rings[0].forEach((item, index) => {
       tempArr.push(_getLngLat(item))
    })
    res.features[0].geometry.rings[0] = tempArr
    geometryBeiJing = res.features[0].geometry
    view.goTo(geometryBeiJing)
})
/**
   * 墨卡托转经纬度
   * @param poi 墨卡托
   * @returns {{}}
   * @private
*/
function _getLngLat(poi){
   var lnglat = [];
   lnglat[0] = poi[0]/20037508.34*180;
    var mmy = poi[1]/20037508.34*180;
    lnglat[1] = 180/Math.PI*(2*Math.atan(Math.exp(mmy*Math.PI/180))-Math.PI/2);
        return lnglat;
}

通过接口获得数据list,渲染点图层，并进行过滤

// 渲染点图层
function getFeatures (list) {
   //原始数据点集合
   var gras = [];
   for (var i = 0; i < list.length; i++) {
      gras.push(new Graphic({
          geometry: new Point({
              longitude: list[i].lon,
              latitude: list[i].lat
         }),
         attributes: {
              id: list[i].id,
              dz_rank: list[i].dz_rank,
              lon: list[i].lon,
              lat: list[i].lat,
        }
      }))
   }
   // 过滤北京内数据
   var mapArr = [];
   gras.forEach((item, index) => {
      if (geometryEngine.contains(geometryBeiJing, item.geometry))     
      {
            mapArr.push(new Graphic({
              geometry: item.geometry,
              attributes: item.attributes
            }))
       }
    })
    //字段定义
   var fields = []
    for (var col in gras[0]['attributes']) {
       let type = 'string'
       if (col === 'lon' || col === 'lat') {
          type = 'double'
       } else {
          type = 'integer'
       }
       fields.push({
          name: col,
          alias: col,
          type: type
       })
   }
   // 分级渲染
   const less25 = {
      type: 'picture-marker', // autocasts as new SimpleFillSymbol()
      url: png1,
      height: 12,
      width: 10
   };

   const less50 = {
      type: 'picture-marker', // autocasts as new SimpleFillSymbol()
      url: png2,
      height: 12,
      width: 10
   };

   const less75 = {
      type: 'picture-marker', // autocasts as new SimpleFillSymbol()
      url: png3,
      height: 12,
      width: 10
   };

   const less100 = {
      type: 'picture-marker', // autocasts as new SimpleFillSymbol()
      url: png4,
      height: 12,
      width: 10
   };
   const renderer = {
       type: 'class-breaks', // autocasts as new ClassBreaksRenderer()
       field: 'dz_rank',
       classBreakInfos: [
            {
              minValue: 0,
              maxValue: 0.25,
              symbol: less25,
              label: '无震感'
            },
            {
              minValue: 0.25,
              maxValue: 0.5,
              symbol: less100,
              label: '轻微震感'
            },
            {
              minValue: 0.5,
              maxValue: 0.75,
              symbol: less75,
              label: '明显震感'
            },
            {
              minValue: 0.75,
              maxValue: 1.0,
              symbol: less50,
              label: '强烈震感'
            }
       ],
       legendOptions: {
            title: '震感级别'
       }
    };
    // 弹窗
    let template = {
       title: '{id}',
       content: [
            {
              // Autocasts as new TextContent()
              type: 'text',
              text: '经度：{lon}'
            },
            {
              // Autocasts as new TextContent()
              type: 'text',
              text: '纬度：{lat}'
            },
            {
              // Autocasts as new TextContent()
              type: 'text',
              text: '震感级别：{dz_rank}'
            },
            {
              // Autocasts as new TextContent()
              type: 'text',
              text: '描述：文字描述'
            }
          ],
        }
        //定义图层
        var layer = new FeatureLayer({
          id: 'newLayer',
          source: mapArr,
          renderer: renderer,
          geometryType: 'point',
          fields: fields,
          objectIdField: 'id',
          popupTemplate: template
        })
        map.add(layer)
        // 添加图例
        const legend = new Legend({
          view: view,
          layerInfos: [{
            layer: layer
          }]
        });
        view.ui.add(legend, 'bottom-right');
      }              

这样就在全国的数据中过滤了北京的数据了，并在地图上进行了渲染

知识点是geometryEngine.contains(containerDiv, insideDiv)