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

相关文章

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

Java并发编程必备之Synchronized关键字深入解析

《Java并发编程必备之Synchronized关键字深入解析》本文我们深入探索了Java中的Synchronized关键字,包括其互斥性和可重入性的特性,文章详细介绍了Synchronized的三种... 目录一、前言二、Synchronized关键字2.1 Synchronized的特性1. 互斥2.

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它