arcgis js 4.24 点击测距 完整html代码
时间: 2024-10-18 15:21:12 浏览: 25
在 ArcGIS JavaScript API 4.24 中，要创建一个点击测距的功能，你需要结合 HTML、CSS 和 JavaScript 代码。以下是一个简单的示例，演示如何在地图上添加一个点击事件，计算点击点到鼠标位置的距离：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ArcGIS JS 4.24 点击测距</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/css/main.css">
<script src="https://js.arcgis.com/4.24/"></script>
</head>
<body>
<div id="mapView" style="width: 600px; height: 400px;"></div>
<script>
// 加载ArcGIS API for JavaScript
esriConfig.defaults.io.proxyUrl = "your-proxy-url"; // 如果有代理服务器，请替换此行
// 初始化地图视图
var mapView = new esri.View({
container: "mapView",
center: [0, 0], // 地理坐标中心，默认世界中心
zoom: 2, // 初始缩放级别
map: new esri.Map({
basemap: "streets" // 使用基础地图层（可以选择其他）
})
});
// 添加鼠标点击事件监听器
mapView.on("click", function (event) {
// 获取点击点的经纬度
var graphic = event.graphic;
if (graphic) {
var latLon = graphic.geometry.getPoint();
// 获取鼠标当前位置
var mousePos = map.toScreen(event.screenPoint);
// 计算距离
var distance = haversine(latLon.x, latLon.y, mousePos.x, mousePos.y);
console.log("Distance from click point to mouse: " + distance + " meters");
// 在这里添加显示距离的UI元素或更新现有元素
// ...
// 另外一种可能的计算方法（使用地图服务距离工具）：
// var geometryService = new esri GeometryService();
// geometryService.distance({
// source: latLon,
// destination: mousePos,
// }).then(function(response) { ... });
}
});
// Haversine公式用于计算两点之间的大圆距离
function haversine(lat1, lon1, lat2, lon2) {
const earthRadius = 6371; // 单位为公里
const dLat = (lat2 - lat1) * Math.PI / 180;
const dLon = (lon2 - lon1) * Math.PI / 180;
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return earthRadius * c; // 返回距离结果，单位为公里，可以根据需要转换
}
</script>
</body>
</html>
```
在这个示例中，我们首先加载了 ArcGIS JavaScript API，然后初始化了一个地图视图并添加了点击事件。每次地图被点击时，都会计算点击点到鼠标位置的距离，并在控制台打印出来。
记得替换 `esriConfig.defaults.io.proxyUrl` 的值为你自己的网络环境中的代理设置。如果你需要在网页上显示距离，你可以根据需要修改 UI 部分。
阅读全文
相关推荐
最新推荐
ArcGIS JS API跨域配置 Proxy 代理
"ArcGIS JS API跨域配置 Proxy 代理" ArcGIS JS API 跨域配置是指在 JS 开发中遇到的访问本地服务和外网服务的问题，需要使用 Proxy 代理来解决跨域访问文件的问题。ArcGIS 的帮助中已经有了相关的介绍和使用配置。...
Arcgis javascript API 本地Tomcat下部署
这是因为ArcGIS JavaScript API提供了两种模式，一种是完整版（jsapi），另一种是压缩版（jsapicompact），供不同性能需求的场景使用。 在完成以上步骤后，为了使Tomcat服务器识别API，还需要在Tomcat的配置文件web...
ArcGIS查找空洞多边形
在GIS分析中，有时我们需要处理含有“空洞”多边形的数据，特别是在使用ArcGIS进行地理处理时。空洞多边形是指一个多边形内部包含另一个完全被包围的多边形，这样的结构可能会对数据分析和空间操作造成困扰。本文将...
ArcGIS提取河流中心线
ArcGIS 是一款强大的 GIS 软件，它提供了多种方法来完成这样的工作。下面将详细阐述如何在 ArcGIS 中提取河流中心线，并简要提及提取道路中心线和线型面状要素中心线的方法。 一、提取水系中心线 1. 准备工作：...
ArcGis-javaScript最全的中文API.docx
1. 丰富的示例代码：ArcGis_javaScript中文API提供了大量的示例代码，涵盖了GIS应用程序的各个方面，如地图显示、空间分析、数据处理等。这些示例代码可以帮助开发者快速理解ArcGis_javaScript中文API的使用方法和...
Python中快速友好的MessagePack序列化库msgspec
资源摘要信息:"msgspec是一个针对Python语言的高效且用户友好的MessagePack序列化库。MessagePack是一种快速的二进制序列化格式，它旨在将结构化数据序列化成二进制格式，这样可以比JSON等文本格式更快且更小。msgspec库充分利用了Python的类型提示（type hints），它支持直接从Python类定义中生成序列化和反序列化的模式。对于开发者来说，这意味着使用msgspec时，可以减少手动编码序列化逻辑的工作量，同时保持代码的清晰和易于维护。
msgspec支持Python 3.8及以上版本，能够处理Python原生类型（如int、float、str和bool）以及更复杂的数据结构，如字典、列表、元组和用户定义的类。它还能处理可选字段和默认值，这在很多场景中都非常有用，尤其是当消息格式可能会随着时间发生变化时。
在msgspec中，开发者可以通过定义类来描述数据结构，并通过类继承自`msgspec.Struct`来实现。这样，类的属性就可以直接映射到消息的字段。在序列化时，对象会被转换为MessagePack格式的字节序列；在反序列化时，字节序列可以被转换回原始对象。除了基本的序列化和反序列化，msgspec还支持运行时消息验证，即可以在反序列化时检查消息是否符合预定义的模式。
msgspec的另一个重要特性是它能够处理空集合。例如，上面的例子中`User`类有一个名为`groups`的属性，它的默认值是一个空列表。这种能力意味着开发者不需要为集合中的每个字段编写额外的逻辑，以处理集合为空的情况。
msgspec的使用非常简单直观。例如，创建一个`User`对象并序列化它的代码片段显示了如何定义一个用户类，实例化该类，并将实例序列化为MessagePack格式。这种简洁性是msgspec库的一个主要优势，它减少了代码的复杂性，同时提供了高性能的序列化能力。
msgspec的设计哲学强调了性能和易用性的平衡。它利用了Python的类型提示来简化模式定义和验证的复杂性，同时提供了优化的内部实现来确保快速的序列化和反序列化过程。这种设计使得msgspec非常适合于那些需要高效、类型安全的消息处理的场景，比如网络通信、数据存储以及服务之间的轻量级消息传递。
总的来说，msgspec为Python开发者提供了一个强大的工具集，用于处理高性能的序列化和反序列化任务，特别是当涉及到复杂的对象和结构时。通过利用类型提示和用户定义的模式，msgspec能够简化代码并提高开发效率，同时通过运行时验证确保了数据的正确性。"
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
STM32 HAL库函数手册精读：最佳实践与案例分析
参考资源链接：[STM32CubeMX与STM32HAL库开发者指南](https://wenku.csdn.net/doc/6401ab9dcce7214c316e8df8?spm=1055.2635.3001.10343)
# 1. STM32与HAL库概述
## 1.1 STM32与HAL库的初识
STM32是一系列广泛使用的ARM Cortex-M微控制器，以其高性能、低功耗、丰富的外设接
如何利用FineReport提供的预览模式来优化报表设计，并确保最终用户获得最佳的交互体验？
针对FineReport预览模式的应用，这本《2020 FCRA报表工程师考试题库与答案详解》详细解读了不同预览模式的使用方法和场景，对于优化报表设计尤为关键。首先，设计报表时，建议利用FineReport的分页预览模式来检查报表的布局和排版是否准确，因为分页预览可以模拟报表在打印时的页面效果。其次，通过填报预览模式，可以帮助开发者验证用户交互和数据收集的准确性，这对于填报类型报表尤为重要。数据分析预览模式则适合于数据可视化报表，可以在这个模式下调整数据展示效果和交互设计，确保数据的易读性和分析的准确性。表单预览模式则更多关注于表单的逻辑和用户体验，可以用于检查表单的流程是否合理，以及数据录入
大学生社团管理系统设计与实现
资源摘要信息:"基于ssm+vue的大学生社团管理系统.zip"
该系统是基于Java语言开发的，使用了ssm框架和vue前端框架，主要面向大学生社团进行管理和运营，具备了丰富的功能和良好的用户体验。
首先，ssm框架是Spring、SpringMVC和MyBatis三个框架的整合，其中Spring是一个全面的企业级框架，可以处理企业的业务逻辑，实现对象的依赖注入和事务管理。SpringMVC是基于Servlet API的MVC框架，可以分离视图和模型，简化Web开发。MyBatis是一个支持定制化SQL、存储过程以及高级映射的持久层框架。
SpringBoot是一种全新的构建和部署应用程序的方式，通过使用SpringBoot，可以简化Spring应用的初始搭建以及开发过程。它使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。
Vue.js是一个用于创建用户界面的渐进式JavaScript框架，它的核心库只关注视图层，易于上手，同时它的生态系统也十分丰富，提供了大量的工具和库。
系统主要功能包括社团信息管理、社团活动管理、社团成员管理、社团财务管理等。社团信息管理可以查看和编辑社团的基本信息，如社团名称、社团简介等；社团活动管理可以查看和编辑社团的活动信息，如活动时间、活动地点等；社团成员管理可以查看和编辑社团成员的信息，如成员姓名、成员角色等；社团财务管理可以查看和编辑社团的财务信息，如收入、支出等。
此外，该系统还可以通过微信小程序进行访问，微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。同时，它也实现了应用“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
总的来说，基于ssm+vue的大学生社团管理系统是一款功能丰富、操作简便、使用方便的社团管理工具，非常适合大学生社团的日常管理和运营。