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

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

news 2026/2/9 1:54:25

文章目录

  • 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

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/30 10:10:55

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2026/2/8 8:16:14

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2026/1/30 4:52:56

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2026/1/21 12:29:04

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2026/1/9 8:59:09