添加全部数据

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

arcgis for js 如何用contains过滤数据的更多相关文章

  1. (转) 基于Arcgis for Js的web GIS数据在线采集简介

    http://blog.csdn.net/gisshixisheng/article/details/44310765 在前一篇博文“Arcgis for js之WKT和geometry转换”中实现了 ...

  2. Arcgis for Js之加载wms服务

    概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...

  3. Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)

    原文:Arcgis for JS之Cluster聚类分析的实现(基于区域范围的) 咱们书接上文,在上文,实现了基于距离的空间聚类的算法实现,在本文,将继续介绍空间聚类之基于区域范围的实现方式,好了,闲 ...

  4. Arcgis for JS之Cluster聚类分析的实现

    原文:Arcgis for JS之Cluster聚类分析的实现 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来 的,包含XY坐标信息的,通过graphic和graphicla ...

  5. ArcGIS 网络分析[1] 利用自定义点线数据(shp或数据库)创建网络数据集【小白向】

    前言 似乎除了官方介绍的例子,我还没有在网上见过一篇介绍如何“使用自己的数据”创建“网络数据集”的文章. 究其原因,是因为当前的高质量的线数据或保密,或采集困难. 有介绍几何网络的,有介绍如何用官方S ...

  6. handlebars.js 自定义helper(过滤)

    将对象数据渲染到页面上: id 插入公共样式: handlebars.js 自定义helper(过滤)demo <script id="tbody-content-template&q ...

  7. Arcgis for Js之featurelayer实现空间查询和属性查询

    空间查询和属性查询是常用的两种对数据的检索与查询方式,在本节,将讲述Arcgis for Js下如何实现featurelayer的这两种查询方式,先贴图给大家看看: 实现界面 属性查询 空间查询 看完 ...

  8. (转载)arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。

    1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...

  9. (转)Arcgis for JS之Cluster聚类分析的实现

    http://blog.csdn.net/gisshixisheng/article/details/40711075 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来的,包含 ...

随机推荐

  1. 计算区间 1 到 n 的所有整数中,数字 x(0 ≤ x ≤ 9) 共出现了多少次?

    #include<iostream> using namespace std; int main() { long long start, end , i, check, b, c, cn ...

  2. apache frpClien操作报错解决

    #打开配置文件vim /etc/vsftpd/vsftpd.conf #修改配置100行chroot_local_user=NO

  3. NPOI 操作数据库中数据的导入导出(Excel.xls文件) 和null数据的处理。

    App.config: <?xml version="1.0" encoding="utf-8" ?> <configuration> ...

  4. vscode 配置 c++ 环境

    vscode 配置 c++ 环境 参考的这篇bloghttps://blog.csdn.net/bat67/article/details/81268581 1.安装编译器.这里安装 codebloc ...

  5. Flutter 中渐变的高级用法

    Flutter 中渐变有三种: LinearGradient:线性渐变 RadialGradient:放射状渐变 SweepGradient:扇形渐变 看下原图,下面的渐变都是在此图基础上完成. Li ...

  6. 每日一题 - 剑指 Offer 32 - II. 从上到下打印二叉树 II

    题目信息 时间: 2019-06-25 题目链接:Leetcode tag: 队列 BFS 难易程度:简单 题目描述: 从上到下按层打印二叉树,同一层的节点按从左到右的顺序打印,每一层打印到一行. 示 ...

  7. vue页面数据强制更新渲染

        vue数据更新会出现缓存的情况,几种方式可以让数据实时渲染到页面: 1.简单粗暴的方式 this.$forceUpdate();//强制更新 2.增减元素 splice() push() 3. ...

  8. 创建新用户后无法切换 su: failed to execute /bin/bash: Permission denied

    创建新用户后无法切换 su: failed to execute /bin/bash: Permission denied   当使用 su username 从root切换用户时显示 su: fai ...

  9. Django项目后台不挂断运行

    Django项目后台不挂断运行 方法一: 1.进入项目目录下,运行下面程序: nohup python manage.py runserver 0.0.0.0:5008 & nohup(no ...

  10. Centos8 - 图形界面和命令行切换

    查看目前默认的启动方式 systemctl get-default 命令行模式:multi-user.target 图形界面模式:graphical.target 设置为图形界面模式 systemct ...