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

9765cb5a7963b28ede4576d437a515a4.png

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

3222ba0383133516d4d70ba16bca851d.png

3. 测试

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

<!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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/258787.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于几何距离的椭圆拟合

问题 给定离散点集Xi(xi,yi)X_i(x_i,y_i)Xi​(xi​,yi​)&#xff0c;我们希望找到最好的椭圆去拟合这些离散点。 方法 通常我们使用最小二乘法求解如下的最优化问题&#xff1a; Min∑i1Nf(xi,E)2Min \sum_{i1}^N f(x_i,E)^2 Mini1∑N​f(xi​,E)2 这里f(xi,E)f(x_i,E)f(xi…

Generate Parentheses

题目 Given n pairs of parentheses, write a function to generate all combinations of well-formed parentheses. For example, given n 3, a solution set is: "((()))", "(()())", "(())()", "()(())", "()()()" 方法…

ReportViewer 2010 打印预览,用鼠标快速切换显示比例时报错:存储空间不足,不能处理此命令...

CreateCompatibleDIB 存储空间不足 无法处理此命令 安装 ReportViewer 2010 sp1 即可。转载于:https://www.cnblogs.com/runliuv/p/3640856.html

贪心/二分查找 BestCoder Round #43 1002 pog loves szh II

题目传送门 1 /*2 贪心/二分查找&#xff1a;首先对ai%p&#xff0c;然后sort&#xff0c;这样的话就有序能使用二分查找。贪心的思想是每次找到一个aj使得和为p-1(如果有的话)3 当然有可能两个数和超过p&#xff0c;那么an的值最优&#xff0c;每次还要和…

nohup命令输出日志_逼格高又实用的Linux高级命令,开发运维都要懂

在运维的坑里摸爬滚打好几年了&#xff0c;我还记得我刚开始的时候&#xff0c;我只会使用一些简单的命令&#xff0c;写脚本的时候&#xff0c;也是要多简单有多简单&#xff0c;所以有时候写出来的脚本又长又臭&#xff0c;像一些高级点的命令&#xff0c;比如说Xargs 命令、…

JavaScript中OOP——面向对象中的继承/闭包

前 言 OOP JavaScript中OOP——>>>面向对象中的继承/闭包 1.1面向对象的概念 使用一个子类继承另一个父类&#xff0c;子类可以自动拥有父类的属性和方法。>>> 继承的两方&#xff0c;发生在两个类之间。1.2JS模拟实现继承的三种方式&#xff1a; 首先&am…

js常用字符串函数

这些东西是以前整理的&#xff0c;放到这里&#xff0c;有需要的可以看看~挺全的~ /** * anchor()方法 * 在对象中的指定文本两端放置一个有Name属性的HTML锚点 * strVariable.anchor(anchorString) anchorString为锚点名称 * 它本身不会检查其他的ahchor锚点是否有name指…

c++11中的智能指针

在C11中有四种智能指针&#xff0c;auto_ptr&#xff0c;shared-ptr&#xff0c;unique_ptr和weak-ptr&#xff0c;其中auto_ptr有许多不足之处&#xff0c;在C11中已经建议废弃使用。 1. shared_ptr std::shared_ptr智能指针可以通过共享指向对象的所有权&#xff0c;从而实现…

ubuntu14.04设置静态IP

啊&#xff0c;最近懒惰了&#xff0c;好久没有写博客了。 一般机器启动的时候会自动从DHCP服务器上面获取动态IP地址&#xff0c;这是一件很方便的事情&#xff0c;可以不用手动设置网络相关的蚕参数&#xff0c;但是有时候还是需要机器固定IP地址的。 第一步&#xff0c;编辑…

高中学历python培训靠谱吗_高中学历学完Python就能干人工智能?

最近Python大热&#xff0c;主要是人工智能的热度&#xff0c;昨天后院活动部介绍了一位女网友为男朋友选择Java还是Python&#xff0c;大量的程序员热议&#xff0c;也有人询问如何学习Python&#xff0c;比如这位网友询问高中学历学习Python是不是就能干人工智能。兄弟&#…

curl+个人证书(又叫客户端证书)访问https站点

目前&#xff0c;大公司的OA管理系统&#xff08;俗称内网&#xff09;&#xff0c;安全性要求较高&#xff0c;通常采用https的双向 认证模式。 首先&#xff0c;什么是https&#xff0c;简单的说就是在SSL协议之上实现的http协议&#xff08;get、post等操作&#xff09;。更…

boot.oat FC问题分析报告

【NE现场】 pid: 5252, tid: 5252, name: ndroid.contacts >>> com.android.contacts <<< signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x1458x0 0000000000000000 x1 0000000090d9892c x2 0000000000000001 x3 000000000000012cx4 …

c++ 虚函数的实现机制

转载自&#xff1a;http://blog.csdn.net/jiangnanyouzi/article/details/3720807 1、c实现多态的方法 其实很多人都知道&#xff0c;虚函数在c中的实现机制就是用虚表和虚指针&#xff0c;但是具体是怎样的呢&#xff1f;从more effecive c其中一篇文章里面可以知道&#xff…

powerdesigner 技巧

1.修改建表脚本生成规则。如果每个表格都有相同的字段&#xff0c;可以如下修改&#xff1a; Database -> Edit Current DBMS 展开 Script -> Object -> Table -> Create 见右下的Value值&#xff0c;可以直接修改如下&#xff1a;/* tablename: %TNAME% */ create…

勒索病毒攻击应急防范

北京时间5月12日&#xff0c;互联网上出现针对Windows操作系统的勒索软件&#xff08;Wannacry&#xff09;攻击案例。勒索软件利用此前披露的Windows SMB服务漏洞&#xff08;对应微软漏洞公告&#xff1a;MS17-010&#xff09;攻击手段&#xff0c;向终端用户进行渗透传播&am…

C++中虚析构函数的作用

C中的虚析构函数到底什么时候有用的&#xff0c;什么作用呢。 总的来说虚析构函数是为了避免内存泄露&#xff0c;而且是当子类中会有指针成员变量时才会使用得到的。也就说虚析构函数使得在删除指向子类对象的基类指针时可以调用子类的析构函数达到释放子类中堆内存的目的&…

苹果Swift编程语言入门教程【中文版】

http://www.25pp.com/news/news_60984.html转载于:https://www.cnblogs.com/niaowo/p/4564298.html

python正则表达式匹配aabb_Python正则表达式拆分多个匹配项

我正在尝试将包含2个不同字符的序列的字符串拆分为多个组.如果我们假设字符是a和b,则用于分组的纯文本规则为&#xff1a;>组包含0 a,后跟1 b>后面的所有a都包含在下一组中,除非我们在单词末尾.例如&#xff1a;处理测试后,目标是分成预期的组.tests [abab,ababab,aabab…

MEF 导入(Import)和导出(Export)

前言&#xff1a; MEF不同于其他IOC容器&#xff08;如&#xff1a;Castle&#xff09;很重要的原因在于它使用了特性化编程模型&#xff08;涉及到两个概念&#xff1a;“特性”和“编程模型”&#xff09;。 特性&#xff08;Attribute&#xff09;&#xff1a;举例来说就是我…

Android SimpleAdapter的参数

1.作用是ArrayList和 ListView的桥梁。这个ArrayList里边的每一项都是一个Map<String,?>类型。 ArrayList当中的每一项 Map对象都和ListView里边的每一项进行数据绑定一一对应。2.SimpleAdapter的构造函数&#xff1a;SimpleAdapter(Context context, List<? …