当前位置： 首页 > news >正文

ArcgisForJS如何实现添加含图片样式的点要素？

news 文章来源：https://blog.csdn.net/qq_40640910/article/details/136230355 2025/4/21 7:32:06

文章目录

  • 0.引言
  • 1.加载底图
  • 2.获取点要素的坐标
  • 3.添加含图片样式的几何要素
  • 4.完整实现

0.引言

ArcGIS API for JavaScript 是一个用于在Web和移动应用程序中创建交互式地图和地理空间分析应用的库。本文在ArcGIS For JavaScript中使用Graphic对象来创建包含图片样式的点要素。

1.加载底图

（1）实现代码

<!DOCTYPE html>
<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Create Map</title>  <link rel="stylesheet" href="http://localhost:8099/arcgis_js_api/javascript/4.28/esri/themes/light/main.css" />  <script src="http://localhost:8099/arcgis_js_api/javascript/4.28/init.js"></script>  <style>  html,  body,  #viewDiv {  padding: 0;  margin: 0;  height: 100%;  width: 100%;  }  </style>  <script type="text/javascript">  require(["esri/Map",  "esri/Basemap",  "esri/layers/TileLayer",  "esri/views/MapView",  "esri/layers/GraphicsLayer",  "esri/Graphic"  ], (  Map,  Basemap,  TileLayer,  MapView,  GraphicsLayer,  Graphic  )=>{  //添加底图  var lyTile = new TileLayer({  url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"  });  var baseMap = new Basemap({  baseLayers: [lyTile]  });  var map = new Map({  basemap: baseMap  });  var view = new MapView({  container: "viewDiv",  map: map,  zoom: 16,  center: [106.56657791438427, 29.679927608558902]  });  });  </script>  
</head>  <body>  <div id="viewDiv"></div>  
</body>  </html>

（2）实现结果
  在这里插入图片描述

2.获取点要素的坐标

（1）实现代码
  在这里插入图片描述

//点击地图获取经纬度坐标
view.on("click", evt => {  let mapPoint = evt.mapPoint;  alert(`经度：${mapPoint.longitude},纬度${mapPoint.latitude}`);  
});

（2）实现结果
  在这里插入图片描述

以上获取的坐标作为点要素的坐标，为（经度：106.56651354136791,纬度29.68001149992497）。

3.添加含图片样式的几何要素

（1）实现代码
  在这里插入图片描述

//添加含图片样式的几何要素
var graphic = new Graphic({  geometry: point,  symbol: symbol  
});  
var graphicsLayer = new GraphicsLayer();  
graphicsLayer.visible = true;  
var point = {  type: "point",  x: 106.56657791438427,  y: 29.679927608558902,  SpatialReference: 3857  
};  
var symbol = {  type: "picture-marker",  url:"http://img14.360buyimg.com/n1/jfs/t2149/268/1108858690/251183/f7d770d0/5678c41eN59e3de7f.jpg",//访问小车图片  width: "50px",  height: "50px",  outline: {  style: "solid"  },  
};  
var attributes = { name: '小车', content: '真是一辆漂亮的小车' };  
var popupTemplate1 = {  title: "标题:" + attributes.name,  content: "内容:" + attributes.content  
};  
var graphic = new Graphic({  geometry: point,  symbol: symbol,  popupTemplate: popupTemplate1,  
});  
graphicsLayer.graphics.add(graphic);  
map.add(graphicsLayer);

（2）实现结果
  在这里插入图片描述

4.完整实现

（1）完整代码

