新增全部資料

// 構建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)