ArcgisForJS基础

文章目录

  • 0.引言
  • 1.第一个ArcgisForJS应用程序
    • 1.1.安装部署ArcgisForJS
    • 1.2.实现ArcgisForJS应用程序
  • 2.开发与调试工具
    • 2.1.集成开发环境
    • 2.2.调试工具
    • 2.3.Firebug

0.引言

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

1.第一个ArcgisForJS应用程序

1.1.安装部署ArcgisForJS

官网下载： https://developers.arcgis.com/downloads/
官网需注册登录ArcGIS Online账户。
  在这里插入图片描述
下载api文件，并解压，解压目录如下：
  在这里插入图片描述
根据install.html文件进行安装配置。
  在这里插入图片描述
新建一个网站专用文件夹。
  在这里插入图片描述
将以下arcgis_js_api复制到上面专用文件夹。
  在这里插入图片描述
复制结果如下：
  在这里插入图片描述

本文以本地IIS发布服务。
IIS设置参见：最详细的IIS发布站点步骤
  在这里插入图片描述
打开MIME类型页面，并按照需求设置扩展。
  在这里插入图片描述
点击目录浏览，打开并应用。
  在这里插入图片描述
应用结果如下：
  在这里插入图片描述
点击浏览，访问本地发布网站。
  在这里插入图片描述
访问结果：
  在这里插入图片描述
打开arcgis_js_api继续访问（默认访问index.html），可得到以下结果，mimetype显示OK则配置成功。
  在这里插入图片描述

1.2.实现ArcgisForJS应用程序

在http://localhost:8099/arcgis_js_api/javascript/4.28文件夹（位于本地网站专用文件夹D:\ArcgisForJS\arcgis_js_api\javascript\4.28）下新建一个HelloArcgisForJS.html，并编写代码。
（1）实现代码

<html lang="en"><head>  <meta charset="utf-8" />  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />  <title>HelloArcgisForJS</title>  <style>  html,  body,  #viewDiv {  padding: 0;  margin: 0;  height: 100%;  width: 100%;  }  </style>  <link rel="stylesheet" href="./esri/themes/light/main.css" />  <script src="./init.js"></script>  <script>  require(["esri/Basemap", "esri/layers/TileLayer", "esri/Map", "esri/views/SceneView"], function (  Basemap,  TileLayer,  Map,  SceneView  ) {  // --------------------------------------------------------------------  // If you do not have public internet access, change the layer URL to  // point to your own locally accessible cached service.  // --------------------------------------------------------------------  const layer = new TileLayer({  url:"https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"  });  const customBasemap = new Basemap({  baseLayers: [layer],  title: "My Basemap"  });  const myMap = new Map({  basemap: customBasemap  });  const view = new SceneView({  container: "viewDiv",  map: myMap  });  });  </script>  
</head>  <body>  <div id="viewDiv"></div>  
</body>  </html>

（2）实现结果
  在这里插入图片描述
访问：
  在这里插入图片描述

2.开发与调试工具

2.1.集成开发环境

使用Visual Studio，本文应用2022版本。
新建web项目。
  在这里插入图片描述
创建空模板。
  在这里插入图片描述
添加一个html页。
  在这里插入图片描述
复制代码。

<html lang="en"><head>  <meta charset="utf-8" />  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />  <title>HelloArcgisForJS</title>  <style>  html,  body,  #viewDiv {  padding: 0;  margin: 0;  height: 100%;  width: 100%;  }  </style>  <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>  <script>  require(["esri/Basemap", "esri/layers/TileLayer", "esri/Map", "esri/views/SceneView"], function (  Basemap,  TileLayer,  Map,  SceneView  ) {  // --------------------------------------------------------------------  // If you do not have public internet access, change the layer URL to  // point to your own locally accessible cached service.  // --------------------------------------------------------------------  const layer = new TileLayer({  url:"https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"  });  const customBasemap = new Basemap({  baseLayers: [layer],  title: "My Basemap"  });  const myMap = new Map({  basemap: customBasemap  });  const view = new SceneView({  container: "viewDiv",  map: myMap  });  });  </script>  
</head>  <body>  <div id="viewDiv"></div>  
</body>  </html>

代码结果。
  在这里插入图片描述
设置http://localhost:8099/（对应物理地址D:\ArcgisForJS）支持跨域访问，编辑web.config。
  在这里插入图片描述

<httpProtocol><customHeaders>  <add name="Access-Control-Allow-Origin" value="*" />  <add name="Access-Control-Allow-Headers" value="*" />  <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />  </customHeaders>  </httpProtocol>

运行结果如下。
  在这里插入图片描述

2.2.调试工具

IE开发者工具或工具条。
网页F12可打开开发者工具。
  在这里插入图片描述

2.3.Firebug

（1）安装Firebug
网页扩展中心搜索：Firebug，并进行安装。
  在这里插入图片描述

（2）启用Firebug
  在这里插入图片描述