<!DOCTYPE html>
<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Create Map</title>  <link rel="stylesheet" href="http://localhost:8099/arcgis_js_api/javascript/4.28/esri/themes/light/main.css" />  <script src="http://localhost:8099/arcgis_js_api/javascript/4.28/init.js"></script>  <style>  html,  body,  #viewDiv {  padding: 0;  margin: 0;  height: 100%;  width: 100%;  }  </style>  <script type="text/javascript">  require(["esri/Map",  "esri/Basemap",  "esri/layers/TileLayer",  "esri/views/MapView",  "esri/layers/GraphicsLayer",  "esri/Graphic"  ], (  Map,  Basemap,  TileLayer,  MapView,  GraphicsLayer,  Graphic  )=>{  //添加底图  var lyTile = new TileLayer({  url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"  });  var graphic = new Graphic({  geometry: point,  symbol: symbol  });  //创建一个图层  var graphicsLayer = new GraphicsLayer();  //设置可见  graphicsLayer.visible = true;  //创建一个面  var point = {  type: "point",  x: 106.56657791438427,  y: 29.679927608558902,  SpatialReference: 3857  };  var symbol = {  type: "picture-marker",  url:"http://img14.360buyimg.com/n1/jfs/t2149/268/1108858690/251183/f7d770d0/5678c41eN59e3de7f.jpg",//访问小车图片  width: "50px",  height: "50px",  outline: {  style: "solid"  },  };  var attributes = { name: '小车', content: '真是一辆漂亮的小车' };  var popupTemplate1 = {  title: "标题:" + attributes.name,  content: "内容:" + attributes.content  };  var graphic = new Graphic({  geometry: point,  symbol: symbol,  popupTemplate: popupTemplate1,  });  graphicsLayer.graphics.add(graphic);  var baseMap = new Basemap({  baseLayers: [lyTile]  });  var map = new Map({  basemap: baseMap  });  map.add(graphicsLayer)  var view = new MapView({  container: "viewDiv", // Reference to the DOM node that will contain the view  map: map, // References the map object created in step 3  zoom: 16,  center: [106.56657791438427, 29.679927608558902]  });  //点击地图获取经纬度坐标  //view.on("click", evt => {  //    let mapPoint = evt.mapPoint;  //    alert(`经度：${mapPoint.longitude},纬度${mapPoint.latitude}`);  //});  });  </script>  
</head>  <body>  <div id="viewDiv"></div>  
</body>  </html>

（2）实现结果
  在这里插入图片描述

参考资料：
[1] 一入GIS深似海. 不一样的前端，JavaScript之arcgis api教程; 2020-11-02 [accessed 2024-02-22].
[2] 半个GIS半个前端. arcgis api（三）arcgis api for js 4.x 加载高德地图、谷歌地图、天地图; 2018-08-17 [accessed 2024-02-22].
[3] 前端三脚猫. js中的变量声明（var、let、const的区别和解析）; 2021-03-08 [accessed 2024-02-22].

相关文章：

ArcgisForJS如何实现添加含图片样式的点要素？

文章目录 0.引言1.加载底图2.获取点要素的坐标3.添加含图片样式的几何要素4.完整实现 0.引言 ArcGIS API for JavaScript 是一个用于在Web和移动应用程序中创建交互式地图和地理空间分析应用的库。本文在ArcGIS For JavaScript中使用Graphic对象来创建包含图片样式的点要素。 …...

编程日记 2024/2/23 15:40:14

C#之WPF学习之路（2）

