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;用户通过这个界面访问操作系统内…
阅读更多...
【学网攻】 第(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;这些内容也会自动被销毁。栈区按内存…
阅读更多...
前端秘法进阶篇之事件循环

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

目录 一.浏览器的进程模型 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开发&…
阅读更多...
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;才发现大家的模型或者叫法还是…
阅读更多...
数据卷的常见命令，如何创建Nginx容器，修改nginx容器内的html目录下的index.html文件

数据卷的常见命令，如何创建Nginx容器，修改nginx容器内的html目录下的index.html文件

数据卷 什么是数据卷 数据卷&#xff08;volume&#xff09;是一个虚拟目录&#xff0c;是容器内目录与宿主机**目录**之间映射的桥梁。 以Nginx为例&#xff0c;我们知道Nginx中有两个关键的目录&#xff1a; html&#xff1a;放置一些静态资源 conf&#xff1a;放置配置文…
阅读更多...
文心一言4.0 VS ChatGPT4.0哪家强？！每月60块的文心一言4.0值得开吗？

文心一言4.0 VS ChatGPT4.0哪家强？！每月60块的文心一言4.0值得开吗？

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…
阅读更多...
AI短视频一键换脸小程序源码/带流量主

AI短视频一键换脸小程序源码/带流量主

微信云开发AI一键视频换脸小程序源码是由极客二改后发布的&#xff0c;小程序增加了广告控制&#xff0c;插屏广告&#xff0c;激励广告和原生广告&#xff0c;由于采用了微信云开发没有后台&#xff0c;所以不需要域名和服务器也可以正常搭建使用&#xff0c;所有的配置都可以…
阅读更多...
C++，stl，函数对象，谓词，内建函数对象

C++，stl，函数对象，谓词，内建函数对象

目录 1.函数对象使用 2.谓词 1.一元谓词 2.二元谓词 3.内建函数对象 1.算术仿函数 2.关系仿函数 3.逻辑仿函数 1.函数对象使用 #include<bits/stdc.h> using namespace std;class add { public:int operator()(int v1,int v2){return v1 v2;} };class print { p…
阅读更多...
从C向C++8——多态

从C向C++8——多态

一.多态基础 面向对象程序设计语言有封装、继承和多态三种机制&#xff0c;这三种机制能够有效提高程序的可读性、可扩充性和可重用性。 “多态&#xff08;polymorphism&#xff09;”指的是同一名字的事物可以完成不同的功能。多态可以分为编译时的多态和运行时的多态。前者主…
阅读更多...
Unity（单元测试）在STM32上的移植与应用

Unity（单元测试）在STM32上的移植与应用

概述 Unity Test是一个为C构建的单元测试框架。本文基于STM32F407为基础&#xff0c;完全使用STM32CubeIDE进行开发&#xff0c;移植和简单使用Unity。 单片机型号&#xff1a;STM32F407VET6 软件&#xff1a;STM32CubeIDE Version: 1.14.1 Unity Version&#xff1a;2.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023