本地部署Arcgis API for Javascript
本地部署Arcgis API for Javascript
1.获得JS API
Arcgis API for Javascript 或其他Arcgis开发相关API都可以在esri developer官网下载。网站链接:
https://developers.arcgis.com/downloads/
未登录的会提示登录,根据步骤注册一个Arcgis Online账号登录即可。
下拉框中选择Arcgis API for Javascript,出现所有版本,选择一个版本下载。
右边API指下载API,Documentation指下载说明文档。
2.开启Internet Information Services (IIS)
打开控制面板,进入程序与功能
点击启动或关闭windows功能
在Internet Information Services下,勾选✔所有IIS开头的item.
点击万维网服务的所属的方框,其子项目默认选择。
我之前没选这个,导致IIS管理器中不能浏览.js文件内容。
确认后等待安装,当C盘根目录出现文件夹,则成功!
3、导入JS API
打开已经下载好的API包,将复制到inetpub文件夹下的wwwroot下。
(我这里是4.15版本API,所以文件夹名是4.15),该文件位置可参考下图层次。
4、修改原始文件变量
打开IIS文件管理器。
在Cortana中搜索比较快
获得路径
右键点击dojo.js文件浏览,自动弹出html页面,如果步骤2中没有选择万维网服务则不会弹出。如下图所示:
这一步主要是获得网络路径,我这里是localhost/4.15/dojo复制下来。
更改默认路径变量
修改init.js 和dojo.js
不知道文件在哪的可以看我截图中的路径名
修改两个文件的步骤都一样,用文本编辑器打开(我用的是 vs code ),查找[HOSTNAME_AND_PATH_TO_JSAPI]将https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo全部替换成http://localhost/4.15/dojo【注意是 http 不是 https 】
测试
用浏览器直接打开http://localhost/4.15/dojo/dojo.js,如果可以看到代码,则配置成功。
让我们来尝试一个HelloWord,运行一下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>Intro to SceneView - Create a 3D map</title>
<style type="text/css">
html, body, #viewDiv { padding: 0;
margin: 0;height: 100%; width: 100%; }
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#layerToggle {
top: 20px;
right: 20px;
position: absolute;
z-index: 99;
background-color: white;
border-radius: 8px;
padding: 10px;
opacity: 0.75;
}
</style>
<script type="text/javascript">
</script>
<link rel="stylesheet" href="http://localhost/4.15/esri/css/main.css">
<script type="text/javascript" src="http://localhost/4.15/init.js"></script>
<!-- 本地部署必须精确到init.js -->
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/TileLayer",
"dojo/domReady!"
], function (Map, SceneView, TileLayer) {
var transportationLayer = new TileLayer({
url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
id: "streets",
opacity: 0.7
});
var housingLayer = new TileLayer({
url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
id: "ny-housing"
});
var map = new Map({
"basemap": "oceans",
"ground": "world-elevation",
"layers": housingLayer
});
map.layers.add(transportationLayer);
var view = new SceneView({
"map": map,
"container": "viewDiv",
"center": [15, 65]
});
/*****************************************************************
* All code previously written in the steps above should be placed
* before the following code
*******************************************************************/
// Create a variable referencing the checkbox node
var streetsLayerToggle = document.getElementById("streetsLayer");
// Listen to the change event for the checkbox
streetsLayerToggle.addEventListener("change", function () {
// When the checkbox is checked (true), set the layer's visibility to true
transportationLayer.visible = streetsLayerToggle.checked;})
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<span id="layerToggle" class="esri-widget"> <input type="checkbox" id="streetsLayer" checked /> Transportation </span>
</body>
</html>
效果
```效果
yundong_: 博主讲的真好,网上一堆半瓶子醋讲的和屎一样
胡祺GISer: 点击解释器选择一栏的【 ...】 浏览,选择你电脑里python3.9 对应的python.exe。
Yesican168: 博主您好,选择conda创建项目,但是可供选择的Python版本里没有3.9,我通过查询自己电脑的Python版本是3.9,这个该怎么办?
薛定谔的猫007: node.js里面有个stealth.min.js文件,打开新窗口时打开一次就可以绕过,有这类的教程你搜一下
头发是我最后的倔强: wins下载32位就可以