添加全部数据

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