目录 控件的父类 DispatcherObject类 DependencyObject类 DependencyObject 类的关键成员和方法 Visual类 Visual 类的主要成员和方法 UIElement类 UIElement 类的主要成员和功能 FrameworkElement类 FrameworkElement 类的主要成员和功能 控件的父类 在 WPF (Windo…...

编程日记 2024/2/23 15:39:13

胶原抗体诱导小鼠关节炎模型

胶原诱导性关节炎小鼠(CIA)作为人类类风湿关节炎模型应用广泛,但CIA引起的关节炎起病比较缓慢&#xff0c;造模周期较长&#xff0c;一般为6-8周(1-12)。Chondrex公司已开发出单一种单克隆抗体合剂诱导的小鼠关节炎模型&#xff08;CAIA&#xff09;&#xff0c;明显缩短了造模…...

编程日记 2024/2/23 15:38:12

集百家所长的开放世界游戏，艾尔莎H311-PRO带你玩转《幻兽帕鲁》

随着近几年开放世界游戏热潮的兴起&#xff0c;如今这类游戏可以说是像雨后春笋般不断推出&#xff0c;比如《幻兽帕鲁》就是近期非常火热的一个代表&#xff0c;它不仅集合了生存、建造、宠物养成等多种元素&#xff0c;而且可爱的卡通画风格更是老少皆宜。那么&#xff0c;这…...

编程日记 2024/2/23 15:37:11

机器人内部传感器阅读笔记及心得-位置传感器-旋转变压器、激光干涉式编码器

旋转变压器 旋转变压器是一种输出电压随转角变化的检测装置&#xff0c;是用来检测角位移的&#xff0c;其基本结构与交流绕线式异步电动机相似&#xff0c;由定子和转子组成。 旋转变压器的原理如图1所示&#xff0c;定子相当于变压器的一次侧&#xff0c;有两组在空间位置上…...

编程日记 2024/2/23 15:35:09

深度学习的学习笔记帖子2

人脸数据集的介绍&#xff1a; https://zhuanlan.zhihu.com/p/362356480 https://blog.csdn.net/bjbz_cxy/article/details/122210641 CASIAWebFace人脸数据集等的github&#xff1a; https://github.com/deepinsight/insightface/blob/master/recognition/datasets/README.md…...

编程日记 2024/2/23 15:33:07

【机器学习学习脉络】

机器学习学习脉络 基础知识 数学基础 线性代数概率论与数理统计微积分最优化理论 编程基础 Python编程语言数据结构与算法软件工程原则 计算机科学基础 操作系统网络通信数据库系统 机器学习概论 定义与发展历程机器学习的主要任务和应用领域基本术语和概念 监督学习 线…...

编程日记 2024/2/23 15:30:02

golang命令行工具gtcli,实现了完美集成与结构化的gin脚手架,gin-restful-api开箱即用

关于gtools golang非常奈斯&#xff0c;gin作为web框架也非常奈斯&#xff0c;但我们在开发过程中&#xff0c;前期搭建会花费大量的时间&#xff0c;且还不尽人意。 为此我集成了gin-restful-api的模板gin-layout&#xff0c;还有脚手架一键生成项目。 集成相关 ginviperz…...

编程日记 2024/2/23 15:29:00

Qt 事件

1. 事件 事件是对各种应用程序需要知道的由应用程序内部或者外部产生的事情或者动作的通称。在Qt中使用一个对象来表示一个事件&#xff0c;它继承自QEvent类。 2. 事件和信号 事件与信号并不相同&#xff0c;比如我们使用鼠标点击了一下界面上的按钮&#xff0c;那么就会产生…...

编程日记 2024/2/23 15:25:57

JAVA高并发——并行算法

文章目录 1、并行流水线2、并行搜索3、并行排序3.1、分离数据相关性&#xff1a;奇偶交换排序3.2、改进的插入排序&#xff1a;希尔排序 4、并行算法&#xff1a;矩阵乘法 1、并行流水线 并行算法虽然可以充分发挥多核CPU的性能&#xff0c;但并非所有的运算都可以改造成并行的…...

编程日记 2024/2/23 15:24:56

HTTP 与 HTTPS-HTTP 解决了 HTTP 哪些问题?

资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) HTTP 解决了 HTTP 哪些问题? HTTP 由于是明文传输&#xff0c;所以安全上存在以下三个风险: 窃听风险&#xff0c;比如通信链路上可以获取通信内容&#xff0c;用户号容易没。篡改风险&#xff0c;比如…...

编程日记 2024/2/23 15:22:53

S32 Design Studio PE工具配置TMR

配置步骤 配置内容 生成的配置结构体如下&#xff0c;在Generated_Code路径下的lpTmr.c文件和lpTmr.h文件。 /*! lpTmr1 configuration structure */ const lptmr_config_t lpTmr1_config0 {.workMode LPTMR_WORKMODE_PULSECOUNTER,.dmaRequest false,.interruptEnable tr…...