参考资料：
[1] 刘光. 《Web GIS从基础到开发实践：基于ArcGIS API for JavaScript》; 2015-03-01 [accessed 2024-02-15].
[1] 一入GIS深似海. 不一样的前端，JavaScript之arcgis api教程; 2020-11-02 [accessed 2024-02-15].
[2] . arcgis api for JS如何快速上手？; [accessed 2024-02-15].
[3] . ArcGIS API for JavaScript (legacy) 3.45; [accessed 2024-02-15].
[4] GISer.Wang. （一）ArcGIS API For Javascript开发利器; 2016-08-08 [accessed 2024-02-15].
[5] GIS之家. arcgis api for js入门开发系列一arcgis api离线部署; 2016-10-26 [accessed 2024-02-15].
[6] 佯佯Young. 【一】ArcGIS API for JavaScript之API的使用和部署; 2017-12-23 [accessed 2024-02-15].
[7] dxm809. WebForm-IIS Express 启用目录浏览; 2017-10-17 [accessed 2024-02-15].
[8] coder_路远. chrome谷歌浏览器和firefox火狐浏览器解决跨域问题; 2017-11-22 [accessed 2024-02-15].

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

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

相关文章

UI文件原理

UI文件原理

使用UI文件创建界面很轻松很便捷&#xff0c;他的原理就是每次我们保存UI文件的时候&#xff0c;QtCreator就自动帮我们将UI文件翻译成C的图形界面创建代码。可以通过以下步骤查看代码 到工程编译目录&#xff0c;一般就是工程同级目录下会生成另一个编译目录&#xff0c;会找到…
阅读更多...
Stable Diffusion主流UI详细介绍

Stable Diffusion主流UI详细介绍

Stable Diffusion目前主流的操作界面有WebUI、ComfyUI以及Fooocus 这里webui和fooocus在人机交互上的逻辑是一样的&#xff0c;fooocus界面更加简洁。 comfyui是在人机交互上是采用流程节点的交互逻辑&#xff0c;和上面略有区别。 界面分别如下&#xff1a; WebUI界面如下 we…
阅读更多...
Spring 用法学习总结（二）之基于注解注入属性

Spring 用法学习总结（二）之基于注解注入属性

Spring学习 5 基于注解方式创建对象6 基于注解注入属性 5 基于注解方式创建对象 注解是代码的特殊标记&#xff0c;可以简化xml配置&#xff0c;格式&#xff1a;注解名称(属性名称属性值&#xff09;&#xff0c;可以作用在类、方法、属性上 以下注解都可以创建bean实例 Com…
阅读更多...
LeetCode 每日一题 Day 62 - 75

LeetCode 每日一题 Day 62 - 75

1686. 石子游戏 VI Alice 和 Bob 轮流玩一个游戏&#xff0c;Alice 先手。 一堆石子里总共有 n 个石子&#xff0c;轮到某个玩家时&#xff0c;他可以 移出 一个石子并得到这个石子的价值。Alice 和 Bob 对石子价值有 不一样的的评判标准 。双方都知道对方的评判标准。 给你…
阅读更多...
提前部署游戏业务防护，为何如此重要？

提前部署游戏业务防护，为何如此重要？

现在做网络游戏的企业都知道服务器的安全对于我们来说很重要&#xff01;互联网上面的DDoS攻击和CC攻击等等无处不在&#xff0c;而游戏服务器对服务器的防御能力和处理能力要求更高&#xff0c;普通的服务器则是比较注重各方面能力的均衡。 随着游戏行业的壮大&#xff0c;网络…
阅读更多...
Shell 学习笔记（一）-Shell脚本编程简介

Shell 学习笔记（一）-Shell脚本编程简介

一 什么是shell&#xff1f; shell是一个用 C 语言编写的程序&#xff0c;它是用户使用 Linux 的桥梁。Shell 既是一种命令语言&#xff0c;又是一种程序设计语言。 Shell 是指一种应用程序&#xff0c;这个应用程序提供了一个界面&#xff0c;用户通过这个界面访问操作系统内…
阅读更多...
算法训练营day25(补)，回溯5

算法训练营day25(补)，回溯5

