首页
学习
活动
专区
圈层
工具
发布

Arcgis for Javascript之featureLayer图和属性的互操作

说明:主要实现加载FeatureLayer与显示属性表,并实现属性表与地图的联动,首先,看看实现后的效果: ?...显示效果 如上图所示,本文章主要实现了以下几个功能:1、FeatureLayer属性表的分页加载与显示;2、属性表和地图的互操作,包括鼠标经过时在地图上显示名称并高亮显示、点击列表显示对象的信息框,如下图...1、FeatureLayer属性表的获取 获取FeatureLayer的属性表,首先得创建FeatureLayer对象,如下: ftch = new FeatureLayer("...,showObject对应的是鼠标经过事件,restoreObj对应的是鼠标移除事件,这样基本并能就实现了。...for Javascript系列博文,您的支持就是我的动力,谢谢。

3.5K20

ArcGIS JS API 4.15渲染后台接口返回的数据,并进行点选查询

本文主要介绍下如何使用ArcGIS JS API对后台接口返回的数据进行渲染,文章中的后台返回数据使用单独的配置文件来处理,详情请看文章内容。...在项目中为了实现点选查询,是在ArcGIS Server里面发布了一个要素服务,然后将其添加到地图上渲染,并实现了鼠标的点选查询功能,那这个功能可不可以不通过发布服务来实现呢?...想到这,打开电脑仔细翻看了了一下ArcGIS JS API的官方文档,发现好像是可以,所以就立即动手了,幸运的是,我成功了,先给大家上一张效果图: 上图中的鼠标点选查询,并出现弹窗的功能实现的数据来源并不是一个发布的要素服务...然后我再项目里安装了esri-loader插件,因为要在Vue的demo里要使用ArcGIS JS API,所以要用到这东西,如果大家对这个过程不了解的话请移步至另一篇文章《【番外】 Vue中使用ArcGIS...然后我们用它去实例化一个要素图层,并将它添加到地图上: //实例化featurelayer let layer = new FeatureLayer({ source: resultData,

2.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ArcGIS API for JavaScript 中的 Autocasting

    上面的两段代码是等价的, 很显然使用 autocasting 的代码更加简单, 只需写一个 json 对象, 而这个 json 对象和 ArcGIS API for JavaScript 对应类型的属性相同...ArcGIS API for JavaScript 官方文档中所有的示例代码 都尽可能的使用了 Autocasting 。...但是不知道是什么原因, ArcGIS API for Javascript 并没有实现这个功能, 不过可以使用 ESRI 官方维护的 esri-loader 对 Autocasting 进行扩展, 实现这样的功能...这个类库也发布了 npm 包 esri-service, 如果使用了 nodejs 的话, 只要通过命令 npm i esri-service 即可安装。...不过从 4.18 开始, ArcGIS API for JavaScript 提供了原生 ES6 模块 @arcgis/core , 可以直接在受支持的浏览器中运行, 不用在依赖第三方加载器, 也可以很轻松的在各种前端框架中使用

    1.3K20

    ArcGIS JS API 4.15实现萤火虫效果

    看到网上的萤火虫效果后,也想在前端通过ArcGIS JS API来实现一下,所以感兴趣的话就跟我一起来看看吧。...概述 前几天在看帖子的时候发现有大佬使用ArcGIS Pro和Portal制作了萤火虫的渲染效果,感觉前端可视化的时候还不错,所以自己也将实例数据下载下来之后用ArcGIS JS API来实现了一下,我们先来看一下最终的效果...3、然后我们将下载下来的数据发布成要素服务,在前端通过JS API去调用,如下: const layer = new FeatureLayer({ url: "https://portalwin.arcgis.cn...,此时我们保存代码后发现,我们的数据是按我们指定的图片去渲染的,效果如下: 6、以上就是用ArcGIS JS API实现萤火虫渲染效果的全部过程,其实这个过程很简单,就是给我们的数据图层指定一个渲染方案就可以实现...,此处我们使用的渲染图片的透明图片。

    1.4K40

    在客户端创建要素图层 (FeatureLayer)

    在客户端创建要素图层 (FeatureLayer) 在 ArcGIS JS API 的开发中, FeatureLayer 可以说是让人又爱又恨, 特别是 ArcGIS JS API 4.x , FeatureLayer...]); // 使用 FeatureLayer 服务的地址创建 QueryTask , 并请求数据 const queryTask: __esri.QueryTask = new QueryTask({...添加到地图 view.map.add(featureLayer); 从自定义 JSON 数据创建 FeatureLayer 如果没有 ArcGIS Server , 或者是从其他的数据服务加载的 json...客户端创建 FeatureLayer 的优点和缺点 先来说一下这么做的优点, 主要有如下几个: 不依赖 ArcGIS Server , 毕竟是很贵的商业产品; 可以控制数据加载, 无需理会 FeatureLayer...内置的所谓的优化加载策略, 内置的策略不能满足所有的使用场景; 同样可以使用 FeatureLayer 的其它特性, 比如 renderer labelingInfo 等等; 可以在客户端修改 Graphic

    2K30

    一文让你彻底掌握ArcGisJS地图管理的秘密

    使用ArcGis开发地图 引用ArcGisJS 使用ArcGisJS开发地图,首先需要引入ArcGis的Js文件和CSS文件,引入方式有两种,一种是官网JS引用,一种是本地JS引用。...地图开发 基础开发 地图开发主要是在require的输出函数中做的,具体开发逻辑是使用Map类创建地图,使用View类绑定div元素,然后将Map地图对象赋值到View类中,实现地图在div中展示。...监视属性 ArcGis里除了监听,还支持监视,下面我们使用watch函数监视scale(比例尺)属性。...还提供丰富的小部件,比如比例尺,坐标,指南针等,我们只需要引入对应的js类,就可以使用这些小部件了。...属性图层 属性图层的类是FeatureLayer,FeatureLayer类有三个比较重要的属性source(数据源),fields(图层中可用字段),popupTemplate(点击弹出模板)。

    1.1K20

    使用现代化的脚本进行 ArcGIS JS API 开发

    使用现代化的脚本进行 ArcGIS JS API 开发 ArcGIS JS API 基于古老的 JavaScript 框架 Dojo 开发, dojo 虽然是曾经的王者, 但是2020年的前端开发, 早已是...Angular、 React 和 Vue 三大框架的天下, JavaScript 的新特性可以说是日新月异, 国内也几乎没有人基于 dojo 进行开发, 因此本文介绍如何使用现代化的脚本 (ES6,...esri-loader 使用 TypeScript 开发, 以 npm 包的形式发布。...加载 ArcGIS JS API 中提供的模块 要使用 ArcGIS JS API 中提供的模块, 根据 ArcGIS JS API 提供的文档, 需要使用 dojo 提供的 require 函数, 示例代码如下...=mdn-javascript_statements_import image.png 以 ESRI 官方 ArcGIS JS SDK 中的示例 Intro to FeatureLayer 为例,

    2.8K10

    使用 PyCharm 作为你的ArcGIS Python IDE

    单击左侧面板中的项目解释器选项。忽略下拉列表中的现有选项 菜单,而是单击项目解释器下拉箭头右侧的倒三角图标 单击添加选项以打开添加Python解释器对话框。...环境一部分的包列表如图所示,与ArcGIS Pro中Python包管理器中所示的相同。...然而不应从PyCharm内部管理环境,而是通过Python使用conda包管理器。 应用这些设置后,您可能需要重新启动PyCharm以使更改生效。...使交互式解释器可见,请单击工具>Python控制台,它将显示一个类似IDLE 界面 要在pycharm中编写代码,请在左侧的“项目”面板中,右键单击工作文件夹,然后单击新建Python文件。...不管关于结果的显示方式,Python代码和结果与前面的示例相同。 PyCharm有许多不同的选项和特性,使其成为一个相对复杂的IDE。这个对于刚开始的程序员来说,用户界面也可能很吓人。

    1.4K10

    ArcGIS二次开发基础教程(04):有关字段的操作和简单属性及空间查询

    ArcGIS二次开发基础教程(04):有关字段的操作和简单属性及空间查询 属性 字段的添加、删除和查找 IFeatureLayer GetLayerByName(string name) { ILayer...简单条件查询 IFeatureLayer featureLayer = GetLaerByName("图层名称"); IFeatureClass featureLayer = featureLayer.FeatureClass...IQueryFilter queryFilter = new QueryFilterClass(); queryFilter.WhereClause = "FID = 1"; //第一个参数同上,第二个参数表示如何将选中的元素添加进元素集...//其二如下 这种更简单 但得不到选中要素集 根据不同情况使用 //参数一为查询几何体,参数二为查询包络线 axMapControl1.Map.SelectByShape(geometry, null...axMapControl1.Refresh(esriViewDrawPhase.esriViewGeoSelection, null, null); 历届GIS应用技能大赛开发题答案点这里,尚在不定期更新中 发布者

    1K20

    高质量编码-地图图层管理

    在WebGIS开发中,业务中经常需要许多图层,通常是ArcGISTiledMapServiceLayer,FeatureLayer,如果使用开源的GeoServer作为地图服务器,通常使用WMTSLayer...因为Arcgis JS API功能强大,所以我们最好采用Arcgis JS API来开发WebGIS应用。...即使我们使用免费开源的GeoServer和geowebcache来作为地图服务器,我们也最好不使用openlayer或mapbox等其他地图JS API技术,使用Arcgis JS API的WMTSLayer...和WFSLayer来加载开源免费的地图服务器发布的地图服务,毕竟Arcgis JS API的易用,强大,系统全面是任何其他WebGIS JS API无法比拟的。...前者我们通常使用ArcGISTiledMapServiceLayer和WMTSLayer,后者我们通常使用FeatureLayer和WFSLayer。

    1.2K40

    使用ArcGIS Python检测洪水影响的区域

    【ArcGIS Python系列】系列笔记为学习ArcGIS Pro和ArcPy过程中的总结,记下来方便回看,最新版本会优先发布在我的博客和GITHUB。...首先,会在 ArcGIS Pro 中使用notebook,一步步实现洪水检测的目的。然后,会将代码转换为脚本工具,给其他没有编程基础的人使用。...1.准备工作 本课程需要了解Python和Arcpy,并且对遥感有一定了解,如果不熟悉Python,请查看: 有关 Python 的快速介绍,请参阅使用 ArcGIS Notebooks 学习 Python...如何下载影像以及相关基础知识可以查看4.2.8-栅格数据.md。本课程使用的影像是来自欧盟哥白尼地球观测计划中哨兵卫星计划的处理后的影像,分为洪水前和洪水后。...此表中的顺序必须与您使用 arcpy 在 Python 脚本中设置的顺序匹配。

    1.1K11

    高质量编码-事件图层

    传统GIS项目中使用的图层通常是从GIS服务器中发布的WFSLayer或FeatureLayer服务,而这些GIS服务的数据源多是从GIS软件中编辑完成后的用于描述某一特定类别地理要素的文件...(shapefile,KML等),其中存储的地理要素通常情况下实时性不强,通常情况下变化也只是存储在数据库中的属性会更改。...但是对于像显示共享单车,航班,GPS等实时位置以及它们的历史轨迹,或者显示最近10分钟哪些地点的用户在淘宝下单。对于它们,我分别称为位置图层,轨迹图层,以及事件图层。...通常GIS软件提供的开发接口(比如专业的Arcgis JS API)对于这些场景的支持还不太丰富和成熟,Arcgis JS API 3.28 中提供了TemporalRenderer来在featureLayer...),以及后端开发(Redis实现缴费记录的实时查询)。

    73330

    ArcGIS API for JavaScript应用开发

    /3.18/esri/css/esri.css" /> https://js.arcgis.com/3.18 二、打开地图 一个最基本的打开地图的应用脚本,使用由ERSI提供的缺省数据,以及...GraphicsLayer,一般矢量地图,一般用来处理业务数据; FeatureLayer,矢量地图,由Arcgis维护的矢量地图数据 ArcGISTiledMapServiceLayer 经过切片缓冲过的地图...对于arcgis for server发布出来的地图,在服务上右键选中property可以看服务地址:例如为http://localhost/arcgis/services/zy/MapServer,但实际引用方法为...图层对象里实际上可以包含多个图层,每个图层的在特定地图比例尺范围内的可见性一般在发布时就设置好了(就应该设置好),要注意这一点。...当然,如果我们的应用数据全部由Arcgis维护,在地图上显示自己的应用信息就和显示地图一样简单,常用FeatureLayer图层对象进行此类数据的管理。

    3.2K30
    领券