ArcgisForJs快速入门

文章目录

  • 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].

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/247384.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

探索Viper-适用于GoLang的完整配置解决方案

探索Viper-适用于GoLang的完整配置解决方案

前言 对于现代应用程序&#xff0c;尤其大中型的项目来说&#xff0c;在程序启动和运行时&#xff0c;往往需要传入许多参数来控制程序的行为&#xff0c;我们可以通过命令行参数&#xff0c;环境变量&#xff0c;配置文件等方式来将参数传递给程序。而Viper库为Golang语言开发…
阅读更多...
Flink问题解决及性能调优-【Flink不同并行度引起sink2es报错问题】

Flink问题解决及性能调优-【Flink不同并行度引起sink2es报错问题】

最近需求&#xff0c;仅想提高sink2es的qps&#xff0c;所以仅调节了sink2es的并行度&#xff0c;但在调节不同算子并行度时遇到一些问题&#xff0c;找出问题的根本原因解决问题&#xff0c;并分析整理。 实例代码 --SET table.exec.state.ttl86400s; --24 hour,默认: 0 ms …
阅读更多...
centos 7安装MySQl

centos 7安装MySQl

本文参考借鉴&#xff1a;https://cloud.tencent.com/developer/article/2353312&#xff0c;非常赞&#xff01; 为了避免权限不足的问题&#xff0c;建议切换至root用户进行安装 1.MySQL的清理与安装 查看是否存在MySQL服务 安装mysql之前&#xff0c;需要先看看要安装系…
阅读更多...
基于springboot宠物领养系统

基于springboot宠物领养系统

摘要 随着社会的不断发展和人们生活水平的提高&#xff0c;宠物在家庭中的地位逐渐上升&#xff0c;宠物领养成为一种流行的社会现象。为了更好地管理和促进宠物领养的过程&#xff0c;本文基于Spring Boot框架设计和实现了一套宠物领养系统。该系统以用户友好的界面为特点&…
阅读更多...
选择合适的CRM管理系统，需要满足以下条件

选择合适的CRM管理系统，需要满足以下条件

随着数据时代的发展和企业业务的不断扩大&#xff0c;数据的比例开始增加&#xff0c;传统的数据计算方法不再适合现代企业。客户管理已成为企业最重要的组成部分之一&#xff0c;越来越多的企业开始关注客户管理。在crm管理系统上&#xff0c;企业希望通过crm管理系统&#xf…
阅读更多...
第一节课，用户管理--后端初始化，项目调通。二次翻工

第一节课，用户管理--后端初始化，项目调通。二次翻工

一、代码下载 网址&#xff1a; 用户管理第一节课&#xff0c;阿里生成代码包-CSDN博客 二、项目步骤&#xff0c;参考从 网址&#xff1a; 一、第一节课&#xff0c;用户管理--后端初始化&#xff0c;项目调通-CSDN博客 从这里开始跟随 &#xff08;一&#xff09;、跟随…
阅读更多...
爬虫基础-前端基础

爬虫基础-前端基础

Html是骨骼、css是皮肤、js是肌肉&#xff0c;三者之间的关系可以简单理解为m(html)-v(css)-c(js) 浏览器的加载过程 构建dom树 子资源加载-加载外部的css、图片、js等外部资源 样式渲染-css执行 DOM树 ajax、json、xml AJAX 是一种在无需重新加载整个网页的情况下&#xf…
阅读更多...
简述云原生基础定义及关键技术

简述云原生基础定义及关键技术

云原生是什么 云原生是面向“云”而设计的应用，因此技术部分依赖于传统云计算的 3 层概念，基础设施即服务（IaaS）、平台即服务（PaaS）和软件即服务（SaaS）。 例如，敏捷的不可变基础设施交付类似于 IaaS，用来提供计算网络存储等基础资源，这些资源是可编程且不可变的，直…
阅读更多...
【Java与网络6】实现一个自己的HTTP浏览器

【Java与网络6】实现一个自己的HTTP浏览器

前面我们讨论了HTTP协议的基本结构和Socket编程的基本原理&#xff0c;本文我们来整个大活&#xff1a;自己实现一个简单的浏览器。 目录 1.主线程循环体 2.readHostAndPort()方法的实现 3.readHttpRequest()方法的实现 4.sendHttpRequest()方法的实现 5.readHttpRespons…
阅读更多...
前端性能优化——图片压缩和懒加载

前端性能优化——图片压缩和懒加载

图片压缩 使用第三方工具手动压缩图片使用Webpack工具在打包时自动压缩图片 这里主要介绍第二种方法。 &#xff08;1&#xff09;将小于某个大小的图片转化成 data URI 形式&#xff08;Base64 格式&#xff09;&#xff0c;减少请求数量&#xff0c;但是体积变得更大 modu…
阅读更多...
每日一换，美好随心——发现那些让屏幕焕发新彩的壁纸！

