arcgis api for js3.16做的一些簡單功能

使用了jquery easyUI和arcgis api for js3.16離線API，地圖服務是自己用arcgis server10.1發布的，代碼如下：

 

  var map;
 
        require([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/FeatureLayer",
            "esri/dijit/OverviewMap",
            "dojo/parser",
            "esri/InfoTemplate",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/tasks/IdentifyTask",
            "esri/tasks/IdentifyParameters",
            "esri/dijit/Popup",
            "dojo/_base/array",
            "esri/Color",
            "dojo/dom-construct",
            "esri/dijit/Measurement",
            "dojo/dom",
            "esri/dijit/Search",
            "dojo/domReady!"
        ], function (Map, Tiled,FeatureLayer,OverviewMap,
                     parser,InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
                     SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
                     arrayUtils, Color, domConstruct,Measurement,dom,Search) {
 
            var identifyTask, identifyParams;var mapclick;
 
            var popup = new Popup({
                <!-- Popup是用來查詢的窗口類，支持改變被選中物體的顏色等狀態-->
                fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
            }, domConstruct.create("div"));
            parser.parse();
            <!--設置地圖的信息窗口 -->
 
            map = new Map("map", {
                infoWindow: popup,
                nav: false,//8個pan 箭頭
                slider: false,//左上的縮放 +/-;
                logo: false//右下的esri logo
            });
            var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/tilemap/tiledmap/MapServer");
            map.addLayer(tiled);
            var parcelsURL = "http://localhost:6080/arcgis/rest/services/dynamic/MapServer";
            var feature=new FeatureLayer("http://localhost:6080/arcgis/rest/services/dynamic/FeatureServer");
            <!-- 加載矢量化地圖-->
            map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL
            ));
            map.on("load",doh);
            <!--地圖首次加載完成后執行-->
            function doh() {
                Coord();//顯示坐標
                measure();//測距
                togglebutton();//顯隱測距按鈕
                searchi();
            }
            <!--ID點查詢-->
            function searchi() {
                var search = new Search({
                    sources: [{
                        featureLayer: new FeatureLayer("http://localhost:6080/arcgis/rest/services/dynamic/FeatureServer/0", {
                            outFields: ["*"],
                            //searchFields: ["Code"],
                            infoTemplate: new InfoTemplate("管點", "編號: ${OBJECTID} <br/>類型：${Code}<br/>建設年代：${SDate}")
                        }),
                        exactMatch: true,//精確查找
                        outFields: ["OBJECTID","Code","SDate"],
                        searchFields: ["OBJECTID"],//查找的關鍵字
                        displayField: "OBJECTID",
                        suggestionTemplate: "${OBJECTID}: ${SDate}",
                        name: "管點",
                        placeholder: "例如: 1",//搜索提示
                        enableSuggestions: true
                    }],
                    map: map
                }, "search");
                search.hide();
                document.getElementById("checkbox2").addEventListener("change", function () {
                    if (this.checked) {
                        search.startup();
                        search.show();
                    } else {
                        search.hide();
                    }
                });
 
 
            }
            <!--ID點查詢-->
            <!--測距-->
            function togglebutton() {
                $(document).ready(function () {
                    $("#measurementDiv").hide();
                    $("#measure").click(function () {
                        $("#measurementDiv").toggle();
                    })
                })
            }
            function measure() {
                var measurement=new Measurement({map:map},dom.byId("measurementDiv"));
                measurement.startup();
            }
            <!--測距-->
            <!--顯示坐標-->
            function Coord() {
                map.on("mouse-move", showCoordinates);
                map.on("mouse-out", hideCoordinates);
                function showCoordinates(evt)
                {
                    var mp = evt.mapPoint;
                    $(document).ready(function () {
                        $("#info").text(mp.x.toFixed(4)+","+mp.y.toFixed(4));
                    })
                }
                function hideCoordinates(evt)
                {
                    var mp = evt.mapPoint;
                    $(document).ready(function () {
                        $("#info").text("");
                    })
                }
            }
            <!--顯示坐標-->
 
            <!--屬性查詢-->
            document.getElementById("checkbox1").addEventListener("change", function () {
                if (this.checked) {
                    mapready()
                } else {
                    mapclick.remove();
                }
            });
            function mapready() {
                mapclick= map.on("click", executeIdentifyTask);
                //添加地圖點擊事件
                identifyTask = new IdentifyTask(parcelsURL);
                //實例化IdentifyTask類
                identifyParams = new IdentifyParameters();
                identifyParams.tolerance = 3;
                //鼠標點擊的容錯度
                identifyParams.returnGeometry = true;
                identifyParams.layerIds = [0, 1];
                //設置參與查詢的圖層的ID
                identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
                identifyParams.width = map.width;
                identifyParams.height = map.height;
            }
            function executeIdentifyTask(event) {
                identifyParams.geometry = event.mapPoint;
                //鼠標點擊事件的處理
                identifyParams.mapExtent = map.extent;
 
                var deferred = identifyTask
                        .execute(identifyParams)
                        .addCallback(function (response) {
                            // response is an array of identify result objects
                            // Let's return an array of features.
                            return arrayUtils.map(response, function (result) {
                                var feature = result.feature;
                                var layerName = result.layerName;
 
                                feature.attributes.layerName = layerName;
                                //設置不同的圖層，不同點的處理
                                if (layerName === 'feature.SDE.Point') {
                                    var taxParcelTemplate = new InfoTemplate("管點信息",
                                            "編號: ${OBJECTID} <br/>類型：${Code}<br/>建設年代：${SDate}");
                                    feature.setInfoTemplate(taxParcelTemplate);
                                    //設置查找對象的信息窗口
                                }
                                else if (layerName === 'feature.SDE.Line') {
                                    var buildingFootprintTemplate = new InfoTemplate("管線信息",
                                            "編號: ${OBJECTID} <br/>管徑：${PSize}<br/>所在道路:${Road}<br/>建設年代：${SDate}");
                                    feature.setInfoTemplate(buildingFootprintTemplate);
                                }
                                return feature;
                            });
                        });
 
                // InfoWindow expects an array of features from each deferred
                // object that you pass. If the response from the task execution
                // above is not an array of features, then you need to add a callback
                // like the one above to post-process the response and return an
                // array of features.
                map.infoWindow.setFeatures([deferred]);
                map.infoWindow.show(event.mapPoint);
 
            }
            <!--屬性查詢-->
            <!--鷹眼圖-->
            var overviewMapDijit = new OverviewMap({
                map: map,
                visible: true,
                attachTo: "bottom-right",
                color: " #D84E13",
                opacity: .40
            });
            overviewMapDijit.startup();
            overviewMapDijit.hide();
            var overbutton = document.getElementById("checkbox");
            overbutton.addEventListener("change", function () {
                if (this.checked) {
                    overviewMapDijit.show();
                } else {
                    overviewMapDijit.hide();
                }
            });
            <!--鷹眼圖-->
 
        });

 

功能如下圖：

本文轉自：https://blog.csdn.net/gisuuser/article/details/51248531