arcgis api for javascript4.7的本地配置

在windows的IIS服務(wù)器下配置arcgis api 4.7
1、將下載的arcgis api for javascript4.7開發(fā)包下的library文件夾復(fù)制到C:\inetpub\wwwroot\arcgis_js_api文件夾下,目錄結(jié)構(gòu)如下:


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),最后的結(jié)果如下所示:


image.png

3、修改C:\inetpub\wwwroot\arcgis_js_api\library\4.7\dojo下的dojo.js文件。步驟同上,最后的結(jié)果如下所示:
image.png

4、解決IIS服務(wù)器的跨域問題。

按照如下路徑找到IIS服務(wù)器:


image.png

打開IIS,找到“HTTP響應(yīng)標(biāo)頭”點進(jìn)去,在右側(cè)可以看到添加,然后添加如下標(biāo)頭即可
Access-Control-Allow-Headers:Content-Type, api_key, Authorization
Access-Control-Allow-Origin:*
image.png

image.png

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服務(wù)器下配置arcgis api 4.7
1、將下載的arcgis api for javascript4.7開發(fā)包下的library文件夾復(fù)制到 D:\Tomcat5\Tomcat 5.5\webapps\arcgis_js_api (tomcat路徑換成自tomcat的路徑)文件夾下,目錄結(jié)構(gòu)如下:


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),最后的結(jié)果如下所示:


image.png

3、修改D:\Tomcat5\Tomcat 5.5\webapps\arcgis_js_api\library\4.7\dojo下的dojo.js文件。步驟同上,最后的結(jié)果如下所示:
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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容