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

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

news 2025/11/2 12:35:54

文章目录

  • 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

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/10/31 17:58:58

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/10/24 6:17:43

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/10/30 5:09:33

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2025/10/27 4:49:17

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2025/10/25 0:21:11

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2025/10/26 2:48:36

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2025/10/25 12:56:40

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17