视频图像处理系列索引 || Arcgis/Engine/Server开发索引 || Web Map Gis开发索引 || jquery表格组件 JQGrid索引
WPF MVVM模式开发实现简明教程索引 || ArcGIS Runtime WPF(.net C#)开发简明教程索引

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:\inetpub\wwwroot\arcgis_js_v39_api复制到C:\inetpub\wwwroot\路径下,同时加载到程序中。

 

新建asp.net程序后,修改arcgis_js_v39_api\arcgis_js_api\library\3.9\3.9compact\init.js文件,即将“[HOSTNAME_AND_PATH_TO_JSAPI]”替换为”localhost/arcgis_js_v39_api\arcgis_js_api\library\3.9\3.9compact\js”         

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 { width: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 { width: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 - 海龙 - 海龙的博客
posted @ 2016-04-15 11:17  jhlong  阅读(1303)  评论(0编辑  收藏  举报
海龙的博客 jhlong@cnblogs 版权所有© 转载请注明链接.有用请推荐一下
代码全部经过本人测试,但不保证复制粘贴就正常运行,更不保证能解决你的问题,请结合前后代码及描述理解后修改和使用