每日一换，美好随心——发现那些让屏幕焕发新彩的壁纸！

1、方小童在线工具集 网址&#xff1a; 方小童 该网站是一款在线工具集合的网站&#xff0c;目前包含PDF文件在线转换、随机生成美女图片、精美壁纸等功能&#xff0c;喜欢的可以赶紧去试试&#xff01;
阅读更多...
阿里云SSL证书DV型

阿里云SSL证书DV型

我们都在SSL证书厂家&#xff08;CA&#xff09;并不多&#xff0c;全球可以兼容性99%机构仅有3-4家&#xff0c;少的可怜&#xff0c;全球绝大部分都要去厂家授权提供商申请&#xff0c;这意味着很多也喜欢去阿里云买SSL证书也是这样的原因。 SSL证书无论在哪里购买肯定是DV类…
阅读更多...
ElasticSearch 学习笔记

ElasticSearch 学习笔记

基本概念 术语 文档&#xff08;document&#xff09;&#xff1a;每条记录就是一个文档&#xff0c;会以 JSON 格式进行存储 映射&#xff08;mapping&#xff09;&#xff1a;索引中文档字段的约束信息&#xff0c;类似 RDBMS 中的表结构约束&#xff08;schema&#xff09…
阅读更多...
【LIBS】交叉编译TCPDUMP

【LIBS】交叉编译TCPDUMP

目录 1. 安装编译工具2. 设置环境变量3. 编译libpcap3.1 安装依赖3.2 交叉编译 4. 编译TCPDUMP4.1 克隆仓库与生成构建环境4.2 静态链接LIBPCAP4.3 动态链接LIBPCAP4.4 构建与安装 5. 查看交叉编译结果5.1 文件布局 1. 安装编译工具 sudo apt-get install -y autoconf automak…
阅读更多...
[MRCTF2020]Ez_bypass1

[MRCTF2020]Ez_bypass1

代码审计&#xff0c;要求gg和id的MD5值相等而gg和id的值不等或类型不等 相同MD5值的不同字符串_md5相同的不同字符串-CSDN博客 不过这道题好像只能用数组 下一步是passwd不能是纯数字&#xff0c;但是下一个判断又要passwd等于1234567 这里通过passwd1234567a实现绕过 原…
阅读更多...
Differentiated Key-Value Storage Management for Balanced I/O Performance——论文泛读

Differentiated Key-Value Storage Management for Balanced I/O Performance——论文泛读

ATC 2021 Paper 论文阅读笔记整理 问题 现代键值&#xff08;KV&#xff09;存储采用LSM树作为管理KV对的核心数据结构&#xff0c;但存在较高的写放大和读放大问题。现有的LSM树优化通常需要做出设计权衡&#xff0c;并无法同时在写入、读取和扫描方面实现高性能。 现有方法…
阅读更多...
QT发生弹出警告窗口

QT发生弹出警告窗口

QTC开发程序弹出警告窗口&#xff0c;如上图 实施代码&#xff1a; #include <QMessageBox> int main() {// 在发生错误的地方QMessageBox::critical(nullptr, "错误", "发生了一个错误&#xff0c;请检查您的操作。");}上面的文字可以更改&#x…
阅读更多...
线性代数--------学习总结

线性代数--------学习总结

高斯消去法&#xff1a;对于任意的矩阵&#xff0c;总是能够利用倍加和行变换的方法变化成为阶梯形矩阵&#xff08;每一行第一个非零元叫做主元&#xff0c;他所在的列就叫做主列------每一行的主列都在他上方任意一行主列的右边&#xff09;和行简化阶梯矩阵&#xff08;主元…
阅读更多...
【Web前端实操17】导航栏效果——滑动门

【Web前端实操17】导航栏效果——滑动门

滑动门 定义： 类似于这种： 滑到导航栏的某一项就会出现相应的画面，里面有对应的画面出现。 箭头图标操作和引用： 像一些图标，如果需要的话，可以找字体图标，比如阿里巴巴矢量图标库：iconfont-阿里巴巴矢量图标库 选择一个——>添加至购物车——>下载代码 因…
阅读更多...
精通Python第13篇—数据之光：Pyecharts旭日图的魔法舞台

精通Python第13篇—数据之光：Pyecharts旭日图的魔法舞台

文章目录 引言准备工作绘制基本旭日图调整颜色和样式添加交互功能定制标签和标签格式嵌套层级数据高级样式与自定义进阶主题&#xff1a;动态旭日图数据源扩展&#xff1a;外部JSON文件总结 引言 数据可视化在现代编程中扮演着重要的角色&#xff0c;而Pyecharts是Python中一个…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023