vue + ArcGIS 地图应用系列一：arcgis api本地部署(开发环境)
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
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本地部署(开发环境)的更多相关文章
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
- ArcGIS JavaScript API本地部署离线开发环境[转]
原文地址:http://www.cnblogs.com/brawei/archive/2012/12/28/2837660.html 1 获取ArcGIS JavaScript API API的下载地 ...
- ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现
1.背景介绍 ArcGIS API for JavaScript 咱这就不介绍了,具体可看ESRI中国的介绍:http://support.esrichina.com.cn/2011/0223/960 ...
- ArcGIS 10.2 JavaScript API本地部署离线开发环境
1 获取ArcGIS JavaScript API API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk ...
- Android 百度地图API(01)_开发环境 HelloBaiduMap
转载于:http://blog.csdn.net/lmj623565791/article/details/37729091 转载于:http://blog.csdn.net/crazy1235/ar ...
- 我的Android 4 学习系列之开始入手：配置开发环境与理解Hello World！
目录 如何安装Android SDK.创建开发环境和调试项目 移动设计中一些注意事项 使用Android虚拟设备.模拟器和其他开发工具 如何安装Android SDK.创建开发环境和调试项目 下载和安 ...
- 关于vue项目中axios跨域的解决方法（开发环境）
1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...
- 【HDFS API编程】开发环境搭建
使用HDFS API的方式来操作HDFS文件系统 IDEA Java 使用Maven来管理项目 先打开IDEA,New Project 创建GAV然后next 默认使用的有idea内置的Maven,可 ...
- Microsemi Libero系列教程（一）——Libero开发环境介绍、下载、安装与注册
前言 相比与Xilinx和Altera在国内的市场,Microsemi的FPGA在国内应用很少很少,网上几乎没有详细的教程,刚开始使用时,遇到了各种问题,自己也走了不少弯路.本系列教程以Libero ...
随机推荐
- 为什么我建议每个开发人员都需要学Python？
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://dzone.com/articles/10-reasons-why-every-d ...
- MySQL手工注入进阶篇——突破过滤危险字符问题
当我们在进行手工注入时,有时候会发现咱们构造的危险字符被过滤了,接下来,我就教大家如何解决这个问题.下面是我的实战过程.这里使用的是墨者学院的在线靶场.咱们直接开始. 第一步,判断注入点. 通过测试发 ...
- PTA数据结构与算法题目集(中文) 7-24
PTA数据结构与算法题目集(中文) 7-24 7-24 树种统计 (25 分) 随着卫星成像技术的应用,自然资源研究机构可以识别每一棵树的种类.请编写程序帮助研究人员统计每种树的数量,计算每种树 ...
- CAS单点登录系列之极速入门于实战教程(4.2.7)
@ 目录 一. SSO简介 1.1 单点登录定义 1.2 单点登录角色 1.3 单点登录分类 二. CAS简介 2.1 CAS简单定义 2.2 CAS体系结构 2.3 CAS原理 三.CAS服务端搭建 ...
- 用SQL*Plus命令启动和关闭数据库
用SQL*Plus命令启动和关闭数据库 1.启动方式 starup或startup open startup nomount startup mount startup read only [x] s ...
- 【PHP】PHP基本语法
一.什么是PHP? a) 定义:PHP就是超文本预处理器 b) 超文本:我们前边8天学习的内容其实就是超文本内容 c) 预处理器:相当于牛奶在工厂加工的过程,我们虽然不可见,但是我们 ...
- MySQL学习之路2-数据库and数据表的基本操作
数据库基本操作 查看.选择数据库: show databases; use <databasename>; 创建数据库:create database <dbname> cha ...
- Fiddler实战之使用Fiddler模拟弱网环境（限速）
1.模拟弱网环境 打开Fiddler,Rules->Performance->勾选 Simulate Modem Speeds,勾选之后访问网站会发现网络慢了很多 2.Fiddler弱网的 ...
- numpy basic sheatsheet
NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库.NumPy 通常与 SciPy(Scien ...
- 74HC595芯片的特性及使用方法和点评
一 它能干什么? 74HC595是一个8位串行输入.平行输出的位移缓存器:平行输出为三态输出.在SCK的上升沿,单行数据由SDL输人到内部的8位位移缓存器,并由Q7‘输出,而平行输出则是在LCK的 ...