10-ArcGIS API For JavaScript动态图层

最新推荐文章于 2023-09-09 13:27:04 发布

爱睡懒觉的老舅

最新推荐文章于 2023-09-09 13:27:04 发布

阅读量845

点赞数 1

原文链接：https://blog.youkuaiyun.com/lovecarpenter/article/details/52702931

版权

WebGIS 同时被 3 个专栏收录

16 篇文章

订阅专栏

ArcGIS API For JavaScript

9 篇文章

订阅专栏

Map

9 篇文章

订阅专栏

一、前言

ArcGIS 10.1版本之后，提供了一种新的功能：动态图层。准确的说，动态图层并不是一种新的地图服务，它更像是地图服务(MapServer)的一种扩展。动态图层主要特点是：（1）改变地图服务的现有图层；（2）动态图层适用于海量图层的情况；（3）不需要将 shp 文件发布为服务，服务器可以之间读取 shp 文件在前端显示；

二、调用动态图层

在前面已经说过动态图层并不是一种新的服务类型，而是地图服务的一种扩展，因此我们不需要发布服务，只需要对地图服务添加动态图层功能即可。启用地图服务的步骤为：（1）给相应的地图服务启用动态工作空间；（2）选择服务器相应的硬盘地址并赋予其 id；（3）将相应位置注册到 ArcGIS Server 服务器(保证 ArcGIS Server 可以访问数据)；（4）在 Web 端进行调用；

2.1 启用动态图层

（1）首先需要发布动态地图服务，发布成功后，我们打开 Manager->登陆，找到该服务，点击功能，选择允许每次请求修改图层顺序和符号->添加

（2）选择本地数据

注:D:\myshp文件夹下面有一个shp文件：lunkuoxian.shp

（3）因此我们选择工作空间类型为：shpfile文件夹，工作空间id在此处取名为my，硬盘路径：D：\myshp

（4）点击确定，重新启动服务

（5）注册文件夹到服务器

点击站点->数据存储->注册文件夹（因为我们是文件夹，所以是注册文件夹，如果是数据库，那么就要注册数据库）

（6）在 Service Directory 中查看动态图层是否启用

在浏览器中输入：http://localhost:6080/arcgis/rest/services，进入到 Test 文件夹，找到发布的地图服务 MyService，点进去后在最小方找到：

访问动态图层的地址为：http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer/dynamicLayer

三、Web端调用

代码实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Web端调用动态地图服务</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <script type="text/javascript">
        require(["esri/map",
            "dojo/dom",
            "dojo/on",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/FeatureLayer",
            "esri/layers/TableDataSource",
            "esri/layers/LayerDataSource",
            "esri/renderers/SimpleRenderer",
            "esri/symbols/SimpleLineSymbol",
            "dojo/domReady!"], function (
                Map,dom,on, ArcGISDynamicMapServiceLayer, FeatureLayer, TableDataSource, LayerDataSource, SimpleRenderer,SimpleLineSymbol) {
            var map = new Map("mapDiv");
            var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyMapService/MapServer");
            map.addLayer(layer1);

            on(dom.byId("btn"),"click",function(e){
                //定义一个数据源
                var dataSource = new TableDataSource();
                //此处为我们设置的命名空间
                dataSource.workspaceId = "my";
                //命名空间下面的shp
                dataSource.dataSourceName = "lunkuoxian.shp";
                //定义一个图层数据源
                var layerSource = new LayerDataSource();
                //给图层数据源赋值
                layerSource.dataSource = dataSource;
                //定义一个要素图层:注意链接为动态图层的地址
                var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/MyMapService/MapServer/dynamicLayer", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: ["*"],
                    source: layerSource
                });
                //定义线符号
                var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
                //定义渲染器
                var renderer = new esri.renderer.SimpleRenderer(lineSymbol);
                //定义渲染器
                layer2.setRenderer(renderer);
                layer2.refresh();
                map.addLayer(layer2);
            })
        });
    </script>
</head>

<body>
<div id="mapDiv" style="height:600px;"></div>
<button id="btn">添加动态图层</button>
</body>
</html>

运行结果前：

运行结果后：

四、动态图层属性查询

