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

ArcgisForJs快速入门

news 2026/2/8 17:59:29

文章目录

  • 0.引言
  • 1.前端代码编辑工具
  • 2.使用ArcgisForJs创建一个简单应用
  • 3.切片地图服务图层
  • 4.动态地图服务图层
  • 5.地图事件

0.引言

ArcGIS API for JavaScript是一款由Esri公司开发的用于创建WebGIS应用的JavaScript库。它允许开发者通过调用ArcGIS Server的REST API，将地图资源和其它资源（如ArcGIS Online）嵌入到Web应用中。ArcGIS API for JavaScript提供了丰富的功能，包括页面布局、地图图层、空间坐标转换、要素符号、专题图、属性查询、空间分析、三维场景、小部件、渲染器等。本文介绍如何快速入门ArcgisForJs。

1.前端代码编辑工具

（1）ArcgisForJs沙盒
ArcgisForJs的代码编写和测试在沙盒中进行。
ArcgisForJs沙盒可以访问： https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=map_create
  在这里插入图片描述
（2）代码笔
CodePen（代码笔）一款前端所见即所得的工具，我们可以在线编辑制作前端页面，所见即所得。同时网站提供所有常见的 js、css 库，并且支持流行技术（如 SASS），免去了我们自建平台的麻烦。编辑器网址： https://codepen.io/pen/
  在这里插入图片描述

2.使用ArcgisForJs创建一个简单应用

创建任何GIS地图应用程序，都需要遵循一些步骤。假如想让地图成为应用程序的一部分，那么就需要按照这些步骤来执行。需要遵循以下步骤：①创建页面HTML代码；②引用ArcGIS API for JavaScript和样式表；③加载模块；④确保DOM可用；⑤创建地图；⑥定义页面内容；⑦页面样式。
（1）主要代码

<!DOCTYPE html>
<html>  
<head>  <title>Create a Map</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  <link rel="stylesheet" href="https://js.arcgis.com/3.45/dijit/themes/claro/claro.css">  <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css">  <style>  html, body, #mapDiv {  padding: 0;  margin: 0;  height: 100%;  }  </style>  <script src="https://js.arcgis.com/3.45/"></script>  <script>  dojo.require("esri.map");  function init(){  var map = new esri.Map("mapDiv", {  basemap: "topo-vector",  center: [-122.45, 37.75],  zoom: 13  });  }  dojo.ready(init);  </script>  </head>  
<body class="claro">  <div id="mapDiv"></div>  
</body>  
</html>

（2）结果显示
  在这里插入图片描述

3.切片地图服务图层

ArcGISTiledMapServiceLayer类使用在当引用ArcGIS Server暴露的切片（缓存）地图服务时。这种类型的对象使用已经缓存过的切片地图集合，所以性能得以改善。
（1）主要代码

<!DOCTYPE html>
<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">  <title>Tiled map service</title>  <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css">  <style>  html, body, #map {  height: 100%; width: 100%; margin: 0; padding: 0;  }  </style>  <script src="https://js.arcgis.com/3.45/"></script>  <script>  var map;  require(["esri/map",  "esri/layers/ArcGISTiledMapServiceLayer",  "esri/geometry/Point",  "esri/SpatialReference",  "dojo/domReady!"],  function(Map, ArcGISTiledMapServiceLayer, Point, SpatialReference) {  map = new Map("map", {  center: new Point(1714791.187457787, 2194882.166227445, new SpatialReference({ wkid: 5936 }))  });  var tiled = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/arcgis/rest/services/Polar/Arctic_Imagery/MapServer");  map.addLayer(tiled);  }  );  </script>  </head>  <body>  <div id="map"></div>  </body>  
</html>

（2）结果显示
  在这里插入图片描述

4.动态地图服务图层

ArcGISDynamicMapService类用来动态创建ArcGIS Server地图服务。
（1）主要代码

<!DOCTYPE html>
<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  <title>Create Map and add a dynamic layer</title>  <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css"/>  <style>  html, body, #mapDiv{  padding: 0;  margin: 0;  height: 100%;  }  </style>  <script src="https://js.arcgis.com/3.45/"></script>  <script>  var map;  require([  "esri/map",  "esri/layers/ArcGISDynamicMapServiceLayer",  "esri/layers/ImageParameters"  ], function (  Map, ArcGISDynamicMapServiceLayer, ImageParameters) {  map = new Map("mapDiv", {  sliderOrientation : "horizontal"  });  var imageParameters = new ImageParameters();  imageParameters.format = "jpeg"; // default is PNG8.  //Takes a URL to a non cached map service.  var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer", {  "imageParameters" : imageParameters  });  map.addLayer(dynamicMapServiceLayer);  });  </script>  </head>  <body>  <div id="mapDiv"></div>  </body>  
</html>

（2）结果显示
  在这里插入图片描述

