Home >Web Front-end >JS Tutorial >ArcGIS API for JavaScript development environment construction and first example demo

ArcGIS API for JavaScript development environment construction and first example demo

黄舟Original: 2017-03-30 16:30:182954browse

ESRI has so far released the latest ArcGIS Server for JavaScript API v3.9, which provides richer and more powerful functions.

1. Preparation before installation

1. ArcGIS Server for JavaScript API download address for each version: http://support.esrichina-bj.cn/2011/0223/960.html, we Select to download the latest "ArcGIS API for JavaScript 3.9: Library | SDK", as shown in the figure below:

ArcGIS API for JavaScript development environment construction and first example demo

2. The file downloaded to the local area is as shown in the figure below:

ArcGIS API for JavaScript development environment construction and first example demo

3. Unzip the above 2 zip packages, as shown below:

ArcGIS API for JavaScript development environment construction and first example demo

4 . Make sure that IIS has been installed locally. If not, please refer to the following address for configuration:

http://jingyan.baidu.com/article/8275fc8694360146a03cf6c3.html

2. api and sdk local IIS configuration deployment

1. Open the C:\Inetpub\wwwroot folder.

2. Copy the arcgis_js_v39_sdk folder directly to C:\Inetpub\wwwroot and change it to C:\Inetpub\wwwroot\arcgis_js_v39_sdk,

As shown in the figure below:

ArcGIS API for JavaScript development environment construction and first example demo

3. Copy the library folder in the arcgis_js_v39_api\arcgis_js_api directory to

C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api and change it to

C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library, as shown below:

ArcGIS API for JavaScript development environment construction and first example demo

4. Open IIS, as shown below, browse install.htm, as shown below As shown, the initial deployment is successful:

ArcGIS API for JavaScript development environment construction and first example demo

5. Find C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library\3.9\ 3.9\init.js file, open it with Notepad or EditPlus; Ctrl+F key combination to search for [HOSTNAME_AND_PATH_TO_JSAPI] and replace it with /arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/, where is the machine Name or machine IP, note there is no http prefix. It can be localhost or 192.168.11.195. Here I am using localhost, as shown in the figure below:

ArcGIS API for JavaScript development environment construction and first example demo

## 6. Find C:\ inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library\3.9\3.9\js\dojo\dojo\dojo.js file, open it with Notepad or EditPlus, search for [HOSTNAME_AND_PATH_TO_JSAPI] with the Ctrl+F key combination, and replace it with / arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/, where is the machine name or machine IP, without http prefix. It can be localhost or 192.168.11.195. Here I am using localhost, as shown in the figure below:

ArcGIS API for JavaScript development environment construction and first example demo

ArcGIS API for JavaScript development environment construction and first example demo ## 7. As shown in the figure below, find the 3.9compact folder. The operations of the next 8) and 9) steps are exactly the same as 5) and 6), except that the 8) and 9) operations are for the 3.9compact folder, and 5) ), 6) The operation is for the 3.9 folder, as shown in the following figure:

ArcGIS API for JavaScript development environment construction and first example demo

##8, C:\inetpub\wwwroot\arcgis_js_v39_sdk\ Arcgis_js_api\library\3.9\3.9compact\init.js file, open it with Notepad or EditPlus; Ctrl+F key combination to find [HOSTNAME_AND_PATH_TO_JSAPI] and replace it with /arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9compact/ , where is the machine name or machine IP. Note that there is no http prefix. It can be localhost or 192.168.11.195. Here I am using localhost, as shown in the figure below:

ArcGIS API for JavaScript development environment construction and first example demo

9. Find the C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library\3.9\3.9compact\js\dojo\dojo\dojo.js file and open it with Notepad or EditPlus , Ctrl+F key combination search [HOSTNAME_AND_PATH_TO_JSAPI], and replace it with / arcgis_js_v39_sdk/arcgis_js_api/library/3.9/ 3.9compact/, where is the machine name or machine IP, without http prefix. It can be localhost or 192.168.11.195. Here I am using localhost, as shown in the figure below:

ArcGIS API for JavaScript development environment construction and first example demo

##10. After the above 9 Steps, we have completed the local deployment of ArcGIS API for JavaScript.

3. Instance demo running

1. Open VS2012, create a new blank Web project, add an index.html file, the file content is as follows As shown in the picture:

ArcGIS API for JavaScript development environment construction and first example demo

# The css and js files used here are the paths on the local server configured in the previous steps.

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>第一个js GIS地图</title>  
    <style>  
        html, body, #mapDiv {  
            padding: 0;  
            margin: 0;  
            height: 100%;  
        }  
    </style>  
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css" />  
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />  
    <script type="text/javascript" src="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/init.js"></script>  
    <script type="text/javascript">  
        dojo.require("esri.map");  
        function init() {  
            var myMap = new esri.Map("mapDiv");  
            var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(
            "http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunityENG/MapServer");  
            myMap.addLayer(myTiledMapServiceLayer);  
        }  
        dojo.addOnLoad(init);  
    </script>  
</head>  
<body class="claro">  
    <p id="mapDiv" style="width: 900px; height: 600px; border: 1px solid #000;"></p>  
</body>  
</html>

2. Run the index.html page, as shown below:

ArcGIS API for JavaScript development environment construction and first example demo

##The above is the content of the ArcGIS API for JavaScript development environment and the first example demo. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Experience in translating ArcGIS API for JavaScript development booksNext article：Experience in translating ArcGIS API for JavaScript development books

See more

ArcGIS API for JavaScript development environment construction and first example demo

Related articles