WebGIS入门第一弹、ArcGIS_JS_API部署

最新推荐文章于 2024-07-27 23:17:42 发布

笨笨的码农

最新推荐文章于 2024-07-27 23:17:42 发布

阅读量4.5k

点赞数 1

分类专栏： WebGIS入门

WebGIS入门专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在windows的IIS服务器下配置arcgis api 4.7
1、将下载的arcgis api for javascript4.7开发包下的library文件夹复制到C:\inetpub\wwwroot\arcgis_js_api文件夹下，目录结构如下：

image.png

2、修改C:\inetpub\wwwroot\arcgis_js_api\library\4.7下的init.js文件。打开后搜索 [HOSTNAME_AND_PATH_TO_JSAPI] ，并将其替换成 localhost/arcgis_js_api/library/4.7/，（并把前面的https替换成http），最后的结果如下所示：

image.png

3、修改C:\inetpub\wwwroot\arcgis_js_api\library\4.7\dojo下的dojo.js文件。步骤同上，最后的结果如下所示：

image.png

4、解决IIS服务器的跨域问题。

按照如下路径找到IIS服务器：

image.png

打开IIS，找到“HTTP响应标头”点进去，在右侧可以看到添加，然后添加如下标头即可
Access-Control-Allow-Headers：Content-Type, api_key, Authorization
Access-Control-Allow-Origin：*

image.png

5、在html页面中引用即可。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Test Map</title>
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.7/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.7/esri/css/main.css" />
    <style>
      html, body, #ui-map-view {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="http://localhost/arcgis_js_api/library/4.7/dojo/dojo.js"></script>
    <script>
      var myMap, view;
      require([
        "esri/Basemap",
        "esri/layers/TileLayer",
        "esri/Map",
        "esri/views/MapView",
        "dojo/domReady!"
      ], function (Basemap, TileLayer, Map, MapView){
       
        var customBasemap = new Basemap({
          title: "Custom Basemap",
          id: "myBasemap"
        });
        myMap = new Map({
          basemap: "osm"
        });
        view = new MapView({
          center: [-111.87, 40.57], // long, lat
          container: "ui-map-view",
          map: myMap,
          zoom: 6
        });
      });
    </script>
  </head>
  <body class="claro">
    <div id="ui-map-view"></div>
  </body>
</html>

在windows的tomcat服务器下配置arcgis api 4.7
1、将下载的arcgis api for javascript4.7开发包下的library文件夹复制到 D:\Tomcat5\Tomcat 5.5\webapps\arcgis_js_api （tomcat路径换成自tomcat的路径）文件夹下，目录结构如下：

image.png

2、修改D:\Tomcat5\Tomcat 5.5\webapps\arcgis_js_api\library\4.7下的init.js文件。打开后搜索[HOSTNAME_AND_PATH_TO_JSAPI] ，并将其替换成 localhost/arcgis_js_api/library/4.7/，（并把前面的https替换成http），最后的结果如下所示：

image.png

3、修改D:\Tomcat5\Tomcat 5.5\webapps\arcgis_js_api\library\4.7\dojo下的dojo.js文件。步骤同上，最后的结果如下所示：

image.png

4、启动tomcat

5、在html页面中引用即可。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Test Map</title>
    <link rel="stylesheet" href="http://localhost:8081/arcgis_js_api/library/4.7/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://localhost:8081/arcgis_js_api/library/4.7/esri/css/main.css" />
    <style>
      html, body, #ui-map-view {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="http://localhost:8081/arcgis_js_api/library/4.7/dojo/dojo.js"></script>
    <script>
      var myMap, view;
      require([
        "esri/Basemap",
        "esri/layers/TileLayer",
        "esri/Map",
        "esri/views/MapView",
        "dojo/domReady!"
      ], function (Basemap, TileLayer, Map, MapView){
       
        var customBasemap = new Basemap({
          title: "Custom Basemap",
          id: "myBasemap"
        });
        myMap = new Map({
          basemap: "osm"
        });
        view = new MapView({
          center: [-111.87, 40.57], // long, lat
          container: "ui-map-view",
          map: myMap,
          zoom: 6
        });
      });
    </script>
  </head>
  <body class="claro">
    <div id="ui-map-view"></div>
  </body>
</html>

作者：WebGiser
链接：https://www.jianshu.com/p/77989c32bff7