js打开本地文件夹_vue + ArcGIS 地图应用系列一：arcgis api本地部署(开发环境)

2024-06-01 17:19:24

1. 下载 ArcGIS API for JavaScript

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

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

需要稳定的网络环境注册账号后才可以下载

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

解压后文件层级很多。

建议大家使用，arcgis_js_v332_apiarcgis_js_v332_apiarcgis_js_apilibrary3.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-serverpublicarcgis-3.32init.js

static-serverpublicarcgis-3.32dojodojo.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>

推荐阅读

如何在 Array.forEach 中正确使用 async
如何在 Array.filter 中正确使用 async
如何在 Array.reduce 中正确使用 async
如何在 Array.map 中正确使用 async
如何在 Array.some 中正确使用 async

js打开本地文件夹_vue + ArcGIS 地图应用系列一：arcgis api本地部署(开发环境)相关推荐

在chrome网页上通过点击链接或执行js打开本地文件夹
用来能在网页上方便的打开常用文件夹或文件. 方法: 下面文件放到c:/tools/位置: 执行mycall.reg添加注册信息: 试试在chrome里点击<a href="mycall ...
服务器怎么打开本地电脑文件夹,如何在云服务器上打开本地文件夹
如何在云服务器上打开本地文件夹内容精选换一换 Tomcat是一个被广泛使用的Java Web应用服务器.本文介绍了在华为云弹性云服务器上部署Java Web环境的操作步骤.首先需要下载部署Java ...
java+js实现展示本地文件夹下的所有图片demo[申明：来源于网络]
java+js实现展示本地文件夹下的所有图片demo[申明:来源于网络] 地址:http://blog.csdn.net/allgis/article/details/46364875 转载于:htt ...
Unity打开电脑本地文件夹选择图片替换
Unity打开电脑本地文件夹选择图片替换创建工程添加对应的UI如图所示创建ChangeImage脚本来监听按钮事件创建OpenFileName脚本将代码挂在到窗口,点击运行创建工程添加对应的 ...
java+js实现展示本地文件夹下的所有图片demo
java+js实现展示本地文件夹下的所有图片demo 最近项目遇到需要实现前端通过一个按钮点击事件,弹窗浏览本地文件夹下的所有图片: 思路: - 获取到所需展示图片的本地文件夹内所有图片的文件绝对 ...
java web打开文件_Java web 如何打开本地文件夹？
使用情景有一个只在一台 Windows7 上使用的 Java web 项目,浏览器是 Chrome.它需要点击一个链接可以打开指定的本地文件夹,目录会有中文. 服务器环境 Jdk1.7.Tomcat ...
点击按钮后打开本地文件夹
实现点击后,打开本地电脑文件夹. 在NW项目中可以,但在web项目中不行,web项目中没有调用node的环境. 点击的事件回调 openFolder() {let path = this.localI ...
JS 遍历本地文件夹中的内容
// 遍历本地文件夹内文件名 var FF = new Folder("C:/Users/Administrator/Desktop/AE脚本");folder_recursive ...
服务器怎么打开数据库文件夹,服务器怎么打开数据库文件夹下
服务器怎么打开数据库文件夹下内容精选换一换 GaussDB(for MySQL)全兼容MySQL协议,因此,连接GaussDB(for MySQL)实例目前有两种方式:普通连接和SSL连接.其中, ...

最新文章

热门文章