zoukankan      html  css  js  c++  java
  • ARCGIS JAVASCRIPT API (3.2)部署

    前期做地图开发用的API 是SILVERLIGHT  项目需要,学习下JS API

    首先从官方下载最新的API包 3.2一共有2个压缩包API:arcgis_js_v32_api.zip和arcgis_js_v32_sdk.zip

    解压arcgis_js_v32_api,在library文件夹下可以看到安装说明文件install.htm

    下一步 根据安装说明进行配置。

    部署步骤1:将解压缩后的文件目录拷贝到web服务器网站根目录下,这里使用IIS。根目录。C:\Inetpub\wwwroot

    拷贝后的文件目录结构为

    C:\Inetpub\wwwroot\arcgis_js_api\library

    部署步骤2:修改全局变量[HOSTNAME_AND_PATH_TO_JSAPI] ,EditPlus或则DW都可以 查找替换为localhost/library/3.2/jsapi 和localhost/library/3.2/jsapicompact

    如果端口不是80 需要加上端口号 (localhost:端口)

    Configuration options for normal build:

    1. Open C:\Inetpub\wwwroot\arcgis_js_api\library\3.2\jsapi\init.js in a text editor and search for the text '[HOSTNAME_AND_PATH_TO_JSAPI]', and replace this text with "<myserver>/arcgis_js_api/library/3.2/jsapi/"
    2. Open C:\Inetpub\wwwroot\arcgis_js_api\library\3.2\jsapi\js\dojo\dojo\dojo.js in a text editor and search for the text '[HOSTNAME_AND_PATH_TO_JSAPI]', and replace this text with "<myserver>/arcgis_js_api/library/3.2/jsapi/"

    Configuration options for compact build:

    1. Open C:\Inetpub\wwwroot\arcgis_js_api\library\3.2\jsapicompact\init.js in a text editor and search for the text '[HOSTNAME_AND_PATH_TO_JSAPI]', and replace each instance of this text with "<myserver>/arcgis_js_api/library/3.2/jsapicompact/"
    2. Open C:\Inetpub\wwwroot\arcgis_js_api\library\3.2\jsapicompact\js\dojo\dojo\dojo.js in a text editor and search for the text '[HOSTNAME_AND_PATH_TO_JSAPI]', and replace this text with "<myserver>/arcgis_js_api/library/3.2/jsapicompact/"

     步骤3: 测试是否发布成功,官方的安装说明文件中给出了完成的测试代码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>Simple Map</title>   
     <link rel="stylesheet" type="text/css" href="http://<myserver>/arcgis_js_api/library/3.2/jsapi/js/dojo/dijit/themes/tundra/tundra.css"/>
        <link rel="stylesheet" type="text/css" href="http://<myserver>/arcgis_js_api/library/3.2/jsapi/js/esri/css/esri.css" />

        <script type="text/javascript" src="http://<myserver>/arcgis_js_api/library/3.2/jsapi/init.js"></script>
        <script type="text/javascript">      dojo.require("esri.map");      
    function init() {
            
    var myMap = new esri.Map("mapDiv");
            
    //note that if you do not have public Internet access then you will need to point this url to your own locally accessible cached service.
            var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer");        myMap.addLayer(myTiledMapServiceLayer);      }
          dojo.addOnLoad(init);
        
    </script>
      </head> 
     <body class="tundra">
        <div id="mapDiv" style="900px; height:600px; border:1px solid #000;"></div>  
    </body>
    </html>

    放到IIS目录里运行下试试,如果地图可以正常显示 则表示部署成功 。

    注意:官方测试代码给出的地图服务是缓存地图,如果地图服务是动态地图话需要使用动态图层ArcGISDynamicMapServiceLayer才能显示。

     API 3.16 测试地图demo

    <!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>Simple Map</title>
        <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
        <style>
          html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>
        <script src="https://js.arcgis.com/3.16/"></script>
        <script type="text/javascript">
            var map;
            var smarkerlayer;
            require(["esri/map",
            "esri/geometry/Point",        
            "esri/graphic",
            "dojo/domReady!"], function (Map) {
                map = new Map("map");
                var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/china2012shp/MapServer");
                map.addLayer(dynamicMapServiceLayer);
                smarkerlayer = new esri.layers.GraphicsLayer();
                map.addLayer(smarkerlayer);
                dojo.connect(map, "onLoad", function () {
                    dojo.connect(map, "onMouseMove", showCoordinates);
                    dojo.connect(map, "onMouseDrag", showCoordinates);
                });
                dojo.connect(map, "onClick", clicktoaddMarker);
                //创建一个标注
              var pt = new esri.geometry.Point(117.0605760000, 35.8424320000, map.spatialReference);
              addmarker(pt);
            });
    
            function addmarker(point) {
                var pt = point;
                var symbol = new esri.symbol.PictureMarkerSymbol("logo.png", 25, 25);
                var attr = { "address": "这只是一个测试数据(⊙o⊙)哦" };
                //创建模版
                var infoTemplate = new esri.InfoTemplate("标题测试", "地址:${address}");
                //创建图像
                var graphic = new esri.Graphic(pt, symbol, attr, infoTemplate);
                //把图像添加到刚才创建的图层上
                smarkerlayer.add(graphic);
            }
    
            function showCoordinates(evt) {
                //get mapPoint from event
                var mp = evt.mapPoint;
                //display mouse coordinates
                dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
                var markerSymbol = new SimpleMarkerSymbol();
            }
    
            //测试单击事件动态创建标注
            function clicktoaddMarker(evt) {
                var mp = evt.mapPoint;
                var pt = new esri.geometry.Point(mp.x, mp.y, map.spatialReference);
                addmarker(pt);
            }
    
    
        </script>
      </head>
      <body>
        <div id="map"></div>
        <span id="info" style="position:absolute; right:25px; bottom:5px; color:#000; z-index:50;"></span>
      </body>
    </html>
     
  • 相关阅读:
    C# 从服务器下载文件
    不能使用联机NuGet 程序包
    NPOI之Excel——合并单元格、设置样式、输入公式
    jquery hover事件中 fadeIn和fadeOut 效果不能及时停止
    UVA 10519 !! Really Strange !!
    UVA 10359 Tiling
    UVA 10940 Throwing cards away II
    UVA 10079 Pizze Cutting
    UVA 763 Fibinary Numbers
    UVA 10229 Modular Fibonacci
  • 原文地址:https://www.cnblogs.com/merray/p/2752334.html
Copyright © 2011-2022 走看看