~$ 存档

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

 

主页代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图形查询属性</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.9/"></script>
    <script src="Identify.js"></script>    
</head>
<body class="claro">
    <button data-dojo-type="dijit/form/Button"></button>
    <button data-dojo-type="dijit/form/Button">线</button>
    <button data-dojo-type="dijit/form/Button">多边形</button>
    <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
    
    <!-- info window tabs -->
    <div id="tabs" data-dojo-type="dijit/layout/TabContainer" style="width:385px;height:150px;">
      <div id="layer2Tab" data-dojo-type="dijit/layout/ContentPane" title="州"></div>
      <div id="layer1Tab" data-dojo-type="dijit/layout/ContentPane" title="河流"></div>
      <div id="layer0Tab" data-dojo-type="dijit/layout/ContentPane" title="城市"></div>
    </div>
</body>
</html>

Identify.js代码:

var map, identifyTask, identifyParams;
var pointSym, lineSym, polygonSym;
var layer2results, layer1results, layer0results;

require(["dojo/parser", "dijit/registry", "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/draw",
    "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color",
    "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/geometry/screenUtils",
    "dijit/form/Button", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/domReady!"],
    function (parser, registry, Map, ArcGISDynamicMapServiceLayer, Draw,
        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color,
        IdentifyTask, IdentifyParameters, screenUtils) {

        parser.parse();

        map = new Map("mapDiv");
        //var url = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer";
        var url = "http://localhost:6080/arcgis/rest/services/bluechina/MapServer";
        var agoLayer = new ArcGISDynamicMapServiceLayer(url);
        map.addLayer(agoLayer);
        map.on("load", initIdentify);

        var redColor = new Color([255, 0, 0]);
        var halfFillYellow = new Color([255, 255, 0, 0.5]);
        pointSym = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 10,
                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, redColor, 1),
                    halfFillYellow);
        lineSym = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, redColor, 2);
        polygonSym = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, redColor, 2),
                    halfFillYellow);        

        map.infoWindow.on("show", function () {
            registry.byId("tabs").resize();
        });

        var tb = new Draw(map);
        tb.on("draw-end", doIdentify);

        registry.forEach(function (d) {
            if (d.declaredClass === "dijit.form.Button") {
                d.on("click", activateTool);
            }
        });

        function activateTool() {
            var tool = null;
            switch (this.label) {
                case "点":
                    tool = "POINT";
                    break;
                case "线":
                    tool = "POLYLINE";
                    break;
                case "多边形":
                    tool = "POLYGON";
                    break;
            }
            tb.activate(Draw[tool]);
            map.hideZoomSlider();
        }

        function initIdentify(evt) {
            // 实例化IdentifyTask
            identifyTask = new IdentifyTask(url);
            // IdentifyTask参数设置
            identifyParams = new IdentifyParameters();
            // 冗余范围
            identifyParams.tolerance = 3;
            // 返回地理元素
            identifyParams.returnGeometry = true;
            // 进行Identify的图层
            identifyParams.layerIds = [2, 1, 0];
            // 进行Identify的图层为全部
            identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;

            // 设置infoWindow的大小
            evt.map.infoWindow.resize(415, 200);
            // 设置infoWindow的标题头
            evt.map.infoWindow.setTitle("Identify结果");
            evt.map.infoWindow.setContent(registry.byId("tabs").domNode);
        }

        // 进行Identify
        function doIdentify(evt) {
            // 清除上一次的高亮显示
            map.graphics.clear();
            // Identify的geometry
            identifyParams.geometry = evt.geometry;
            // Identify范围
            identifyParams.mapExtent = map.extent;
            identifyTask.execute(identifyParams, function (idResults) {
                addToMap(idResults, evt.geometry);
            });
        }

        // 在infoWindow中显示Identify结果
        function addToMap(idResults, geometry) {
            layer2results = { displayFieldName: null, features: [] };
            layer1results = { displayFieldName: null, features: [] };
            layer0results = { displayFieldName: null, features: [] };
            for (var i = 0, il = idResults.length; i < il; i++) {
                var idResult = idResults[i];
                if (idResult.layerId === 2) {
                    if (!layer2results.displayFieldName) {
                        layer2results.displayFieldName = idResult.displayFieldName;
                    }
                    layer2results.features.push(idResult.feature);
                } else if (idResult.layerId === 1) {
                    if (!layer1results.displayFieldName) {
                        layer1results.displayFieldName = idResult.displayFieldName;
                    }
                    layer1results.features.push(idResult.feature);
                } else if (idResult.layerId === 0) {
                    if (!layer0results.displayFieldName) {
                        layer0results.displayFieldName = idResult.displayFieldName;
                    }
                    layer0results.features.push(idResult.feature);
                }
            }
            registry.byId("layer2Tab").setContent(layerTabContent(layer2results, "layer2results"));
            registry.byId("layer1Tab").setContent(layerTabContent(layer1results, "layer1results"));
            registry.byId("layer0Tab").setContent(layerTabContent(layer0results, "layer0results"));

            // 设置infoWindow显示
            var firstPt;
            if (geometry.type == "point")
                firstPt = geometry;
            else
                firstPt = geometry.getPoint(0, 0);
            var screenPoint = screenUtils.toScreenPoint(map.extent, map.width, map.height, firstPt);
            map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(screenPoint));
        }

        function layerTabContent(layerResults, layerName) {
            var content = "<i>选中要素数目为:" + layerResults.features.length + "</i>";
            switch (layerName) {
                case "layer2results":
                    content += "<table border='1'><tr><th>ID</th><th>州名</th><th>面积</th></tr>";
                    for (var i = 0, il = layerResults.features.length; i < il; i++) {
                        content += "<tr><td>" + layerResults.features[i].attributes['FID'] + " <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(显示)</a></td>";
                        content += "<td>" + layerResults.features[i].attributes['NAME'] + "</td>";
                        content += "<td>" + layerResults.features[i].attributes['AREA'] + "</td>";
                    }
                    content += "</tr></table>";
                    break;
                case "layer1results":
                    content += "<table border='1'><tr><th>ID</th><th>名称</th></tr>";
                    for (var i = 0, il = layerResults.features.length; i < il; i++) {
                        content += "<tr><td>" + layerResults.features[i].attributes['FID'] + " <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(显示)</a></td>";
                        content += "<td>" + layerResults.features[i].attributes['NAME'] + "</td>";
                    }
                    content += "</tr></table>";
                    break;
                case "layer0results":
                    content += "<table border='1'><tr><th>ID</th><th>形状</th><th>省名</th><th>面积</th></tr>";
                    for (var i = 0, il = layerResults.features.length; i < il; i++) {
                        content += "<tr><td>" + layerResults.features[i].attributes['FID'] + " <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(显示)</a></td>";
                        content += "<td>" + layerResults.features[i].attributes['Shape'] + "</td>";
                        content += "<td>" + layerResults.features[i].attributes['NAME'] + "</td>";
                        content += "<td>" + layerResults.features[i].attributes['AREA'] + "</td>";
                    }
                    content += "</tr></table>";
                    break;
            }
            return content;
        }
});

// 高亮显示选中元素
function showFeature(feature) {
    map.graphics.clear();
    var symbol;
    // 将几何对象加入到地图中
    switch (feature.geometry.type) {
        case "point":
            symbol = pointSym;
            break;
        case "polyline":
            symbol = lineSym;
            break;
        case "polygon":
            symbol = polygonSym;
            break;
    }

    feature.setSymbol(symbol);
    map.graphics.add(feature);
}
View Code

 

posted on 2017-07-26 01:36  LuoTian  阅读(2918)  评论(0编辑  收藏  举报