ArcgisForJS基础

news/2024/7/19 14:57:18 标签: arcgis, js, 前端, 信息可视化

文章目录

  • 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.niftyadmin.cn/n/5378073.html

相关文章

学习Spring的第十八天

学习Spring的第十八天

注解方式配值声明式事务控制 直接上源码配置类 package com.itheima.config;import com.alibaba.druid.pool.DruidDataSource; import org.mybatis.spring.SqlSessionFactoryBean; import org.mybatis.spring.annotation.MapperScan; import org.springframework.beans.facto…
阅读更多...
数据按位置1置0，b卷

数据按位置1置0，b卷

int main(int argc, const char *argv[]) {int i0,j0;printf("请输入一个数字");scanf("%d",&i);ji|(1<<5);printf("%d\n",j);ji&(~1<<3);printf("%d\n",j);return 0; }一、选择题&#xff08;每题2分&#xff0c…
阅读更多...
【Effective Objective - C 2.0】——读书笔记（四）

【Effective Objective - C 2.0】——读书笔记（四）

文章目录 二十三、通过委托与数据源协议进行对象间通信二十四、将类的实现代码分散到便于管理的数个分类之中二十五、总是为第三方的分类名称加前缀二十六、切勿在分类里面声明属性二十七、使用“class-continuation分类”隐藏实现细节二十八、通过协议提供匿名对象 二十三、通…
阅读更多...
C++ 图上 bfs（五十八）【第五篇】

C++ 图上 bfs（五十八）【第五篇】

今天我们来学习一下图上bfs。 1.图上bfs 在图上&#xff0c;我们也可以进行 BFS&#xff0c;也可以解决图上 DFS 能解决的问题&#xff0c;比如连通块。 除此以外&#xff0c;根据 BFS 的性质&#xff0c;第一次到一个点的时候记下来的步数一定是到从起点到这个点的最小步数&…
阅读更多...
【高级C语言】从汇编代码看volatile关键字的作用

【高级C语言】从汇编代码看volatile关键字的作用

本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客内容主要围绕&#xff1a; 5G/6G协议讲解 算力网络讲解&#xff08;云计算&#xff0c;边缘计…
阅读更多...
Vue2源码梳理：update的整体实现流程

Vue2源码梳理：update的整体实现流程

update 回到之间 $mount时&#xff0c;mountComponent 函数的过程&#xff0c;vm._render 是如何创建了一个 VNode接下来就是要把这个 VNode 渲染成一个真实的 DOM 并渲染出来&#xff0c;这个过程是通过 vm._update 完成的_update 它是一个vue 的私有方法&#xff0c;它把我们…
阅读更多...
neo4j下载安装最新教程 2024.02

neo4j下载安装最新教程 2024.02

文章目录 neo4j简介neo4j与jdk版本对应neo4j历史版本 下载地址配置环境变量命令行启动验证安装结果 neo4j简介 Neo4j 是一个高性能的 NoSQL 图形数据库&#xff0c;它将结构化数据存储在网络&#xff08;从数学角度叫做图&#xff09;上而不是表中。Neo4j 也可以被看作是一个高…
阅读更多...
HGAME2024 WEEK2 wp webmisc

HGAME2024 WEEK2 wp webmisc

web What the cow say? 进入容器有个输入框&#xff0c;尝试ssti、命令执行、代码执行等&#xff0c;最后发现可使用反引号执行命令&#xff1b; 输入 nl app.py 可查看源代码&#xff0c;有功能具体实现、过滤之类的&#xff1b; flag在 /flag_is_here home/flag_c0w54y 中…
阅读更多...
最新文章

Copyright @ 2022~2023