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

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

news 2025/7/10 7:43:37

文章目录

  • 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

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/7/9 12:58:39

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/7/9 22:44:11

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/7/9 15:58:34

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/6/16 12:40:21

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/7/8 15:41:13

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/7/6 17:42:11

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/7/10 1:51:09

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/7/9 12:33:23

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/6/17 12:13:20

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/7/8 5:29:35