封面

1. 下载 ArcGIS API for JavaScript

官网地址： https://developers.arcgis.com/javascript/3/

下载地址：http://links.esri.com/javascript-api/latest-download

需要稳定的网络环境注册账号后才可以下载，也可以关注微信公众号 RainCode 后台回复 arcgisapi 获取。

下载完成后解压文件，文件比较大可能需要很长时间进行解压。

解压后文件层级很多。

建议大家使用，arcgis_js_v332_api\arcgis_js_v332_api\arcgis_js_api\library\3.32 文件夹下3.32compact 压缩过的代码（代码是不开源的，直接用压缩的就完事了）。

2. 新建静态文件服务器

我自己使用 Express 自己写的一个静态文件服务器（因为要配置跨域，所以习惯了），大家也可以使用 IIS 、Tomcat 等服务器进行搭建。(Express静态文件服务器放在了 https://github.com/LuckRain7/arcgis-api-for-javascript-vue 仓库中的 static-server 文件中，大家可以去 clone 使用。)

将 3.32compact 文件夹拷贝到 静态文件夹 public 下，修改一个自己喜欢的名字，我这里修改为 arcgis-3.32

自建静态文件服务器地址为 http://localhost:3000/

2. 修改 [HOSTNAME_AND_PATH_TO_JSAPI] 路径

1、找到以下两个文件

static-server\public\arcgis-3.32\init.js

static-server\public\arcgis-3.32\dojo\dojo.js

2、用编辑器打开，搜索 [HOSTNAME_AND_PATH_TO_JSAPI]

3、将两个文件中的 baseUrl 内容都改为 http://localhost:3000/arcgis-3.32/dojo


baseUrl

3. 测试

复制一下代码到 HTML 文件中，将其中 link 和 script 标签地址修改为定义的地址，打开文件进行测试，出现地图则表示本地部署成功。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>test arcgis </title>

    <style>

        body,

        html {

            margin: 0;

            padding: 0;

            height: 100%;

            width: 100%;

        }

        #test {

            height: 100%;

            width: 100%;

        }

    </style>

    <link rel="stylesheet" href="http://localhost:3000/arcgis-3.32/esri/css/esri.css">

    <script src="http://localhost:3000/arcgis-3.32/init.js"></script>

</head>

<body>

    <div id="test">

    </div>

    <script>

        require(["esri/map"], function (Map) {

            var map = new Map("test", {

                center: [-118, 34.5],

                zoom: 8,

                basemap: "topo"

            });

        });

    </script>

</body>

</html>

推荐阅读

您的关注是莫大的鼓励

本文使用 mdnice

vue + ArcGIS 地图应用系列一：arcgis api本地部署(开发环境)的更多相关文章

  1. ArcGIS API for JavaScript开发环境搭建及第一个实例demo

    原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...

  2. ArcGIS JavaScript API本地部署离线开发环境[转]

    原文地址:http://www.cnblogs.com/brawei/archive/2012/12/28/2837660.html 1 获取ArcGIS JavaScript API API的下载地 ...

  3. ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现

    1.背景介绍 ArcGIS API for JavaScript 咱这就不介绍了,具体可看ESRI中国的介绍:http://support.esrichina.com.cn/2011/0223/960 ...

  4. ArcGIS 10.2 JavaScript API本地部署离线开发环境

    1 获取ArcGIS JavaScript API API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk ...

  5. Android 百度地图API(01)_开发环境 HelloBaiduMap

    转载于:http://blog.csdn.net/lmj623565791/article/details/37729091 转载于:http://blog.csdn.net/crazy1235/ar ...

  6. 我的Android 4 学习系列之开始入手：配置开发环境与理解Hello World！

    目录 如何安装Android SDK.创建开发环境和调试项目 移动设计中一些注意事项 使用Android虚拟设备.模拟器和其他开发工具 如何安装Android SDK.创建开发环境和调试项目 下载和安 ...

  7. 关于vue项目中axios跨域的解决方法（开发环境）

    1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...

  8. 【HDFS API编程】开发环境搭建

    使用HDFS API的方式来操作HDFS文件系统 IDEA Java 使用Maven来管理项目 先打开IDEA,New Project 创建GAV然后next 默认使用的有idea内置的Maven,可 ...

  9. Microsemi Libero系列教程（一）——Libero开发环境介绍、下载、安装与注册

    前言 相比与Xilinx和Altera在国内的市场,Microsemi的FPGA在国内应用很少很少,网上几乎没有详细的教程,刚开始使用时,遇到了各种问题,自己也走了不少弯路.本系列教程以Libero ...

随机推荐

  1. Java技巧之——判断相等

    变量值的判断是java中重要的一部分 通常我们判断两个值是否相等,使用的是两个等号 == 为了防止少写一个等号,造成无法挽回的失误,判断写为下面的格式 int a; 12==a; 原理是不能将任何东西 ...

  2. Git创建本地仓库&把pycharm项目添加GitHub仓库上

    一.创建本地仓库 1.1.下载Git地址:https://git-scm.com/downloads 下载完,一路next就可以 1.2.打开Git Bash输入: #创建一个learngit目录 $ ...

  3. STM32F103ZET6 GPIO的使用

    1.GPIO简介 STM32F103ZET6有多个GPIO组,如GPIOA.GPIOB.GPIOC...等等.每个GPIO组具有16个IO口. GPIO组的寄存器都是类似的,每个GPIO组都有2个32 ...

  4. Appium自动化（1） - 环境准备详细教程

    Appium需要用到的工具 链接:https://pan.baidu.com/s/1od9x-1l0ALGRT5T6QFDHWg 提取码:bnhq 安装Appium Pyhton client包 1. ...

  5. Docker学习之搭建nginx环境

    前言 很久没写随笔了,今天我们来学习一下如何在docker搭建nginx环境吧! 一:下载镜像,使用docker pull拉取最新的nginx镜像 命令:docker pull nginx 查看镜像: ...

  6. TCP协议的安全性分析

    有算法就有破解法,因为它们都遵循了一定的数据结构和数学知识.所以网络安全是一个相对的概念,不可能出现绝对的安全!作为当今最流行的网络协议--TCP也是如此.那么TCP的安全问题究竟是哪些因素引起的呢? ...

  7. Ubuntu 安装配置Dosbox

    1.安装dosbox sudo apt-get install dosbox 方法一: 2.挂载虚拟空间到dosbox的c盘 在linux终端输入dosbox,进入dosbox后输入 mount  c ...

  8. [ddt02篇]十年测试老鸟帮您解析：ddt结合txt，excel，csv，mysql实现自动化测试数据驱动

    一.前言: 阅读此文之前请先阅读: [ddt01篇]十年测试老鸟帮您解析:ddt数据驱动入门基础应用:https://www.cnblogs.com/csmashang/p/12679448.html ...

  9. Array（数组）对象-->slice() 方法

    1.定义和用法 slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分. 语法: array.slice(start, end) 参数:start 开始元素的下标,截取内容包含该元素 ...

  10. git如何清除远程 __pycahce__ 文件

    第一步,清除已经存在的缓存文件 >> git rm -r -f --cached */__pycache__ rm 'common/__pycache__/__init__.cpython ...