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>
  • 相关阅读:
    面试题：区分List中remove(int index)和remove(Object obj)
    Collection的子接口之一：List 接口
    面试题：ArrayList、LinkedList、Vector三者的异同？
    jdk 5.0 新增的foreach循环（用于遍历集合、数组）
    Iterator迭代器接口（遍历Collection的两种方式之一）
    哈希值
    Collection接口方法
    集合框架的概述
    注解(Annotation)
    System类、Math类、BigInteger与BigDecimal的使用
  • 原文地址：https://www.cnblogs.com/merray/p/2752334.html
Copyright © 2011-2022 走看看