添加全部数据

// 构建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. Spring 获取单例流程(一)

    读完这篇文章你将会收获到 在 getBean 方法中, Spring 处理别名以及 factoryBean 的 name Spring 如何从多级缓存中根据 beanName 获取 bean Spri ...

  2. ArcServer服务通过python备份,到另一台机器还原服务

    通过python可以快速把服务器上所有的服务都备份下来(只能备份服务,无法备份缓存文件),然后可以把备份文件考到需要新装的服务器上进行还原.还原时所有的Server缓存.输出等文件夹地址都是按源备份地 ...

  3. React源码之组件的实现与首次渲染

    react: v15.0.0 本文讲 组件如何编译 以及 ReactDOM.render 的渲染过程. babel 的编译 babel 将 React JSX 编译成 JavaScript. 在 ba ...

  4. docker 容器与本机文件的拷贝操作

    [把docker中容器时db002里面的my.cnf文件拷贝到根目录下] docker cp db002:/etc/mysql/my.cnf  ~/root/ [把根目录下my.cnf文件拷贝到doc ...

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

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

  6. Sta,题解

    题目: 分析: 这个有点过于简单,两次Dfs处理出Dp[i],Son[i],Deep[i],Val[i](分别表示以1为根时i所有子树的深度之和,以1为根时i子树节点个数,以1为根时i深度,以i为根时 ...

  7. day14 参数

    目录 一.参数介绍 二.形参与实参的具体使用 2.1位置参数 2.2关键字参数 2.3关键字实参和位置实参混合使用时 2.4默认参数 2.5位置形参和默认形参混用 2.6 可变长度的参数(*与**用法 ...

  8. MYSQL 之 JDBC(十七): 调用函数&存储过程

    1.通过Connection对象的prepareCall()方法创建一个CallableStatement对象的实例.在使用Connection对象的preparedCall()方法时,需要传入一个S ...

  9. java 面向对象(三十九):反射(三)了解ClassLoader

    1.类的加载过程----了解 2.类的加载器的作用 3.类的加载器的分类 4.Java类编译.运行的执行的流程 5.使用Classloader加载src目录下的配置文件 @Test public vo ...

  10. vue 集成html5 plus

    首先要安装一个包 vue-html5plus npm i vue-html5plus -S 然后配置这个文件 在main.js添加一串代码 var onPlusReady = function (ca ...