ArcGIS API for JavaScript超强部署方案

简介: 配置ArcGIS API for JavaScript,帮助入门的GISer跨过第一道门槛,同时也作为对工作的梳理、记录。

很多GISer或者非GISer,在要学GIS界最强大的ArcGIS API for JavaScript的时候是不是被API的配置给搞懵了,是不是被SSL证书或者HTTPS搞瞎了,是不是有种,我还没入门,就让我先解决这些和GIS没关系的问题?还有什么FQDN(Fully qualified domain name:完全限定域名).......你心累,不巧!今天我师弟就问我4.X的API部署不了,要什么SSL证书。嗯,我也其实挺心累的。作为混了好几年的GISer,感觉有必要写一份入门级部署API的博客了。

下载API

官方地址: http://links.esri.com/javascript-api/latest-downloadhttps://developers.arcgis.com/downloads/apis-and-sdks?product=javascript , 当然你得有个Esri的开发者账号,如果没有,那就申请一个,切记跟着邮件内容走,否则会走错路。登录之后是如下页面:
image

相信你已经看到了要看到的,点击蓝色API按钮,默默等待浏览器下载完毕。当然你如果需要把SDK也部署到本地,就点击Document,下载。

配置

  1. 将下载的ZIP包解压到我的项目WMS1/gis中,打开解压后的文件,双击index.html,选择你要部署的平台,可以随便选择一个, 我选择了ArcGIS API for JavaScript; 在这需要说明, 我要部署的是和平台无关的,只是和你的Web访问目录有关的超强配置. Write once, run in any Web container!
    image
  2. 打开后直接定位到Modify the Build (manually)节点;别的都不用看。 如下显示:
    image
  3. 移动文件;将/library/4.6/下的所有文件拷贝到arcgis_js_api文件下,并将library文件夹删除。效果如下:
    image
  4. 根据提示,用Notepad++打开加压包目录下的[api package] /arcgis_js_api/dojo/dojo.js;查找提示的文字 [HOSTNAME_AND_PATH_TO_JSAPI];搜索到之后将baseUrl中的值宣布 选中,用 /WMS1/gis/arcgis_js_api/dojo"替换;效果如下:
    image
  5. 对[api package]/arcgis_js_api/init.js进行同样的操作,效果如下:
    c74cb97e83d90165eb2373fbd3ab1c95b2272d66
  6. 测试部署是否成功;拷贝如下代码到WMS1/gis/index.html中

    <!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>Test Map</title>
      <link rel="stylesheet" href="/WMS1/gis/arcgis_js_api/dijit/themes/cl aro/clarocss" />
      <link rel="stylesheet" href="/WMS1/gis/arcgis_js_api/esri/css/main.  css" />
      <style>
      html,
      body,
      #viewDiv {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      }
    </style>
    <script src="/WMS1/gis/arcgis_js_api/dojo/dojo.js"></script>
    <script>
    var myMap, view;
    require([
    "esri/Map",
    "esri/views/MapView",
    "dojo/domReady!"
    ], function (Map, MapView) {
    myMap = new Map({
    basemap: 'osm'
    });
    view = new MapView({
    center: [-111.87, 40.57], // long, lat
    container: "viewDiv",
    map: myMap,
    zoom: 6
    });
    });
    </script>
    </head>
    <body class="claro">
    <div id="viewDiv"></div>
    </body>
    </html>
  7. 神奇的事情有木有发生?我是发生了。
    image
  8. 到此我们的环境就配置好了,你的小宇宙该爆发了。

总结

ArcGIS JS API的配置只是和你项目启动的Web容器的路径有关系,和HTTPS还是HTTP、SSL并没有太大关系,如果要将API部署在远程机器上,那一般情况就是需要了解HTTPS、HTTP、FQDN等等了,这也是官方推荐的方法;使用上面这种配置的好处是,我的项目跟协议、主机名还有端口没有任何关系,只是和启动的Web容器的相对目录有关了。这在Node的http-server或者Webpack-devServer等作为Web启动容器的时候,你想在Linux还是Unix上运行都木问题的,而且目录位置随便放。只能帮你到这了。

