ArcGIS js 的一些小例子

<link rel="stylesheet"
      href="http://localhost:9090/arcgis_js_api/library/3.27/3.27/esri/css/esri.css">
<script type="text/javascript"
        src="http://localhost:9090/arcgis_js_api/library/3.27/3.27/init.js"></script>

<script>
    var visible = [], setLayerVisibility;

    require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/query", "dojo/dom", "dojo/on", "esri/layers/FeatureLayer",
            "esri/dijit/Legend","esri/layers/LabelClass","dojo/_base/Color","esri/symbols/Font","esri/symbols/TextSymbol","dojo/domReady!"],
        function (Map, ArcGISDynamicMapServiceLayer, query, dom, on, FeatureLayer,Legend,LabelClass,Color,Font,TextSymbol) {
            var map = new Map("map");
            var MapServier = "http://192.168.1.111:6080/arcgis/rest/services/liuyangnew/MyMapService/MapServer";
            var layer = new ArcGISDynamicMapServiceLayer(MapServier);
            map.addLayer(layer);


            //图层控制
            if (layer.loaded) {
                buildLayerList(layer);
            } else {
                dojo.connect(layer, "onLoad", buildLayerList);
            }

            function getChildrenNodes(parentnodes, node) {
                for (var i = parentnodes.length - 1; i >= 0; i--) {

                    var pnode = parentnodes[i];
                    //如果是父子关系，为父节点增加子节点，退出for循环
                    if (pnode.id == node.pid) {
                        pnode.state = "closed";//关闭二级树
                        pnode.children.push(node);
                        return;
                    } else {
                        //如果不是父子关系，删除父节点栈里当前的节点，
                        //继续此次循环，直到确定父子关系或不存在退出for循环
                        parentnodes.pop();
                    }
                }
            }

            function buildLayerList(layer) {
                //构建图层树形结构
                var layerinfos = layer.layerInfos;
                var treeList = [];//jquery-easyui的tree用到的tree_data.json数组
                var parentnodes = [];//保存所有的父亲节点
                var root = {"id": "rootnode", "text": "所有图层", "children": []};//增加一个根节点
                var node = {};
                if (layerinfos != null && layerinfos.length > 0) {

                    for (var i = 0, j = layerinfos.length; i < j; i++) {
                        var info = layerinfos[i];
                        if (info.defaultVisibility) {
                            visible.push(info.id);
                        }
                        //node为tree用到的json数据
                        node = {
                            "id": info.id,
                            "text": info.name,
                            "pid": info.parentLayerId,
                            "checked": info.defaultVisibility ? true : false,
                            "children": []
                        };
                        if (info.parentLayerId == -1) {
                            parentnodes.push(node);
                            root.children.push(node);
                        } else {
                            getChildrenNodes(parentnodes, node);
                            parentnodes.push(node);
                        }
                    }
                }
                treeList.push(root);
                //jquery-easyui的树
                $('#toc').tree({
                    data: treeList,
                    checkbox: true, //使节点增加选择框
                    onCheck: function (node, checked) {//更新显示选择的图层
                        var visible = [];

                        var nodes = $('#toc').tree("getChecked");
                        dojo.forEach(nodes, function (node) {
                            visible.push(node.id);
                        });
                        //if there aren't any layers visible set the array to be -1
                        if (visible.length === 0) {
                            visible.push(-1);
                        }
                        layer.setVisibleLayers(visible);
                    }
                });
            }

            //属性查询
            query(dom.byId("chaxun"))
                .on(
                    "click",
                    function QueryFeatureLayer(event) {
                        var queryName = document
                            .getElementById("txtName").value;
                        if (queryName == "")
                            return;
                        var whereStr = " qsxz  like '%"
                            + queryName + "%'";
                        featureLayer
                            .setDefinitionExpression(whereStr);
                        dojo.connect(featureLayer, "onUpdateEnd",
                            MapUpdateEnd);
                    });
            //定义显示模式
            var ftLayer = {
                outFields: ["*"]
            };
            var featureLayer = new FeatureLayer(
                "http://192.168.1.111:6080/arcgis/rest/services/liuyangnew/MyMapService/MapServer/2",
                ftLayer);
            featureLayer.isVisible = true;
            map.addLayer(featureLayer);
            featureLayer.setDefinitionExpression("qsxz  like ''");

            function MapUpdateEnd(error) {

                if (featureLayer.graphics.length > 0) {


                    map.graphics.clear();
                    htmls = "";
                    var htmls = "<table style=\"width: 100%\">";
                    htmls = htmls + "<tr>";
                    htmls = htmls + "<tr bgcolor=\"#E0E0E0\"><td> 图层 </td><td> 名 称</td></tr>";
                    htmls = htmls + "</tr>";
                    for (var i = 0; i < featureLayer.graphics.length; i++) {
                        var graphic = featureLayer.graphics[i];
                        var PoiName = graphic.attributes["qsxz"];
                        var poibsm = graphic.attributes["bsm"];
                        if (i % 2 == 1) {
                            htmls = htmls + "<tr  bgcolor=\"#E0E0E0\"><td>" +
                                PoiName + "</td><td>" + poibsm + "</td></tr>";
                        } else {
                            htmls = htmls + "<tr><td>" + PoiName + "</td><td>"
                                + poibsm + "</td></tr>";
                        }
                    }
                    htmls = htmls + "</table>";
                    document.getElementById("divShowResult1").innerHTML = htmls;

                } else {
                    document.getElementById("divShowResult1").innerHTML = "没有此信息";
                }
            }
            //图例
            var legendPar = {
                map : map,
                arrangment : Legend.ALIGN_RIGHT,
                autoUpdate : true,
                respectCurrentMapScale : true
                //自动更新
            };
            var legendDijit = new Legend(legendPar, "legendDiv");
            legendDijit.startup();

        });
</script>

Home 绘制图形 Help About

    <div data-options="iconCls:'icon-undo'">Undo</div>
    <div data-options="iconCls:'icon-redo'">Redo</div>
    <div class="menu-sep"></div>
    <div>Cut</div>
    <div>Copy</div>
    <div>Paste</div>
    <div class="menu-sep"></div>
    <div>
        <span>Toolbar</span>
        <div>
            <div>Address</div>
            <div>Link</div>
            <div>Navigation Toolbar</div>
            <div>Bookmark Toolbar</div>
            <div class="menu-sep"></div>
            <div>New Toolbar...</div>
        </div>
    </div>
    <div data-options="iconCls:'icon-remove'">Delete</div>
    <div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
    <div>Help</div>
    <div>Update</div>
    <div>About</div>
</div>
<div id="mm3" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left">
    <img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
    <p style="font-size:14px;color:#444;">Try jQuery EasyUI to build your modern, interactive, javascript
        applications.</p>
</div>

objectid bsm qsxz

查询

    </div>
    <div title="结果面板" style="padding:10px">
        <div id="divShowResult1"></div>
    </div>
    <div title="图例">
        <!-- 图例 -->
        <div id="legendDiv"></div>
    </div>
</div>

        </div>

    </div>
    <div title="选项卡2" style="padding:10px">
        卡2
    </div>

    <div title="帮助" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
        帮助
    </div>
</div>