编程日记 2024/2/23 15:18:49

Typescript中常用的数据类型

文章目录 概要TS的数据类型1.基础类型-- 简单的类型-- Array类型-- Object类型- 可选类型 -- Function类型- 函数的参数类型- 函数的返回值类型- 匿名函数的参数- 函数参数为对象类型- 函数的调用签名- 函数的构造签名(了解)- 剩余参数- 函数的重载(了解)- 函数的this(了解) 2.…...

编程日记 2024/2/23 15:17:48

【推荐】渗透测试面试（问题+答案）

1、介绍一下自认为有趣的挖洞经历 2、你平时用的比较多的漏洞是哪些？相关漏洞的原理？以及对应漏洞的修复方案？ 3、php/java反序列化漏洞的原理?解决方案? 4、如果一台服务器被入侵后,你会如何做应急响应? 5、你平时使用哪些工具?以及对应工具的特点? 6、如果遇到waf的情…...

编程日记 2024/2/23 15:16:47

基于java+springboot+vue实现的美食信息推荐系统（文末源码+Lw）23-170

1 摘 要 使用旧方法对美食信息推荐系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在美食信息推荐系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发…...

编程日记 2024/2/23 15:13:44

HGAME week2 web

1.What the cow say? 测试发现可以反引号命令执行 ls /f* tac /f*/f* 2.myflask import pickle import base64 from flask import Flask, session, request, send_file from datetime import datetime from pytz import timezonecurrentDateAndTime datetime.now(timezone(…...

编程日记 2024/2/23 15:12:43

SQL注入：网鼎杯2018-unfinish

目录 使用dirmap扫描 使用dirsearch扫描 使用acunetix扫描 爆破后端过滤的字符 绕过限制获取数据 这次的进行SQL注入的靶机是&#xff1a;BUUCTF在线评测 进入到主页面后发现是可以进行登录的&#xff0c;那么我们作为一个安全人员&#xff0c;那肯定不会按照常规的方式来…...

编程日记 2024/2/23 15:07:39

C 标准库 - ＜limits.h＞

在C语言编程中&#xff0c;<limits.h> 头文件扮演着关键角色&#xff0c;它为各种基本数据类型定义了最小和最大限制。通过使用这些预定义的宏&#xff0c;程序员可以确保程序代码不会尝试存储超出特定类型范围的值。 简介 <limits.h> 头文件包含了关于不同类型&…...

编程日记 2024/2/23 15:05:36

《游戏引擎架构》--学习3

内存管理 优化动态内存分配 维持最低限度的堆分配&#xff0c;并且永不在紧凑循环中使用堆分配 容器 迭代器 Unicode...

编程日记 2024/2/23 15:03:34

c语言中的大小写字母转换怎么转?

在C语言中&#xff0c;大小写字母转换是基于ASCII码表的特性实现的。ASCII码中&#xff0c;小写字母从’a’到’z’的ASCII码值是连续的&#xff08;97到122&#xff09;&#xff0c;而大写字母从’A’到’Z’的ASCII码值也是连续的&#xff08;65到90&#xff09;。它们之间有…...

编程日记 2024/2/23 15:02:34

java面试题之SpringMVC篇

Spring MVC的工作原理 Spring MVC的工作原理如下&#xff1a; DispatcherServlet 接收用户的请求找到用于处理request的 handler 和 Interceptors&#xff0c;构造成 HandlerExecutionChain 执行链找到 handler 相对应的 HandlerAdapter执行所有注册拦截器的preHandler方法调…...

编程日记 2024/2/23 15:01:33

基于FPGA的I2C接口控制器（包含单字节和多字节读写）

1、概括 前文对IIC的时序做了详细的讲解&#xff0c;还有不懂的可以获取TI的IIC数据手册查看原理。通过手册需要知道的是IIC读、写数据都是以字节为单位&#xff0c;每次操作后接收方都需要进行应答。主机向从机写入数据后&#xff0c;从机接收数据&#xff0c;需要把总线拉低来…...

编程日记 2024/2/23 14:59:30

使用sql判断两段时间是否重叠

使用sql判断两段时间是否重叠 1. 时间点重叠判断a)时间重叠有以下4种情况a)时间不重叠只有以下2种情况 判断条件, 不重叠的判断判断条件, 重叠的判断 假设现在有时间 [startTime, endTime], 数据库存在字段 sql_start_time 和 sql_end_time, 分别表示要判断的时间段和数据库的时…...

