博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ArcGIS Server开发教程系列(7)使用ArcGIS API for Javascript-Hello World
阅读量:5009 次
发布时间:2019-06-12

本文共 4162 字,大约阅读时间需要 13 分钟。

ArcGIS API for Javascript  API下载地址:

选择最新的下载就好了,目前是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 所暴露的缓存地图服务资源的访问。缓存服务访问缓存文件夹中预先创建好的切片图片,而不是动态生成图片。

 

 为服务地址,根据需要修改

注意需要首先引入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 - 海龙 - 海龙的博客

转载于:https://www.cnblogs.com/jhlong/p/5394670.html

你可能感兴趣的文章
html幻灯效果页面
查看>>
row_number() over partition by 分组聚合
查看>>
MapRedue详细工作流程
查看>>
太可怕了!黑客是如何攻击劫持安卓用户的DNS?
查看>>
nginx在Windows环境安装
查看>>
MVC案例——删除操作
查看>>
Timer和TimerTask的使用--2
查看>>
对于软件工程的理解
查看>>
[题解]Crazy Binary String-前缀和(2019牛客多校第三场B题)
查看>>
Bugtags 让你的 APP 测试轻松、上线安心
查看>>
iOS--App功耗优化
查看>>
前端理解控制反转ioc
查看>>
c# 控制台输出txt文件
查看>>
JSF--INTRODUCION
查看>>
矩阵中的最长上升序列——Longest Continuous Increasing Subsequence II
查看>>
Activiti进阶(九)——接收任务(ReceiveTask)
查看>>
Git(五):Git分支管理策略
查看>>
Git笔记
查看>>
UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等)
查看>>
Android学习笔记39:Android四大组件之Service
查看>>