arcgis api for javascript 4.16 定位功能的实现

一、定位功能，应用场景为自定义搜索框，可以用ajax搜索结果，然后单击定位。还有一种是下面说的，在element ui表格中，点击定位按钮，实现地图跳转定位。

效果：

二、代码部分。

// 定位功能
locator: async function (id) {loadModules(['esri/tasks/support/Query'], {css: false}).then(([Query]) => {const query = new Query()let where = "OBJECTID = '" + id + "'"query.where = wherequery.returnGeometry = truequery.outFields = [ 'OBJECTID','QQZT','STATE','TBBM','XZCMC','ZDMJ','ZJMC' ]// 跳转并打开popup卡片mainMap.mapServer.queryFeatures(query).then(function(results){mainMap.view.goTo(results.features[0].geometry.extent.expand(2)).then(function () {mainMap.view.popup.open({features: [results.features[0]],location: results.features[0].geometry.centroid})})})})}

首先需要引入Query，该功能实在VUE框架中实现的，因此引入方式为loadModules。整个功能思路为：拿到geometry，利用goto跳转，最后用popup.open打开弹窗。

具体功能步骤：

1、引入Query。

2、构造搜索语句，也就是sql语句构造。

3、设置Query。将where指向第二布的sql。是否返回geometry为true，返回字段选择为待会儿弹窗展示的字段。

4、使用queryFeature进行搜索单个feature。实际上，定位的原理就是获取单个feature，利用这个要素的geometry进行跳转。代码中的mainMap.mapServer为featureLayer。只是我引用了别的js文件而已。可以去查看quertFeature这个方法。这是featureLayer特有的方法。

5、将搜索结果进行缩放，并打开弹窗。

6、使用。在element ui中获取想要跳转的要素的主键，可以用作用域插槽进行传值。之后调用这个方法，把主键传进去。ok

注：centriod属性为feature的几何中心。

arcgis api for javascript 4.16 定位功能的实现相关推荐

19 html2canvas实现ArcGIS API for JavaScript 4.X截图功能
需求描述在我们项目开发过程中,有时候需要将地图上面绘制的元素或添加的一些图标之类的小元素进行截图保存或者展示,这时候就需要我们实现关于地图的截图功能.目前在ArcGIS API for JavaSc ...
ArcGIS API for JavaScript实现坐标定位
坐标定位是gis系统中常用的功能效果图实现代码如下: <!DOCTYPE html> <html lang="en"> <head>< ...
中添加2000坐标系_ArcGIS API for JavaScript 4.16在三维场景中以天地图为底图加载2000坐标系的倾斜摄影数据...
2021年目标每日更新一篇公众号文章!!! 需求描述 WebGIS项目中如果有三维需求的话,开发中我们经常会遇到倾斜摄影数据,有了倾斜摄影数据之后,我们可以进行生成真实的三维场景等操作. 本文从前端 ...
ArcGIS API for JavaScript心得体验
首发GIS派:ArcGIS API for JavaScript心得体验学习和使用ArcGIS API for JavaScript开发差不多有两年了吧,跌跌撞撞断断续续也做了几个小项目,学习之路相 ...
ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能（六）
目的: 1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能,鼠标点击后获取被点击对象的然后以infoWindow的方式显示点击对象的属性 ...
Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
地图小部件—ArcGIS API for JavaScript
电子地图和传统的纸质地图最大的区别就是交互的程度不一样,而交互性很大程度上由地图的小部件所控制.传统的纸制地图主要有三个基本的部件(要素):比例尺.指北针.图例,而电子地图有更多的交互性小部件选择,在 ...
ArcGIS API for JavaScript——地图展示
ArcGIS API for JavaScript 能够实现的最基本功能就是地图展示,包括地图缩放.平移.定位.实时显示坐标.展示地图要素(指北针.比例尺.图例).切换地图等.本文将详细介绍地图展示的 ...
地理信息系统（GIS）系列——ArcGIS API for JavaScript 3.9（1）
Visual Studio 智能提示配置:将以下 JavaScript 文件引入项目中 arcgis_js_v39_sdk\arcgis_js_api\sdk\jshelp\jsapi_vsdoc12 ...

arcgis api for javascript 4.16 定位功能的实现

arcgis api for javascript 4.16 定位功能的实现相关推荐

最新文章

热门文章