package main import "sort" 491. 非递减子序列 func findSubsequences(nums []int) [][]int { //存储全部集合 result : make([][]int, 0) if len(nums) 0 { return result } //存储单次集合 path : make([]int, 0) var backtrace func(numList []int, startIndex…
阅读更多...
【学网攻】 第(28)节 -- OSPF虚链路

【学网攻】 第(28)节 -- OSPF虚链路

系列文章目录 目录 系列文章目录 文章目录 前言 一、什么是OSPF虚链路&#xff1f; 二、实验 1.引入 实验目标 实验背景 技术原理 实验步骤 实验设备 实验拓扑图 实验配置 扩展 实验拓扑图 实验配置 实验验证 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻…
阅读更多...
winprop二次开发

winprop二次开发

winprop二次开发 前言工具1——整合多个天线结果用途代码实现 工具2——wallman辅助工具需求代码实现 前言 工作需求&#xff0c;对该软件进行简单地二次开发&#xff0c;都是一些挺简单的代码&#xff0c;单纯是为了上传之后将其从本地删除 工具1——整合多个天线结果 用途…
阅读更多...
鲁南制药“健康幸福中国年”主题航班，开启探寻健康与幸福的旅程

鲁南制药“健康幸福中国年”主题航班，开启探寻健康与幸福的旅程

“小年&#xff0c;小年&#xff0c;过了今天就是年。”提到过年&#xff0c;北方人的“过年”是从腊月二十三的“小年”开始的&#xff0c;而南方地区是在明天。虽然时间不同&#xff0c;但是浓浓的年味是一样的&#xff0c;红彤彤是主色调&#xff0c;喜洋洋是主乐曲&#xf…
阅读更多...
C语言：内存分配---栈区、堆区、全局区、常量区和代码区

C语言：内存分配---栈区、堆区、全局区、常量区和代码区

一、C语言内存分区 C语言内存分区示意图如下&#xff1a; 1. 栈区 栈区介绍 栈区由编译器自动分配释放&#xff0c;由操作系统自动管理&#xff0c;无须手动管理。栈区上的内容只在函数范围内存在&#xff0c;当函数运行结束&#xff0c;这些内容也会自动被销毁。栈区按内存…
阅读更多...
Pandas Dataframe 的学习笔记

Pandas Dataframe 的学习笔记

Pandas Dataframe 的学习笔记 0. Pandas 简介1. 为什么要用 Pandas&#xff1f;2. Series3. DataFrame3-1. 创建 DataFrame3-2. 选择数据3-3. 数据过滤3-4. 修改 DataFrame3-5. 数据清洗3-6. 数据合并3-7. info()3-8. head()3-9. tail()3-10. fillna() 0. Pandas 简介 想象一下…
阅读更多...
C# 随机打乱数组

C# 随机打乱数组

Fisher-Yates 洗牌算法是一种高效地将有限序列的元素进行随机洗牌的算法。这个算法在本地进行&#xff0c;不需要额外的内存开销。其基本思想是从最后一个元素开始&#xff0c;每次从未被选中的元素中随机选择一个与当前位置的元素交换&#xff0c;直到到达序列的开始。 这个算…
阅读更多...
数据分析 — Pandas 数据处理

数据分析 — Pandas 数据处理

目录 一、简介1、概念2、特点3、引用 二、数据结构1、Series2、DataFrame 三、常见操作1、数据合并2、数据删除3、创建多层索引4、数据对齐5、排序6、DataFrame 和 Series 之间的运算 四、应用 一、简介 1、概念 Pandas&#xff08;Python Data Analysis Library&#xff09;…
阅读更多...
前端秘法进阶篇之事件循环

前端秘法进阶篇之事件循环

目录 一.浏览器的进程模型 1.进程 2.线程 二.浏览器的进程和线程 1. 浏览器进程 2. 网络进程 3. 渲染进程 三.渲染主线程 四.异步 五.优先级 1. 延时队列&#xff1a; 2.交互队列&#xff1a; 3.微队列&#xff1a; 六.JS 的事件循环 附加:JS 中的计时器能做到精…
阅读更多...
java 宠物在线商城系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

java 宠物在线商城系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

一、源码特点 java 宠物在线商城系统是一套完善的java web信息管理系统 servletdaobean mvc模式&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S 模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&…
阅读更多...
性能测试监控指标及分析调优

性能测试监控指标及分析调优

目录 一、哪些因素会成为系统的瓶颈&#xff1f; 1.1 CPU 1.2 内存 1.3 磁盘 I/O 1.4 网络 1.5 数据库 二、哪些指标做为衡量系统的性能 2.1 TPS 吞吐量 2.1.1 磁盘吞吐量 2.1.2 网络吞吐量 2.2 资源使用率 2.2.1 CPU 使用率 2.2.2 内存使用率 2.2.3 磁盘 I/O …
阅读更多...
10.什么是 JavaScript 中的包装类型

10.什么是 JavaScript 中的包装类型

在 JavaScript 中&#xff0c;基本类型是没有属性和方法的&#xff0c;但是为了便于操作基本类型的值&#xff0c;在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象&#xff0c;如&#xff1a; const a "abc"; a.length; // 3 a.t…
阅读更多...
open ai api 国内配置代理指南（网上最全）

open ai api 国内配置代理指南（网上最全）

1.配置须知 open ai 作为这一波AI浪潮的推动者&#xff0c;opne ai的gpt 系列产品在使用和体验上绝对是最强大的&#xff0c;现在对于开发者来说要在代码中访问open ai api是不可用的。所以本文就主要解决这个问题。我们要了解open ai 的网站gpt的访问和api的访问收费是分开来…
阅读更多...
配置Juniper虚墙vSRX基于策略的IPsec VPN（WEB方式）

配置Juniper虚墙vSRX基于策略的IPsec VPN（WEB方式）

正文共&#xff1a;1444 字 18 图&#xff0c;预估阅读时间&#xff1a;2 分钟 关于IPsec VPN&#xff0c;我们已经有一个合集了&#xff08;IPsec VPN&#xff09;。之前接触比较多的是H3C的IPsec VPN&#xff0c;后来接触的厂家多了&#xff0c;才发现大家的模型或者叫法还是…
阅读更多...
最新文章

Copyright @ 2022~2023