1、通过 Click 之间获取

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动态图层的属性查询—click方法</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <script type="text/javascript">
        require(["esri/map",
            "dojo/dom",
            "dojo/on",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/FeatureLayer",
            "esri/layers/TableDataSource",
            "esri/layers/LayerDataSource",
            "esri/renderers/SimpleRenderer",
            "esri/symbols/SimpleLineSymbol","dojo/json",
            "dojo/domReady!"], function (
                Map,dom,on, ArcGISDynamicMapServiceLayer, FeatureLayer, TableDataSource, LayerDataSource, SimpleRenderer,SimpleLineSymbol,jsonUtil) {
            var map = new Map("mapDiv");
            var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyMapService/MapServer");
            map.addLayer(layer1);

            on(dom.byId("btn"),"click",function(e){
                //定义一个数据源
                var dataSource = new TableDataSource();
                //此处为我们设置的命名空间
                dataSource.workspaceId = "my";
                //命名空间下面的shp
                dataSource.dataSourceName = "lunkuoxian.shp";
                //定义一个图层数据源
                var layerSource = new LayerDataSource();
                //给图层数据源赋值
                layerSource.dataSource = dataSource;
                //定义一个要素图层:注意链接为动态图层的地址
                var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/MyMapService/MapServer/dynamicLayer", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: ["*"],
                    source: layerSource
                });
                //定义线符号
                var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
                //定义渲染器
                var renderer = new esri.renderer.SimpleRenderer(lineSymbol);
                //定义渲染器
                layer2.setRenderer(renderer);
                layer2.refresh();
                map.addLayer(layer2);
                layer2.on("click", function(evt) {
                    //得到点击的graphics
                    var graphic=evt.graphic;
                    //得到该属性信息
                    var attributes=graphic.attributes;
                    //得到该属性信息转换成字符串
                    var result=jsonUtil.stringify(attributes)
                    //将结果弹出一下
                    alert(result);
                    //获得要素图层的主键名称
                })
            })
        });
    </script>
</head>
<body>
<div id="mapDiv" style="height:600px;"></div>
<button id="btn">添加动态图层</button>
</body>
</html>

结果：

2、通过查询获得

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动态图层的属性查询—通过查询获得属性</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <script type="text/javascript">
        require(["esri/map",
            "dojo/dom",
            "dojo/on",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/FeatureLayer",
            "esri/layers/TableDataSource",
            "esri/layers/LayerDataSource",
            "esri/renderers/SimpleRenderer",
            "esri/symbols/SimpleLineSymbol","dojo/json","esri/tasks/query",
            "dojo/domReady!"], function (
                Map,dom,on, ArcGISDynamicMapServiceLayer, FeatureLayer, TableDataSource, LayerDataSource, SimpleRenderer,SimpleLineSymbol,jsonUtil,Query) {
            var map = new Map("mapDiv");
            var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyMapService/MapServer");
            map.addLayer(layer1);

            on(dom.byId("btn"),"click",function(e){
                //定义一个数据源
                var dataSource = new TableDataSource();
                //此处为我们设置的命名空间
                dataSource.workspaceId = "my";
                //命名空间下面的shp
                dataSource.dataSourceName = "lunkuoxian.shp";
                //定义一个图层数据源
                var layerSource = new LayerDataSource();
                //给图层数据源赋值
                layerSource.dataSource = dataSource;
                //定义一个要素图层:注意链接为动态图层的地址
                var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/MyMapService/MapServer/dynamicLayer", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: ["*"],
                    source: layerSource
                });
                //定义线符号
                var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
                //定义渲染器
                var renderer = new esri.renderer.SimpleRenderer(lineSymbol);
                //定义渲染器
                layer2.setRenderer(renderer);
                layer2.refresh();
                map.addLayer(layer2);
                on(dom.byId("attr"),"click",function(){
                    //得到要素图层的主键属性
                    var idProperty = layer2.objectIdField;
                    //定义查询参数
                    var query = new Query();
                    //是否返回几何形状
                    query.returnGeometry = false;
                    //图层的主键名称（根据自己要求修改）
                    query.objectIds = [247];
                    //查询条件1=1意思是：只根据主键查询，忽略where子句
                    query.where = "1=1";
                    //进行查询
                    layer2.selectFeatures(query, FeatureLayer.SELECTION_NEW,function(result){
                        //因为我们根据主键查询，一定只有一个元素
                        var graphic=result[0];
                        //获得属性
                        var attributes=graphic.attributes;
                        //得到该属性信息转换成字符串
                        var result=jsonUtil.stringify(attributes)
                        //将结果弹出一下
                        alert(result);
                    });
                })
            })
        });
    </script>
</head>
<body>
<div id="mapDiv" style="height:600px;"></div>
<button id="btn">添加动态图层</button>
<button id="attr">用户弹出属性</button>
</body>
</html>

结果图：