在IIS服务器上本地部署 ArcGIS API for js 4.15

程序员文章站 2022-04-13 09:00:53

作为一名刚入门的小白，还没开始一个helloworld就在软件安装，环境部署时遇到了一大堆问题，简直太让人头秃了，脑壳疼。话不多说，这篇主要想分享一下自己部署ArcGIS API for js 4.15的过程。一、ArcGIS API for js 4.15下载网站链接：https://deve ......

作为一名刚入门的小白，还没开始一个helloworld就在软件安装，环境部署时遇到了一大堆问题，简直太让人头秃了，脑壳疼。话不多说，这篇主要想分享一下自己部署arcgis api for js 4.15的过程。

一、arcgis api for js 4.15下载

网站链接：
有账号的直接登录，没有账号的需要注册一下,只能注册arcgis online试用账号，esri开发者账号中国区暂不支持注册。
登录进去以后点击download apis&sdks

找到arcgis api for javascript4.15，上面显示的就是最新的版本，点击api进行下载，其他的版本点击all versions就可以查看。

二、在iis上进行部署

将下载下来的压缩包进行解压，解压后的目录如下：
关于iis服务器的安装部署很简单，直接百度就行，此处不再赘述。
将上面的第一个文件夹arcgis_js_api拷贝到iis服务器的根目录下面。

下面我们要找到init.js，dojo.js两个文件修改baseurl。

(1)init.js:c:\inetpub\wwwroot\arcgis_js_api\library\4.15

(2)dojo.js:c:\inetpub\wwwroot\arcgis_js_api\library\4.15\dojo

打开init.js（这里用的是notepad++打开的）, 查找hostname_and_path_to_jsapi，将baseurl的地址替换为：。

dojo.js文件替换的内容与上面一样，至此，初步配置基本完成，然后记得重新启动一下服务器。

三、测试

二话不说我们上代码，下面给出两个示例代码，一个是线上资源的调用，一个是本地部署资源的调用，已经实现线上arcgis api for js 4.15调用的小伙伴，可以跳过代码1，直接看代码2。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>create a 2d map</title>
</head>
<style>
    html,body,#viewdiv{
        padding: 0; margin: 0;
        height: 100%; width: 100%;
    }
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
<body>
<div id="viewdiv"></div>
</body>
<script>
 require([
     "esri/map",
     "esri/views/mapview",
     "dojo/domready!"], function (map,mapview) {
     //视图分离
    var map=new map({
        basemap: "streets"
    });

    var view=new mapview({
        container: "viewdiv",
        map: map,
        zoom:4,//放大倍数
        center:[15,65]
    });


});
</script>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>create a 2d map</title>
</head>
<style>
    html,body,#viewdiv{
        padding: 0; margin: 0;
        height: 100%; width: 100%;
    }
</style>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.15/esri/css/main.css">
<script src="http://localhost/arcgis_js_api/library/4.15/init.js"></script>
<body>
<div id="viewdiv"></div>
</body>
<script>
 require([
     "esri/map",
     "esri/views/mapview",
     "dojo/domready!"], function (map,mapview) {
     //视图分离
    var map=new map({
        basemap: "streets"
    });

    var view=new mapview({
        container: "viewdiv",
        map: map,
        zoom:4,//放大倍数
        center:[15,65]
    });
});
</script>
</html>

对比上面两个代码我们发现只是改动了link和script标签的引用，就是将引用位置改为自己本地部署的资源包的位置。

<!--线上资源的调用-->
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
<script src="https://js.arcgis.com/4.15/"></script>


<!--更改为自己本地部署的资源包的位置-->
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.15/esri/css/main.css">
<script src="http://localhost/arcgis_js_api/library/4.15/init.js"></script>

把需要的测试的html页面（代码2）复制到c:\inetpub\wwwroot目录下，打开iis服务器，点击刷新，找到需要测试的页面，右击浏览，在firefox或者chorme浏览器中打开（不要使用ie浏览器，因为新版本的很多方法ie不支持）。

显示如下结果，部署成功

如果你一步就成功了，那么恭喜你，撒花花。如果你和我一样妥妥的遵循了小白定律（总是能够遇到别人遇不到的错误），头秃。深呼一口气，莫慌，下篇博文里面我会跟大家分享一下自己在部署过程中遇到的错误（小白的错误问题集锦，哈哈哈，专踩别人找不到的坑）

上一篇：娘娘腔

下一篇：慈禧出殡时抬棺到底有多少人难怪大清不忘才怪