5.地图事件

在编程世界里，事件是发生在应用程序中的动作。通常，这些事件通过终端用户触发，包括鼠标单击、鼠标拖拽和键盘动作，但是它还包括数据的发送和接收、组件修改和其他操作。
（1）主要代码

<!DOCTYPE html>
<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  <title>Select with feature layer</title>  <link rel="stylesheet" href="https://js.arcgis.com/3.45/dijit/themes/tundra/tundra.css">  <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css">  <style>  html, body, #mapDiv {  padding: 0;  margin: 0;  height: 100%;  }  #messages{  background-color: #fff;  box-shadow: 0 0 5px #888;  font-size: 1.1em;  max-width: 15em;  padding: 0.5em;  position: absolute;  right: 20px;  top: 20px;  z-index: 40;  }  </style>  <script src="https://js.arcgis.com/3.45/"></script>  <script>  var map;  require([  "esri/map", "esri/layers/FeatureLayer",  "esri/tasks/query", "esri/geometry/Circle",  "esri/graphic", "esri/symbols/SimpleMarkerSymbol",  "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",  "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"  ], function(  Map, FeatureLayer,  Query, Circle,  Graphic, SimpleMarkerSymbol,  SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,  esriConfig, Color, dom  ) {  map = new Map("mapDiv", {  basemap: "streets-vector",  center: [-95.249, 38.954],  zoom: 14,  slider: false  });  // Add the census block points in on demand mode. An outfield is specified since it is used when calculating   the total population falling within the one mile radius.  var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{  outFields: ["POP2000"]  });  // Selection symbol used to draw the selected census block points within the buffer polygon  var symbol = new SimpleMarkerSymbol(  SimpleMarkerSymbol.STYLE_CIRCLE,  12,  new SimpleLineSymbol(  SimpleLineSymbol.STYLE_NULL,  new Color([247, 34, 101, 0.9]),  1  ),  new Color([207, 34, 171, 0.5])  );  featureLayer.setSelectionSymbol(symbol);  // Make unselected features invisible  var nullSymbol = new SimpleMarkerSymbol().setSize(0);  featureLayer.setRenderer(new SimpleRenderer(nullSymbol));  map.addLayer(featureLayer);  var circleSymb = new SimpleFillSymbol(  SimpleFillSymbol.STYLE_NULL,  new SimpleLineSymbol(  SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,  new Color([105, 105, 105]),  2  ), new Color([255, 255, 0, 0.25])  );  var circle;  // When the map is clicked create a buffer around the click point of the specified distance  map.on("click", function(evt){  circle = new Circle({  center: evt.mapPoint,  geodesic: true,  radius: 1,  radiusUnit: "esriMiles"  });  map.graphics.clear();  var graphic = new Graphic(circle, circleSymb);  map.graphics.add(graphic);  var query = new Query();  query.geometry = circle.getExtent();  // Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.  featureLayer.queryFeatures(query, selectInBuffer);  });  function selectInBuffer(response){  var feature;  var features = response.features;  var inBuffer = [];  // Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box  for (var i = 0; i < features.length; i++) {  feature = features[i];  if(circle.contains(feature.geometry)){  inBuffer.push(feature.attributes[featureLayer.objectIdField]);  }  }  var query = new Query();  query.objectIds = inBuffer;  // Use an objectIds selection query (should not need to go to the server)  featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){  var totalPopulation = sumPopulation(results);  var r = "";  r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";  dom.byId("messages").innerHTML = r;  });  }  function sumPopulation(features) {  var popTotal = 0;  for (var x = 0; x < features.length; x++) {  popTotal = popTotal + features[x].attributes["POP2000"];  }  return popTotal;  }  });  </script>  </head>  <body>  <span id="messages">Click on the map to select census block points within 1 mile.</span>  <div id="mapDiv"></div>  </body>  
</html>

（2）结果显示
  在这里插入图片描述

参考资料：
[1] 派普勒[著]张大伟[译]. 《JavaScript构建Web和ArcGIS Server应用实战》; 2015-12-01 [accessed 2024-01-28].
[2] hangge. CodePen - 一个在线的前端代码编辑工具（可用于制作测试页面、代码调试）; 2019-12-02 [accessed 2024-01-28].
[3] . ArcGIS Maps SDK for JavaScript; [accessed 2024-01-28].
[4] . ArcGIS API for JavaScript (legacy) 3.45; [accessed 2024-01-28].
[5] 祥哥哥咩~. arcgis for js图层graphic的鼠标悬浮事件; 2019-04-26 [accessed 2024-01-28].

相关文章：

ArcgisForJs快速入门

文章目录 0.引言1.前端代码编辑工具2.使用ArcgisForJs创建一个简单应用3.切片地图服务图层4.动态地图服务图层5.地图事件 0.引言 ArcGIS API for JavaScript是一款由Esri公司开发的用于创建WebGIS应用的JavaScript库。它允许开发者通过调用ArcGIS Server的REST API&#xff0c…...

