ArcGIS for js 4.x FeatureLayer 点选查询

2024-06-15 15:04

本文主要是介绍ArcGIS for js 4.x FeatureLayer 点选查询,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

示例:

代码如下:

<template><view id="mapView"></view></template><script setup>
import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView.js";
import TitleLayer from "@arcgis/core/layers/TileLayer.js";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js"
import PopupTemplate from "@arcgis/core/PopupTemplate.js"
import Popup from "@arcgis/core/widgets/Popup.js";
import Locate from "@arcgis/core/widgets/Locate.js";
import Compass from "@arcgis/core/widgets/Compass.js";
import Graphic from "@arcgis/core/Graphic.js";
import SimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol.js";
import { onMounted } from "vue";onMounted(()=>{initMap();
});const initMap = function(){const map = new Map({basemap:{baseLayers:[new TitleLayer({url:"http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer"})]}});// 创建PopupTemplate实例var popupTemplate = new PopupTemplate({//title:"{objectid}",title:"<div style='color: red'>{objectid}</div>",content:`图斑类型:{tblx}<br/>图斑面积:{tbmj}<br>`});// 加载FeatureLayerconst featureLayer = new FeatureLayer({url:"http://116.141.0.114:48080/geoscene/rest/services/%E8%80%95%E4%BF%9D/%E5%8F%8C%E9%98%B3%E5%8C%BA%E5%9B%BE%E6%96%91/FeatureServer/0",outFields: ["*"], //加载所有要素字段opacity:0.5,//透明度//popupTemplate: TuCeng03TC, //加载模板,//definitionExpression: "",// 筛查labelsVisible:false,//禁用显示标注// 渲染renderer: {type: "simple",symbol: {type: "simple-fill",//simple-line(线)、simple-fill(面)style: "solid",// solid 全部填充、cross十字交错、diamond菱形、square矩形、triangle三角形color: [255,20,60, 0.4],outline: {color: [255, 0, 0, 1],width: 2,},},},// 配置popupTemplatepopupTemplate:popupTemplate//配置默认的信息模板-文本型/* popupTemplate:{//title:"{objectid}",title:"<div style='color: red'>{objectid}</div>",content:`图斑类型:{tblx}<br/>图斑面积:{tbmj}<br>`} *///配置默认的信息模板-表格型/*popupTemplate:{title:"{objectid}",content:[{type:"fields",fieldInfos:[{fieldName:"tblx",label:"图斑类型"},{fieldName:"tbmj",label:"图斑面积"}]}]}*/});// 添加featureLayer(两种方法都可以)//mapView.map.add(featureLayer);map.add(featureLayer);// 创建并配置信息窗口对象const popup = new Popup({visibleElements:{// 对可见元素进行配置collapseButton:false,// 禁用折叠按钮actionBar:false,// 禁用动作条closeButton:true// 打开右上角关闭按钮},//container:"popup_image",//设置自定义组件(类似mapView)dockOptions:{buttonEnabled:false,// 禁用停靠按钮// 弹窗位置position: "center",// 当窗口小于100*100像素时,固定弹出窗口breakpoint: {width: 100,height: 100}}});// mapView容器	const mapView = new MapView({// 长春坐标系center:[125.331345,43.8328],// 初始层级zoom:10,container:"mapView",map:map,constraints: {minZoom: 10,// 最小层级maxZoom: 19 // 最大层级},popup:popup// 关联popup});// 清除底部powered by ESRImapView.ui.remove("attribution");//mapView点击事件mapView.on(["click"],function(event){mapView.hitTest(event).then(function(response){let clickLayer = response.results.filter((result) => {return result.graphic.layer === featureLayer;});// 获取绘制let graphic = clickLayer[0].graphic;// 点击后定位//mapView.goTo(graphic);mapView.goTo({target:graphic,zoom:13})});});}</script><style lang="scss" scoped>#mapView{width: 100%;height:100vh;padding: 0;margin: 0;}</style>

定位也可以写成下面的方式:

	// 创建PopupTemplate实例var popupTemplate = new PopupTemplate({content:(feature)=>{// 定位mapView.goTo({target:feature.graphic,zoom:13});for(let key in feature.graphic.attributes){if(feature.graphic.attributes[key]){// 输出全部属性值console.log(feature.graphic.attributes[key]);}}}});

这篇关于ArcGIS for js 4.x FeatureLayer 点选查询的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1063787

相关文章

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》:本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满

MySQL查询JSON数组字段包含特定字符串的方法

《MySQL查询JSON数组字段包含特定字符串的方法》在MySQL数据库中,当某个字段存储的是JSON数组,需要查询数组中包含特定字符串的记录时传统的LIKE语句无法直接使用,下面小编就为大家介绍两种... 目录问题背景解决方案对比1. 精确匹配方案(推荐)2. 模糊匹配方案参数化查询示例使用场景建议性能优

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN

XML重复查询一条Sql语句的解决方法

《XML重复查询一条Sql语句的解决方法》文章分析了XML重复查询与日志失效问题,指出因DTO缺少@Data注解导致日志无法格式化、空指针风险及参数穿透,进而引发性能灾难,解决方案为在Controll... 目录一、核心问题:从SQL重复执行到日志失效二、根因剖析:DTO断裂引发的级联故障三、解决方案:修复

mysql查询使用_rowid虚拟列的示例

《mysql查询使用_rowid虚拟列的示例》MySQL中,_rowid是InnoDB虚拟列,用于无主键表的行ID查询,若存在主键或唯一列,则指向其,否则使用隐藏ID(不稳定),推荐使用ROW_NUM... 目录1. 基本查询(适用于没有主键的表)2. 检查表是否支持 _rowid3. 注意事项4. 最佳实

MySQL存储过程之循环遍历查询的结果集详解

《MySQL存储过程之循环遍历查询的结果集详解》:本文主要介绍MySQL存储过程之循环遍历查询的结果集,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言1. 表结构2. 存储过程3. 关于存储过程的SQL补充总结前言近来碰到这样一个问题:在生产上导入的数据发现