ArcgisForJS基础

2024-02-16 23:28
文章标签 基础 arcgisforjs

本文主要是介绍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].

这篇关于ArcgisForJS基础的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/716003。

相关文章

从基础到高级详解Python数值格式化输出的完全指南

从基础到高级详解Python数值格式化输出的完全指南

《从基础到高级详解Python数值格式化输出的完全指南》在数据分析、金融计算和科学报告领域,数值格式化是提升可读性和专业性的关键技术,本文将深入解析Python中数值格式化输出的相关方法,感兴趣的小伙... 目录引言：数值格式化的核心价值一、基础格式化方法1.1 三种核心格式化方式对比1.2 基础格式化示例
阅读更多...
redis-sentinel基础概念及部署流程

redis-sentinel基础概念及部署流程

《redis-sentinel基础概念及部署流程》RedisSentinel是Redis的高可用解决方案,通过监控主从节点、自动故障转移、通知机制及配置提供,实现集群故障恢复与服务持续可用,核心组件包... 目录一. 引言二. 核心功能三. 核心组件四. 故障转移流程五. 服务部署六. sentinel部署
阅读更多...
从基础到进阶详解Python条件判断的实用指南

从基础到进阶详解Python条件判断的实用指南

《从基础到进阶详解Python条件判断的实用指南》本文将通过15个实战案例,带你大家掌握条件判断的核心技巧,并从基础语法到高级应用一网打尽,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录​引言：条件判断为何如此重要一、基础语法：三行代码构建决策系统二、多条件分支：elif的魔法三、
阅读更多...
Python WebSockets 库从基础到实战使用举例

Python WebSockets 库从基础到实战使用举例

《PythonWebSockets库从基础到实战使用举例》WebSocket是一种全双工、持久化的网络通信协议,适用于需要低延迟的应用,如实时聊天、股票行情推送、在线协作、多人游戏等,本文给大家介... 目录1. 引言2. 为什么使用 WebSocket？3. 安装 WebSockets 库4. 使用 We
阅读更多...
从基础到高阶详解Python多态实战应用指南

从基础到高阶详解Python多态实战应用指南

《从基础到高阶详解Python多态实战应用指南》这篇文章主要从基础到高阶为大家详细介绍Python中多态的相关应用与技巧,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、多态的本质：python的“鸭子类型”哲学二、多态的三大实战场景场景1：数据处理管道——统一处理不同数据格式
阅读更多...
MySQL数据类型与表操作全指南( 从基础到高级实践)

MySQL数据类型与表操作全指南( 从基础到高级实践)

《MySQL数据类型与表操作全指南(从基础到高级实践)》本文详解MySQL数据类型分类（数值、日期/时间、字符串）及表操作（创建、修改、维护）,涵盖优化技巧如数据类型选择、备份、分区,强调规范设计与... 目录mysql数据类型详解数值类型日期时间类型字符串类型表操作全解析创建表修改表结构添加列修改列删除列
阅读更多...
Python 函数详解:从基础语法到高级使用技巧

Python 函数详解:从基础语法到高级使用技巧

《Python函数详解:从基础语法到高级使用技巧》本文基于实例代码,全面讲解Python函数的定义、参数传递、变量作用域及类型标注等知识点,帮助初学者快速掌握函数的使用技巧,感兴趣的朋友跟随小编一起... 目录一、函数的基本概念与作用二、函数的定义与调用1. 无参函数2. 带参函数3. 带返回值的函数4.
阅读更多...
python panda库从基础到高级操作分析

python panda库从基础到高级操作分析

《pythonpanda库从基础到高级操作分析》本文介绍了Pandas库的核心功能,包括处理结构化数据的Series和DataFrame数据结构,数据读取、清洗、分组聚合、合并、时间序列分析及大数据... 目录1. Pandas 概述2. 基本操作：数据读取与查看3. 索引操作：精准定位数据4. Group
阅读更多...
从基础到进阶详解Pandas时间数据处理指南

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据
阅读更多...
安装centos8设置基础软件仓库时出错的解决方案

安装centos8设置基础软件仓库时出错的解决方案

《安装centos8设置基础软件仓库时出错的解决方案》：本文主要介绍安装centos8设置基础软件仓库时出错的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录安装Centos8设置基础软件仓库时出错版本 8版本 8.2.200android4版本 javas
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2