编程日记 2024/1/29 17:26:33

【解决方法】git pull报错ssh: connect to host github.com port 22: Connection timed out

问题 git pull ssh: connect to host github.com port 22: Connection timed out fatal: Could not read from remote repository.解决方法 在C:\Users\username.ssh文件夹下新建config文件&#xff0c;填入以下文本&#xff08;如有则直接在文件最后一行新增&#xff09;&am…...

编程日记 2024/1/29 17:25:31

30天精通Nodejs--第三十天：项目实战-物联网应用

目录 引言架构设计编码创建项目数据服务模拟设备消息接收并保存设备数据后端接口项目启动及接口测试项目启动测试源码地址结语引言 在之前的一系列文章中，我们已系统性地探讨了诸多Node.js相关的技术要点与理论背景。随着知识体系的铺垫到位，我们现在步入了实战环节。接下来…...

编程日记 2024/1/29 17:22:28

java 社区资源管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web社区资源管系统是一套完善的java web信息管理系统 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.…...

编程日记 2024/1/29 17:21:27

网络编程套接字(Socket)

为什么需要网络编程??? -丰富的网络资源 每天你在b站上刷着喜欢的up主的视频,实质是通过网络,获取到网络上的一个视频资源 与本地打开文件类似,只是视频文件这个资源来源是网络 所谓的网络编程,其实就是从网络上获取各种数据资源 什么是网络编程?? 网络编程,指的是网络…...

编程日记 2024/1/29 17:20:25

C语言第十一弹---函数(下)

​ ✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 函数 1、嵌套调用和链式访问 1.1、嵌套调用 1.2、链式访问 2、函数的声明和定义 2.1、单个文件 2.2、多个文件 2.3、static 和 extern 2.3.1、static…...

编程日记 2024/1/29 17:19:24

Unity读书系列《Unity3D游戏开发》——拓展编辑器（一）

文章目录 前言一、扩展Project视图1、右键扩展菜单&#xff08;Asset&#xff09;2、监听事件3、拓展布局 二、扩展Hierarchy视图1、拓展菜单&#xff08;GameObject&#xff09;2、拓展布局3、重写菜单 三、扩展Inspector视图1、扩展原生组件2、扩展继承组件 四、扩展Scene视图…...

编程日记 2024/1/29 17:06:07

【Git】项目管理笔记

文章目录 本地电脑初始化docker报错.gitignoregit loggit resetgit statusgit ls-filesgit rm -r -f --cached拉取仓库文件更新本地的项目报错处理! [rejected] master -> master (fetch first)gitgitee.com: Permission denied (publickey).error: remote origin already e…...

编程日记 2024/1/29 17:05:06

