arcgis api for javaScript 实现动态发布矢量/栅格数据。

最新推荐文章于 2022-05-13 18:35:19 发布

转载最新推荐文章于 2022-05-13 18:35:19 发布 · 628 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chendubin123/p/7232370.html

文章标签：

#javascript #ViewUI

本文介绍使用ArcGIS API for JavaScript动态发布矢量与栅格数据的方法。通过具体代码示例，展示了如何创建动态图层服务，包括设置数据源、查询属性等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.arcgis api for javaScript 实现动态发布矢量数据。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link rel="styleSheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
 7     <link rel="styleSheet" href="https://js.arcgis.com/3.17/dijit/themes/tundra/tundra.css">
 8     <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
 9     <script src="https://js.arcgis.com/3.17/init.js"></script>
10     <script type="text/javascript">
11     //矢量图层动态服务
12     
13         require(["esri/map",
14             "dojo/dom",
15             "dojo/on",
16             "esri/layers/ArcGISDynamicMapServiceLayer",
17             "esri/layers/FeatureLayer",
18             "esri/layers/TableDataSource",
19             "esri/layers/LayerDataSource",
20             "esri/renderers/SimpleRenderer",
21             "esri/symbols/SimpleLineSymbol","dojo/json","esri/tasks/query",
22             "dojo/domReady!"], function (
23                 Map,dom,on, ArcGISDynamicMapServiceLayer, FeatureLayer, TableDataSource, LayerDataSource, SimpleRenderer,SimpleLineSymbol,jsonUtil,Query) {
24            
25             var map = new Map("mapDiv");
26             var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/shp/shpexercise/MapServer");
27             map.addLayer(layer1);
28             on(dom.byId("btn"),"click",function(e){
29                  alert("进入");
30                 //定义一个数据源
31                 var dataSource = new TableDataSource();
32                 //此处为我们设置的命名空间
33                 dataSource.workspaceId = "my";
34                 //命名空间下面的shp
35                 dataSource.dataSourceName = "someArea1.shp";
36                 //定义一个图层数据源
37                 var layerSource = new LayerDataSource();
38                 //给图层数据源赋值
39                 layerSource.dataSource = dataSource;
40                 //定义一个要素图层:注意链接为动态图层的地址，
41                 //动态图层的设置参考链接：
42                 //http://blog.youkuaiyun.com/lovecarpenter/article/details/52702931?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io
43                 var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/shp/shpexercise/MapServer/dynamicLayer", {
44                     mode: FeatureLayer.MODE_ONDEMAND,
45                     outFields: ["*"],
46                     source: layerSource
47                 });
48                 map.addLayer(layer2);
49 50                 on(dom.byId("attr"),"click",function(){
51                     //得到要素图层的主键属性
52                     var idProperty = layer2.objectIdField;
53                     //定义查询参数
54                     var query = new Query();
55                     //是否返回几何形状
56                     query.returnGeometry = false;
57                     //图层的主键名称（根据自己要求修改）
58                     query.objectIds = [2];
59                     //查询条件1=1意思是：只根据主键查询，忽略where子句
60                     query.where = "1=1";
61                     //进行查询
62                     layer2.selectFeatures(query, FeatureLayer.SELECTION_NEW,function(result){
63                         //因为我们根据主键查询，一定只有一个元素
64                         var graphic=result[0];
65                         //获得属性
66                         var attributes=graphic.attributes;
67                         //得到该属性信息转换成字符串
68                         var result=jsonUtil.stringify(attributes);
69                         //将结果弹出一下
70                         alert(result);
71                     });
72 
73                 });});
74         });
75     </script>
76 </head>
77 
78 <body>
79 <div id="mapDiv" style="height:600px;"></div>
80 <button  id="btn" >添加动态图层</button>
81 <button id="attr">查看属性数据</button>
82 </body>
83 </html>

2.arcgis api for javaScript 实现动态发布栅格数据。

栅格数据和矢量数据的发布是不同的

完整代码如下

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <!-- <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> -->
 7     <!-- <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"/> -->
 8     
 9     <link rel="styleSheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
10     <link rel="styleSheet" href="https://js.arcgis.com/3.17/dijit/themes/tundra/tundra.css">
11     <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
12     <script src="https://js.arcgis.com/3.17/init.js"></script>
13     <!-- <script  type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> -->
14     <script type="text/javascript">
15     //矢量图层动态服务
16     
17         require(["esri/map",
18             "dojo/dom",
19             "dojo/on",
20             "esri/layers/DynamicLayerInfo",
21             "esri/layers/ArcGISDynamicMapServiceLayer",
22             "esri/layers/FeatureLayer",
23             "esri/layers/RasterDataSource",
24             "esri/layers/LayerDataSource",
25             "esri/renderers/SimpleRenderer",
26             "esri/symbols/SimpleLineSymbol","dojo/json","esri/tasks/query",
27             "dojo/domReady!"], function (
28                 Map,dom,on, DynamicLayerInfo,ArcGISDynamicMapServiceLayer, FeatureLayer, RasterDataSource, LayerDataSource, SimpleRenderer,SimpleLineSymbol,jsonUtil,Query) {
29             var map = new Map("mapDiv");
30             on(dom.byId("btn"),"click",function(e){
31                 //定义一个数据源
32                 var dataSource = new RasterDataSource();
33                 //此处设置命名空间
34                 dataSource.workspaceId = "mythird";
35                 //命名空间下面的栅格数据
36                 dataSource.dataSourceName = "ourTest.tif";
37                 //定义一个图层数据源
38                 var layerSource = new LayerDataSource();
39                 //给图层数据源赋值
40                 layerSource.dataSource = dataSource;
41                 //定义一个要素图层:注意链接为动态图层的地址
42                 
43                 var dynamicLayerInfo=new DynamicLayerInfo();
44                 dynamicLayerInfo.id = 0;
45                 dynamicLayerInfo.source=layerSource;
46                 
47                 
48                 var layer3=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/rastertest/Rastertest/MapServer");
49                 layer3.setDynamicLayerInfos([dynamicLayerInfo]);
50                 map.addLayer(layer3);
51                 });
52  
53         });
54     </script>
55 </head>
56 
57 <body>
58 <div id="mapDiv" style="height:600px;"></div>
59 <button  id="btn" >添加动态图层</button>
60 </body>
61 </html>

动态工作空间（即代码中的 dataSource.workspaceId）的创建过程参考

http://blog.youkuaiyun.com/lovecarpenter/article/details/52702931?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

转载于:https://www.cnblogs.com/chendubin123/p/7232370.html