目录
相关文章
|
29天前
|
缓存 JavaScript 前端开发
深入浅出:使用Node.js构建RESTful API
【9月更文挑战第3天】在数字化浪潮中,后端开发如同搭建一座连接用户与数据的桥梁。本文将带领读者从零开始,一步步用Node.js搭建一个功能完备的RESTful API。我们将探索如何设计API的结构、处理HTTP请求以及实现数据的CRUD操作,最终通过一个简单的实例,展示如何在真实世界中应用这些知识。无论你是初学者还是有一定经验的开发者,这篇文章都会为你揭示后端开发的奥秘,让你轻松入门并掌握这一技能。
67 3
|
6天前
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
|
15天前
|
JavaScript 前端开发 API
JavaScript 验证 API
JavaScript 验证 API
18 2
|
2月前
|
JavaScript NoSQL API
深入浅出:使用Node.js构建RESTful API
【8月更文挑战第31天】本文将引导读者了解如何利用Node.js搭建一个高效、易于扩展的RESTful API。通过简单易懂的语言和逐步深入的内容组织,我们将一起探索Node.js在后端开发中的实际应用,包括环境配置、路由设计、数据处理与连接数据库等关键步骤。文章末尾,你将获得完整的项目代码示例,助你快速启动自己的API项目。
|
2月前
|
JavaScript 前端开发 API
深入浅出:使用Node.js搭建RESTful API的实践之旅
【8月更文挑战第31天】本文将带你踏上一次Node.js的探险之旅,通过实际动手构建一个RESTful API,我们将探索Node.js的强大功能和灵活性。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供宝贵的实践经验和深刻的技术洞见。
|
2月前
|
JavaScript 前端开发 中间件
深入浅出Node.js:从零开始构建RESTful API
【8月更文挑战第24天】在数字化时代的浪潮中,后端开发作为支撑现代网络服务的骨架,扮演着至关重要的角色。本文将通过Node.js这一高效灵活的JavaScript运行环境,引领你步入后端开发的神秘世界。我们将从基础概念出发,逐步深入到实战操作,最终构建一个功能完备的RESTful API。无论你是编程新手还是前端开发者,这篇文章都将为你揭示后端开发的奥秘,让你轻松掌握使用Node.js进行API开发的实用技巧。
|
2月前
|
存储 JavaScript API
Node.js中的异步API
【8月更文挑战第16天】
29 1
|
1月前
|
JSON JavaScript 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第34天】 在数字时代的浪潮中,掌握如何构建高效、可靠的后端服务是每一位开发者的必备技能。本文将通过浅显易懂的语言和实际代码示例,带领初学者走进Node.js的世界,一步步搭建起自己的RESTful API。无论你是编程新手,还是想扩展技术栈的老手,这篇文章都将是你的良师益友。让我们一起探索Node.js的魅力,开启后端开发之旅!
|
2月前
|
JSON JavaScript 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第31天】 在数字时代的浪潮中,掌握如何构建高效、可靠的后端服务是每一位开发者的必备技能。本文将通过浅显易懂的语言和实际代码示例,带领初学者走进Node.js的世界,一步步搭建起自己的RESTful API。无论你是编程新手,还是想扩展技术栈的老手,这篇文章都将是你的良师益友。让我们一起探索Node.js的魅力,开启后端开发之旅!
|
2月前
|
JavaScript 前端开发 API
深入浅出:使用Node.js打造简易Web API
【8月更文挑战第31天】本文旨在通过一个简单实例,引导读者快速入门Node.js并创建自己的Web API。我们将从零开始,一步步搭建起服务端应用,涉及环境搭建、基本语法、路由处理等关键知识点,最后以代码实例加深理解。无论你是前端开发者还是后端新手,这篇文章都能让你轻松上手,体验后端开发的乐趣。
下一篇
无影云桌面