arcgis api for javascript4.7的本地配置

在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

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服务器下配置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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容