zoukankan      html  css  js  c++  java
  • ArcGIS Server开发教程系列(7)使用ArcGIS API for Javascript-Hello World

    ArcGIS API for Javascript  API下载地址:http://support.esrichina-bj.cn/2011/0223/960.html

    选择最新的下载就好了,目前是3.9

     

    VS2010 C# 新建项目-ASP.NET Web应用程序即可。

     

    API解压后把C:inetpubwwwrootarcgis_js_v39_api复制到C:inetpubwwwroot路径下,同时加载到程序中。

     

    新建asp.net程序后,修改arcgis_js_v39_apiarcgis_js_apilibrary3.93.9compactinit.js文件,即将“[HOSTNAME_AND_PATH_TO_JSAPI]”替换为”localhost/arcgis_js_v39_apiarcgis_js_apilibrary3.93.9compactjs”         

    Localhost是服务器名,这里用的本机。

     

    使用web js:

            <link rel="stylesheet"href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">

        <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">

        <script type="text/javascript">        var dojoConfig = { parseOnLoad: true };</script>

     

        <script src="http://js.arcgis.com/3.9/"></script>

     

    新建一个html文件编码

     

    1.       切片服务

    ArcGIS Tiled Map Service Layer(切片地图服务图层)提供对由ArcGIS  Server  REST API 所暴露的缓存地图服务资源的访问。缓存服务访问缓存文件夹中预先创建好的切片图片,而不是动态生成图片。

     

    http://localhost:6080/arcgis/rest/services/test/MapServer 为服务地址,根据需要修改

    注意需要首先引入esri, 引用这3个文件就可以了

    dojo.require("esri.map");

    代码如下:

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

            <title>地图-Test-切片服务</title>

             <linkhref="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/dojo/dijit/themes/tundra/tundra.css"

                    rel="stylesheet" type="text/css" />

                <linkhref="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/esri/css/esri.css"

                    rel="stylesheet" type="text/css" />

                    <scriptsrc="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/init.js" type="text/javascript"></script>

            <style type="text/css"> .MapClass { 900px; height:600px; border:1px solid #000;}</style>

            <script type="text/javascript">

                dojo.require("esri.map");

                dojo.addOnLoad(function () {

                    var MyMap = new esri.Map("MyMapDiv");

     

                    var layer = newesri.layers.ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/test/MapServer");

                    MyMap.addLayer(layer);

                })

            </script>

        </head>

        <body class="tundra">

            <div id="MyMapDiv" class="MapClass"></div>

        </body>

    </html>

    运行查看效果

    Arcgis server开发教程系列(7)使用ArcGIS API for Javas<wbr>cript-Hello World - 海龙 - 海龙的博客

    成功了

     

    2.       要素服务

    FeatureLayer(要素图层)是在ArcGIS 10.0的时候增加的,是一种特殊的GraphicsLayer,它继承GraphicsLayer,用来对服务图层中的要素服务进行显示,同时还提供了支持表达式过滤,要素的关联查询以及在线编辑等功能。

    ArcGIS API for Javascript中提供了针对要素服务的图层-FeatureLayer,FeatureLayer有很多属性和方法,用于对要素服务实现查询,渲染,编辑等操作。通过设置FeatureLayer的setDefinitionExpression属性,还可以实现对数据的过滤。

    要素图层有不同的查询显示模式:快照模式,选择模式,按需模式。还有自动模式esri.layers.FeatureLayer.MODE_AUTO

    l 快照模式:就是将地图范围内的数据一次加载进来,当再次移动地图,范围改变的时候,不再向服务器请求;       esri.layers.FeatureLayer.MODE_SNAPSHOT

    l 选择模式:需要进行一个选择的操作,用矩形选择工具选择一个范围,就可以看到这个范围的要素已经加载进来了,这个选择与查询可是有区别的。esri.layers.FeatureLayer.MODE_SELECTION

    l 按需模式:指的是随着地图范围的改变要素才加载,按照所需的地图范围向服务器请求所要显示的要素。esri.layers.FeatureLayer.MODE_ONDEMAND

     

    注意这里不仅需要引入esri map,还需要引入featurelayer

    dojo.require("esri.layers.FeatureLayer");

     

    http:// localhost:6080/arcgis/rest/services/test2/MapServer/52 为发布服务的地址,52表示第53个图层

     

    "spatialReference": { "wkid": '2326'}

     

    Wkid表示Well-known ID ,='2326'表示wgs84坐标系,对照关系可以去esri帮助里找

    https://developers.arcgis.com/javascript/jshelp/pcs.html

     

    代码如下:

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

            <title>地图-Test-要素服务</title>

             <linkhref="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/dojo/dijit/themes/tundra/tundra.css"

                    rel="stylesheet" type="text/css" />

                <linkhref="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/esri/css/esri.css"

                    rel="stylesheet" type="text/css" />

                    <scriptsrc="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/init.js" type="text/javascript"></script>

            <style type="text/css"> .MapClass { 900px; height:600px; border:1px solid #000;}</style>

            <script type="text/javascript">

                dojo.require("esri.map");

                dojo.require("esri.layers.FeatureLayer");

                dojo.addOnLoad(function () {

                    var startExtent = new esri.geometry.Extent({ "xmin": 798496, "ymin": 790000, "xmax": 872050, "ymax": 850000, "spatialReference": { "wkid": '2326'} });

                    var MyMap =new esri.Map("MyMapDiv", { extent: startExtent });

     

                    //定义显示模式

                    var ftLayer = {

                        mode: esri.layers.FeatureLayer.MODE_ONDEMAND,

                        outFields: ["*"]

                    }

                    FeatureLayer = new esri.layers.FeatureLayer("http:// localhost:6080/arcgis/rest/services/test2/MapServer/52", ftLayer);

                    FeatureLayer.isVisible = true;

                    MyMap.addLayer(FeatureLayer);

                })

            </script>

        </head>

        <body class="tundra">

            <div id="MyMapDiv" class="MapClass"></div>

        </body>

    </html>

    运行查看效果

    Arcgis server开发教程系列(7)使用ArcGIS API for Javas<wbr>cript-Hello World - 海龙 - 海龙的博客
  • 相关阅读:
    自底向上的归并排序 .[转]
    分治法寻找数组最大的两个数和最小的两个数
    分治法求最大最小值
    数字移动【转】
    NRF24L01无线模块的使用
    对钙铀云母放射强度的测量
    自制用于放置钙铀云母的铅盒
    Arduino从DHT11读取温湿度数据并显示在1602LCD
    β particle, α particle, γ ray, ionization chamber
    Arduino通过I2C(PCF8574T)驱动1602LCD
  • 原文地址:https://www.cnblogs.com/jhlong/p/5394670.html
Copyright © 2011-2022 走看看