ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript - 框选显示高亮几何对象

本文主要是介绍ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript - 框选显示高亮几何对象,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript - 框选显示高亮对象

    • 核心代码
    • 完整代码:
    • 在线示例

在研究 ArcGIS JSAPI RenderNode 高亮(highlights)FBO 的时候,实现了一下框选高亮几何对象,这里分享一下。

本文包括核心代码、完整代码以及在线示例。


核心代码

实际上,就是通过标绘工具,创建矩形标绘,在判断矩形相交,然后高亮相交的几何对象。


// 监听标绘完成事件
sketchViewModel.on("create", async (event) => {if (event.state === "complete") {const queryGeometry = event.graphic.geometry;if (this.campusLayerView) {// 获取矩形内几何对象const results = await this.campusLayerView.queryFeatures({geometry: queryGeometry,});// 设置高亮results.features.forEach((feature) => {this.highlights.push(this.campusLayerView.highlight([feature.attributes.OID]));})}}
});

完整代码:


<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><title>框选显示高亮对象 | Sample | ArcGIS Maps SDK for JavaScript 4.29</title><script type="module" src="/arcgis_api/calcite-components/2.8.1/calcite.esm.js"></script><link rel="stylesheet" type="text/css" href="/arcgis_api/calcite-components/2.8.1/calcite.css" /><link rel="stylesheet" href="/arcgis_api/4.29/esri/themes/light/main.css" /><script src="/arcgis_api/4.29/init.js"></script><script>var _hmt = _hmt || [];(function () {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script><script>require(["esri/WebScene","esri/views/SceneView","esri/rest/support/Query","esri/widgets/Legend","esri/core/reactiveUtils","esri/views/3d/webgl/RenderNode","esri/layers/GraphicsLayer","esri/widgets/Sketch/SketchViewModel",],(WebScene,SceneView,Query,Legend,reactiveUtils,RenderNode,GraphicsLayer,SketchViewModel,) => {// 使用官方资源const webscene = new WebScene({portalItem: {// autocasts as new PortalItem()id: "fbbc829fa7d342e7ae8d18c54a5eab37"}});// Create a view and set the highlight optionsconst view = new SceneView({container: "viewDiv",map: webscene,popup: {dockOptions: {buttonEnabled: false}},qualityProfile: "high",environment: {lighting: {directShadowsEnabled: true}},// 设置默认高亮参数highlightOptions: {haloColor: [255, 38, 150],color: [255, 255, 255],fillOpacity: 0.3}});// This variable will store the highlight handle that is used to remove the highlightthis.highlights = [];// 创建标绘图层const polygonGraphicsLayer = new GraphicsLayer({elevationInfo: {// 注意,这里设置相对于地形,否则会遮挡mode: 'relative-to-ground'}});view.map.add(polygonGraphicsLayer);// add the select by rectangle button the viewview.ui.add("select-by-rectangle", "top-left");const selectButton = document.getElementById("select-by-rectangle");// 创建标绘工具const sketchViewModel = new SketchViewModel({view: view,layer: polygonGraphicsLayer});// 监听矩形标绘事件selectButton.addEventListener("click", () => {view.closePopup();// 标绘矩形sketchViewModel.create("rectangle");// 移除上一次操作polygonGraphicsLayer.removeAll();// 移除上一次高亮对象if(this.highlights){this.highlights.forEach((highlight) => {highlight.remove();});this.highlights = [];}});// 监听标绘完成事件sketchViewModel.on("create", async (event) => {if (event.state === "complete") {const queryGeometry = event.graphic.geometry;if (this.campusLayerView) {// 获取矩形内几何对象const results = await this.campusLayerView.queryFeatures({geometry: queryGeometry,});// 设置高亮results.features.forEach((feature) => {this.highlights.push(this.campusLayerView.highlight([feature.attributes.OID]));})}}});view.when(() => {// Get layer from webSceneconst campusSceneLayer = webscene.allLayers.filter((elem) => {return elem.title === "Buildings";}).items[0];// Define the attributes which are used in the querycampusSceneLayer.outFields = ["name"];// Get DOM element where list items will be placedconst container = document.getElementById("buildingsList");const buildingCount = document.getElementById("buildingCount");// Highlight is set on the layerView, so we need to detect when the layerView is readyview.whenLayerView(campusSceneLayer).then((campusLayerView) => {this.campusLayerView = campusLayerView;// Wait for the view to finish updatingreactiveUtils.when(() => !view.updating, () => {// Query the features available for drawing and get the attributesconst query = new Query();campusLayerView.queryFeatures(query).then((result) => {// Empty the list DOM elementcontainer.innerHTML = "";buildingCount.innerHTML = `Currently in view: ${result.features.length} buildings`;// For each returned feature create a list item and append it to the containerresult.features.forEach((feature) => {const attributes = feature.attributes;// Create list elementconst li = document.createElement("calcite-pick-list-item");li.setAttribute("label", attributes.name);li.addEventListener("click", (event) => {const target = event.target;const objectId = feature.attributes.OID;// Create an extent query on the layer view that will return the 3D extent of the featureconst queryExtent = new Query({objectIds: [objectId]});campusLayerView.queryExtent(queryExtent).then((result) => {// Zoom to the extent of the feature// Use the expand method to prevent zooming in too close to the featureif (result.extent) {view.goTo(result.extent.expand(4), {speedFactor: 0.5}).catch((error) => {if (error.name != "AbortError") {console.error(error);}});}});// Remove the previous highlightsif (highlight) {highlight.remove();}// Highlight the feature passing the objectId to the methodhighlight = campusLayerView.highlight([objectId]);});container.appendChild(li);});});});});});});</script><style>html,body,#viewDiv {height: 100%;width: 100%;margin: 0;padding: 0;}.panel-side {width: 250px;position: absolute;top: 14px;right: 14px;bottom: 28px;color: #323232;background-color: rgb(255, 255, 255);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);overflow: auto;z-index: 60;font-size: 12px;text-align: center;}.panel-side h2 {padding: 0 20px;margin: 20px 0;font-size: 14px;font-weight: 600;}#buildingCount,h2 {text-align: center;}</style>
</head><body>
<div class="panel-side esri-widget"><h2>Campus buildings</h2><p id="buildingCount">Currently in view: 0 buildings</p><calcite-panel id="buildingsList"></calcite-panel>
</div>
<div id="viewDiv"></div>
<divid="select-by-rectangle"class="esri-widget esri-widget--button esri-widget esri-interactive"title="Select features by rectangle"
><span class="esri-icon-checkbox-unchecked"></span>
</div>
</body></html>

在这里插入图片描述


在线示例

ArcGIS Maps SDK for JavaScript 在线示例:框选显示高亮对象

这篇关于ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript - 框选显示高亮几何对象的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1040930

相关文章

SpringBoot内嵌Tomcat临时目录问题及解决

《SpringBoot内嵌Tomcat临时目录问题及解决》:本文主要介绍SpringBoot内嵌Tomcat临时目录问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录SprinjavascriptgBoot内嵌Tomcat临时目录问题1.背景2.方案3.代码中配置t

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

Java程序进程起来了但是不打印日志的原因分析

《Java程序进程起来了但是不打印日志的原因分析》:本文主要介绍Java程序进程起来了但是不打印日志的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java程序进程起来了但是不打印日志的原因1、日志配置问题2、日志文件权限问题3、日志文件路径问题4、程序

Spring 基于XML配置 bean管理 Bean-IOC的方法

《Spring基于XML配置bean管理Bean-IOC的方法》:本文主要介绍Spring基于XML配置bean管理Bean-IOC的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录一. spring学习的核心内容二. 基于 XML 配置 bean1. 通过类型来获取 bean2. 通过

Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

《SpringBoot集成Quartz并使用Cron表达式实现定时任务》本篇文章介绍了如何在SpringBoot中集成Quartz进行定时任务调度,并通过Cron表达式控制任务... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Sprin

springboot上传zip包并解压至服务器nginx目录方式

《springboot上传zip包并解压至服务器nginx目录方式》:本文主要介绍springboot上传zip包并解压至服务器nginx目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录springboot上传zip包并解压至服务器nginx目录1.首先需要引入zip相关jar包2.然

Java数组初始化的五种方式

《Java数组初始化的五种方式》数组是Java中最基础且常用的数据结构之一,其初始化方式多样且各具特点,本文详细讲解Java数组初始化的五种方式,分析其适用场景、优劣势对比及注意事项,帮助避免常见陷阱... 目录1. 静态初始化:简洁但固定代码示例核心特点适用场景注意事项2. 动态初始化:灵活但需手动管理代

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为:Linux+JDK+MariDB(MySQL)+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my

SpringBoot中配置Redis连接池的完整指南

《SpringBoot中配置Redis连接池的完整指南》这篇文章主要为大家详细介绍了SpringBoot中配置Redis连接池的完整指南,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以... 目录一、添加依赖二、配置 Redis 连接池三、测试 Redis 操作四、完整示例代码(一)pom.