中文词性标注工具pkuseg例子(运行结果，不太好）

pkuseg_demo.md pkuseg 预训练模型 预训练模型science 安装 pip3 install pkuseg cd /rot/pkuseg_home/model/wget https://github.com/lancopku/pkuseg-python/releases/download/v0.0.25/science.zip uzip science.zip -d ./science/ ls /rot/pkuseg_home/model/science/…...

编程日记 2024/1/29 16:57:58

获取URL参数：split方法、URLSearchParams方法示例

在JavaScript中&#xff0c;可以使用多种方法来获取URL参数&#xff0c;其中常用的方法有split()和URLSearchParams()。 使用split()方法获取URL参数&#xff1a; split()方法将字符串分割成数组。可以使用split()方法将URL分割成协议、主机、路径和查询字符串等部分。然后可…...

编程日记 2024/1/29 16:54:54

SparkSql---用户自定义函数UDFUDAF

文章目录 1.UDF2.UDAF2.1 UDF函数实现原理2.2需求:计算用户平均年龄2.2.1 使用RDD实现2.2.2 使用UDAF弱类型实现2.2.3 使用UDAF强类型实现 1.UDF 用户可以通过 spark.udf 功能添加自定义函数&#xff0c;实现自定义功能。 如&#xff1a;实现需求在用户name前加上"Name:…...

编程日记 2024/1/29 16:52:52

系统架构15 - 软件工程（3）

软件过程模型 瀑布模型特点缺点 原型化模型特点两个阶段不同类型注意 螺旋模型V 模型特点 增量模型特点 喷泉模型基于构件的开发模型(CBSD)形式化方法模型敏捷模型特点“适应性” (adaptive) 而非“预设性” (predictive)“面向人的” (People-oriented) 而非“面向过程的” (P…...

编程日记 2024/1/29 16:49:49

两个近期的计算机领域国际学术会议（软件工程、计算机安全）：欢迎投稿

近期&#xff0c;受邀担任两个国际学术会议的Special session共同主席及程序委员会成员&#xff08;TPC member&#xff09;&#xff0c;欢迎广大学界同行踊跃投稿&#xff0c;分享最新研究成果。期待这个夏天能够在夏威夷檀香山或者加利福尼亚圣荷西与各位学者深入交流。 SERA…...

编程日记 2024/1/29 16:32:28

（二十一）Flask之上下文管理第二篇（细细扣一遍源码）

每篇前言&#xff1a; &#x1f3c6;&#x1f3c6;作者介绍&#xff1a;【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者 &#x1f525;&#x1f525;本文已收录于Flask框架从入门到实战专栏&#xff1a;《Flask框架从入…...

编程日记 2024/1/29 16:31:27

Java项目：基于SSM框架实现的企业员工岗前培训管理系统（ssm+B/S架构+源码+数据库+毕业论文）

一、项目简介 本项目是一套ssm821基于ssm框架实现的企业员工岗前培训管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格…...

编程日记 2024/1/29 16:30:26

深入了解Redis：选择适用于你的场景的持久化方案

自然语言处理的发展 文章目录 自然语言处理的发展强烈推荐前言&#xff1a;Redis提供了几种主要的持久化方案&#xff1a;RDB快照持久化&#xff1a;工作原理&#xff1a; AOF日志文件持久化&#xff1a;混合持久化&#xff1a; 总结强烈推荐专栏集锦写在最后 强烈推荐 前些天…...

编程日记 2024/1/29 16:29:25

【Git配置代理】Failed to connect to github.com port 443 问题解决方法

前言&#xff1a; 在学习代码审计时&#xff0c;有时会需要使用git去拉取代码&#xff0c;然后就出现了如下错误 看过网上很多解决方法&#xff0c;觉得问题的关键还是因为命令行在拉取/推送代码时并没有使用VPN进行代理。 解决办法 &#xff1a; 配置http代理&#xff1a;…...

编程日记 2024/1/29 16:28:24

python提取word文档内容的示例

一、微软Word历史、背景&#xff1a; Word 的特异功能就是把那些应该写成简单的 TXT 或 PDF 格式的文件&#xff0c;变成了既大又慢且难以打开的怪兽&#xff0c;它们经常在系统切换和版本切换中出现格式不兼容&#xff0c;而且因为某些原因在文件内容已经定稿后仍处于可编辑的…...

编程日记 2024/1/29 16:26:21

MarkDown快速入门-以Obsidian编辑器为例

直接上图&#xff0c;左右对应。 首先是基础语法。 # 标题&#xff0c;几个就代表几级标题&#xff1b;* 单个是序号&#xff0c;两个在一起就是斜体&#xff1b;- [ ] 代表任务&#xff0c;注意其中的空格&#xff1b; 然后是表格按钮代码 | 使用中竖线代表表格&#xff0c…...

编程日记 2024/1/29 16:24:19

【计算机网络】协议，电路交换，分组交换

定义了在两个或多个通信实体之间交换的报文格式和次序,以及报文发送和/或接收一个报文或其他事件所采取的动作.网络边缘: 端系统 (因为处在因特网的边缘) 主机 端系统 客户 client服务器 server今天大部分服务器都属于大型数据中心(data center)接入网(access network) 指将端…...

编程日记 2024/1/29 16:22:15

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2026/2/3 8:20:06

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2026/1/25 13:32:52

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2026/2/1 4:23:19

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/2/5 4:33:51

java 局域网 rtsp 取流 WebSocket 推送到前端显示 低延迟

众所周知 摄像头取流推流显示前端延迟大 传统方法是服务器取摄像头的rtsp流 然后客户端连服务器 中转多了&#xff0c;延迟一定不小。 假设相机没有专网 公网 1相机自带推流 直接推送到云服务器 然后客户端拉去 2相机只有rtsp &#xff0c;边缘服务器拉流推送到云服务器 …...

编程新知 2026/1/26 18:04:11

LINUX编译vlc

下载 VideoLAN / VLC GitLab 选择最新的发布版本 准备 sudo apt install -y xcb bison sudo apt install -y autopoint sudo apt install -y autoconf automake libtool编译ffmpeg LINUX FFMPEG编译汇总&#xff08;最简化&#xff09;_底部的附件列表中】: ffmpeg - lzip…...

编程新知 2026/1/24 20:31:35

如何优雅地绕过限制调用海外AI-API？反向代理与API中转技术详解​

阅读时长​​ | 8分钟 ​​适用读者​​ | 需要跨境调用OpenAI等AI服务的开发者/企业 ​​一、问题背景&#xff1a;为什么需要代理&#xff1f;​​ 最近在技术社区看到这样的求助&#xff1a; "公司服务器在国内&#xff0c;但业务需要调用OpenAI接口&#xff0c;直接访…...

编程新知 2026/2/5 3:53:36