编程日记 2024/2/23 14:57:28

C++模板从入门到入土

1. 泛型编程 如果我们需要实现一个不同类型的交换函数&#xff0c;如果是学的C语言&#xff0c;你要交换哪些类型&#xff0c;不同的类型就需要重新写一个来实现&#xff0c;所以这是很麻烦的&#xff0c;虽然可以cv一下&#xff0c;有了模板就可以减轻负担。 下面写一个适…...

编程日记 2024/2/23 14:53:23

Kotlin 中注解 @JvmOverloads 的作用

JvmOverloads 注解的作用就是&#xff1a;在有默认参数值的方法加上 JvmOverloads 注解&#xff0c;则 Kotlin 就会暴露多个重载方法。 例如&#xff0c;没有加注解&#xff0c;默认参数没有起到任何作用。 fun f(a: String, b: Int 0, c: String "abc") {}那相当…...

编程日记 2024/2/23 14:48:16

EI级 | Matlab实现TCN-GRU-MATT、TCN-GRU、TCN、GRU多变量时间序列预测对比

EI级 | Matlab实现TCN-GRU-MATT、TCN-GRU、TCN、GRU多变量时间序列预测对比 目录 EI级 | Matlab实现TCN-GRU-MATT、TCN-GRU、TCN、GRU多变量时间序列预测对比预测效果基本介绍程序设计参考资料 预测效果 基本介绍 【EI级】Matlab实现TCN-GRU-MATT、TCN-GRU、TCN、GRU多变量时间…...

编程日记 2024/2/23 14:47:15

MongoDB文档插入

文章目录 MongoDB文档插入对比增删改查文档插入 MongoDB写安全机制非确认式写入 MongoDB文档查询参数说明查询操作符比较查询操作符逻辑查询操作符元素查询操作符数组查询操作符 模糊查询区别:$regex操作符中的option选项 MongoDB游标介绍游标函数手动迭代游标示例游标介绍 Mon…...

编程日记 2024/2/23 14:45:13

涵盖5大领域的机器学习工具介绍

随着数据的产生及其使用量的不断增加&#xff0c;对机器学习模型的需求也在成倍增加。由于ML系统包含了算法和丰富的ML库&#xff0c;它有助于分析数据和做出决策。难怪机器学习的知名度越来越高&#xff0c;因为ML应用几乎主导了现代世界的每一个方面。随着企业对这项技术的探…...

编程日记 2024/2/23 14:44:11

git修改及合并commit提交

在开发过程中&#xff0c;保持代码记录清晰会更方便追踪&#xff0c;对代码审核人员也更有便宜。 修改commit提交 比如我们刚提交了一个commit&#xff0c;但之后要追加代码到已经推送到远程仓库的提交中&#xff0c;这时我们可以选择修改commit提交&#xff0c;使新的更改也推…...

编程日记 2024/2/23 14:43:10

大型语言模型的语义搜索(一)：关键词搜索

关键词搜索(Keyword Search)是文本搜索种一种常用的技术&#xff0c;很多知名的应用app比如Spotify、YouTube 或 Google map等都会使用关键词搜索的算法来实现用户的搜索任务&#xff0c;关键词搜索是构建搜索系统最常用的方法&#xff0c;最常用的搜索算法是Okapi BM25&#x…...

编程日记 2024/2/23 14:42:08