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

ArcgisForJs快速入门

news 文章来源：https://blog.csdn.net/qq_40640910/article/details/135900052 2025/5/8 23:11:45

文章目录

  • 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

加速应用开发：低代码云SaaS和源码交付模式如何选

随着数字化转型的加速&#xff0c;企业对于快速开发和交付高质量应用的需求也越来越迫切。为了满足这一需求&#xff0c;开发者们开始探索采用低代码平台进行软件开发工作&#xff0c;以加速应用开发过程。 目前&#xff0c;市场上的低代码产品众多&#xff0c;但基本可分为简单…...

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

ATT汇编

指令后缀 AT&T格式的汇编指令有不同的后缀 其中 b表示byte&#xff0c;字节 w表示word&#xff0c;字/两字节 l表示long&#xff0c;32位系统下的long是4字节 q表示quad&#xff0c;意味四重&#xff0c;表示4个字/8字节 寄存器用途 参见 AT&T的汇编世界 - Gemfield…...

编程日记 2024/1/29 16:12:03

java split 拆分字符串

今天突然把java里split 跟&#xff0c;kotlin中的split 弄混了 kotlin中split 的用法跟python 中的split 用法是一样的&#xff0c;java中由于返回值是String[] 的数组&#xff0c;所以 在使用的时候需要注意下返回值如果要获取里面的内容&#xff0c;还是需要遍历下里面的内…...

编程日记 2024/1/29 16:09:00

【InternLM 大模型实战】作业与笔记汇总

笔记1&#xff1a;https://blog.csdn.net/weixin_42567071/article/details/135375937 笔记2&#xff1a;https://blog.csdn.net/weixin_42567071/article/details/135423120 作业2&#xff1a;https://github.com/xiaomile/InternLM-homework/tree/main/%E4%BD%9C%E4%B8%9A1 笔…...

编程日记 2024/1/29 16:07:59

解析PreMaint在石油化工设备预测性维护领域的卓越表现

石油化工行业一直在寻找能够确保设备高效运行的先进维护解决方案。在这个领域&#xff0c;PreMaint以其卓越的性能和创新的技术引起了广泛关注。 一、为何选择预测性维护&#xff1f; 传统的维护方法&#xff0c;基于固定的时间表&#xff0c;无法灵活应对设备的真实运行状况。…...

编程日记 2024/1/29 16:03:53

C++面试宝典第25题：阶乘末尾零的个数

题目 给定一个整数n，返回n!（n的阶乘）结果尾数中零的个数。 示例 1： 输入：3 输出：0 解释：3! = 6，尾数中没有零。 示例 2： 输入：5 输出：1 解释：5! = 120，尾数中有1个零。 解析 这道题主要考察应聘者对于数学问题的分析和理解能力，以及在多个解决方案中，寻求最优…...

编程日记 2024/1/29 16:00:50

PCIE 4.0 Equalizaiton（LTSSM 均衡流程）

1. 均衡 在Tx端有FFE&#xff08;Feed Forward Equalizer&#xff0c;前馈均衡器&#xff09;&#xff1b;在Rx端有&#xff1a;CTLE&#xff08;Continuous Time Linear Equalizer&#xff0c;连续时间线性均衡器&#xff09;和DFE&#xff08;Decision Feedback Equalizer&a…...

编程日记 2024/1/29 15:58:48

[libwebsockets]lighttpd+libwebsockets支持ws和wss配置方法说明

libwebsockets介绍 libwebsockets是一款轻量级用来开发服务器和客户端的C库。它不仅支持ws，wss还同时支持http与https，可以轻轻松松结合openssl等库来实现ssl加密。 官方参考链接： https://libwebsockets.org/ lighttpd版本 lighttpd/1.4.59 (ssl) - a light and fast w…...

编程日记 2024/1/29 15:56:46

常用软件安装

服务器版本为Centos7.8 x86_64 1.yum下载提速 1.wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 2. yum clean all 3.yum makecache2.jdk yum install java-1.8.0-openjdk* -y # yum update 时自动更新jdk版本 1.yum -y install …...

编程日记 2024/1/29 15:52:40

翻译: GPT-4 Vision静态图表转换为动态数据可视化 升级Streamlit 三

GPT-4 Vision 系列: 翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式二 1. 将任何静态图表转换为动态数据可视化 ChatGPT Vision 不仅可以将涂鸦变成功能齐全的 Streamlit 应用程序&#xff0c;还…...

编程日记 2024/1/29 15:48:34