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

ArcgisForJs快速入门

news 2026/5/28 1:22:00

文章目录

  • 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

Claude in Excel：原生集成的AI表格协作者

1. 项目概述&#xff1a;这不是插件&#xff0c;是Excel里长出来的AI同事“Claude in Excel”这个标题刚看到时&#xff0c;我下意识点开几个技术社区翻了一圈&#xff0c;发现多数人第一反应是&#xff1a;“又一个AI插件&#xff1f;”——其实完全不是。它根本没走传统Offic…...

编程新知 2026/5/26 4:58:26

信息系统项目管理师核心知识点精讲

一、项目整合管理（重点：项目章程与项目管理计划） 知识点详解： 项目整体管理是项目管理知识体系的核心，它确保项目各要素协调统一。在考试中，特别要掌握项目章程和项目管理计划的区别与联系。 项目章程是项目的“出生证明”，由项目发起人发布。它正式授权项目，赋予项…...

编程新知 2026/5/26 3:01:50

收藏必看｜2026 版大厂 AI 岗位薪资曝光！普通程序员转型大模型最全指南

深夜收到大厂 HR 好友发来的内部资料&#xff0c;再三叮嘱切勿对外泄露。如今网络信息传播速度极快&#xff0c;这份 2026 年企业 AI 岗真实薪资内幕&#xff0c;也值得给广大程序员、零基础入行小白参考借鉴。 翻看完整薪资台账后&#xff0c;真切感受到当下大模型赛道的薪资差…...

编程新知 2026/5/26 2:03:15

CANoe诊断测试没CDD文件怎么办？手把手教你用Fault Memory窗口和CAPL脚本读取解析DTC故障码

CANoe诊断测试无CDD文件的实战解决方案&#xff1a;从Fault Memory到CAPL脚本全解析当CDD文件缺失或定义不清晰时&#xff0c;诊断测试工程师常常陷入困境。本文将深入探讨如何利用Fault Memory窗口的基础功能&#xff0c;并通过CAPL脚本实现更灵活、更强大的故障码读取与解析方…...

编程新知 2026/5/25 23:16:52

Postgresql基础实践教程（八）

⭐️⭐️⭐️⭐️⭐️ 完整数据详见 练习数据免费 ⭐️⭐️⭐️⭐️⭐️ 六十九、查找会员ID 27的向上推荐链 问题 查找会员ID 27的向上推荐链&#xff1a;即推荐该会员的人&#xff0c;以及推荐那个人的人&#xff0c;依此类推。返回会员ID、名字和姓氏。按会员ID降序排列。…...

编程新知 2026/5/25 22:50:40

Unity iOS构建报错SDK version is 0的根因与精准修复

1. 这个报错不是Unity在“发脾气”&#xff0c;而是工程配置在“装死”刚接手一个老项目&#xff0c;打开Unity编辑器&#xff0c;点Build Settings准备打包iOS&#xff0c;结果弹出一行红字&#xff1a;“SDK version is 0, cannot build”。我第一反应是——这什么鬼&#xf…...

编程新知 2026/5/25 22:42:38

1688运营培训/询盘成本从500元降到63.9！1688运营培训还原1688真实玩法

1688运营培训/询盘成本从500元降到63.9&#xff01;1688运营培训还原1688真实玩法500块钱一个询盘&#xff0c;你敢信&#xff1f;做1688运营培训这么多年&#xff0c;这个数字我都觉得离谱。前阵子遇到一个老板&#xff0c;一上来就开始吐槽1688&#xff0c;说1688就是个垃圾平…...

编程新知 2026/5/25 21:15:34

AB包相关知识

Lua与AB包/Addressables以及YooAsset 摘自千问&#xff1a; Lua 是菜谱&#xff08;逻辑&#xff09;&#xff1a;决定了菜怎么做&#xff0c;味道如何。因为你需要随时换菜谱&#xff08;热更新&#xff09;&#xff0c;所以菜谱不能死板地印在墙上&#xff08;编译进主包&a…...

编程新知 2026/5/25 17:53:10

独立开发者利用taotoken模型广场为不同任务选择性价比最优模型

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 独立开发者利用taotoken模型广场为不同任务选择性价比最优模型 对于独立开发者而言&#xff0c;在有限的预算内高效完成多样化的开…...

编程新知 2026/5/25 17:26:09

避坑指南：Unity中AABB碰撞检测失效的5种常见原因及解决方法

Unity中AABB碰撞检测失效的深度排查与解决方案在Unity开发中&#xff0c;AABB&#xff08;轴对齐包围盒&#xff09;碰撞检测是基础但容易出问题的环节。许多开发者都遇到过这样的情况&#xff1a;明明逻辑正确&#xff0c;测试时却出现物体穿透、碰撞时有时无等诡异现象。本文…...

编程新知 2026/5/25 17:17:18