control层alert弹出框乱码_【ArcGIS for JS】动态图层的属性查询（11）

最新推荐文章于 2023-01-03 23:45:53 发布

weixin_39818014

最新推荐文章于 2023-01-03 23:45:53 发布

阅读量150

点赞数

文章标签： control层alert弹出框乱码 ext 动态赋值text js 弹出层的点击事件影响到底层的点击事件 js 添加属性弹出层根据不同条件打开三个title 自定义href带动态参数

在真实需求中,我们不仅仅是将shp在地图中显示那么简单，我们往往要查询该图层的属性信息,我们在前面代码的基础上添加上属性查询。

1.1方法1(通过click直接获取)

1.1.1代码实现

给要素图层添加点击事件

layer2.on("click", function(evt) {                    //得到点击的graphics                    var graphic=evt.graphic;                    //得到该属性信息                    var attributes=graphic.attributes;                    //得到该属性信息转换成字符串                    var result=jsonUtil.stringify(attributes)                    //将结果弹出一下                    alert(result);                    //获得要素图层的主键名称                    })

1.1.2全部代码

<html><head lang="en">    <meta charset="UTF-8">    <title>title>    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />    <script  type="text/Javascript" src="http://localhost/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/MyService/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/MyService/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>

运行结果：

1.2通过查询获得属性

1.2.1代码实现

定义一个按钮(用户获得属性)

<button id="attr">用户弹出属性button>

给相应的按钮绑定事件

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);                    });                })

1.2.2全部代码

<html><head lang="en">    <meta charset="UTF-8">    <title>title>    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />    <script  type="text/Javascript" src="http://localhost/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/MyService/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/MyService/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>

【ArcGIS for JS】 API 部署到本地Tomcat (1)

【ArcGIS for JS】地图初始化(2)

【ArcGIS for JS】Layers图层的理解(3)

【ArcGIS for JS】图层的控制(4)

【ArcGIS for JS】空间参考系的浅析(5)

【ArcGIS for JS】加载天地图(墨卡托投影)(6)

【ArcGIS for JS】Dojo在ArcGIS API For JS应用(7)

【ArcGIS for JS】设置范围extent(8)

【ArcGIS for JS】事件处理(9)

【ArcGIS for JS】动态图层(10)