基於Arcgis Server的地類封裝Javascript類定義



基於Arcgis Server的地類封裝Javascript類定義

MapCwgisAOClass.js

//web地圖封裝類//MapCwgisAOClass類的定義//vp:hsg//create date:2013-09-10//調用頁面需要載入庫dojo.require("esri.map");//類 原型定義var MapCwgisAOClass = function () {    //環境參數        this.map = null;    this.LayerList = [];    this.Layers_visible=[];}MapCwgisAOClass.prototype = {    //屬性    ProxyHost: null,    wms_url: null,    map_divid: null,    map_toc_divid: null,    map: null,    LayerList: null,    //    navToolbar: null,    navDraw: null,    //當前正在執行的工具    m_CurrentTool: null,    //    //初始化地圖方法    init: function() {        this.map = new esri.Map(this.map_divid, {            logo: false,            maxScale: 500,            minScale: 5000000        });        map = this.map;  //給全域變數map賦值               mapWrap = this; //給全域變數賦值         //載入圖層        var ms_url = this.wms_url;        this.LayerList = new esri.layers.ArcGISDynamicMapServiceLayer(ms_url);        dojo.connect(this.LayerList, "onLoad", this.event_loadLayerList);  //添加事件        this.map.addLayer(this.LayerList);        //        var china_ms_url = "http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaCities_Community_BaseMap_CHN/BeiJing_Community_BaseMap_CHN/MapServer";        //this.LayerList = new esri.layers.ArcGISTiledMapServiceLayer(china_ms_url);        //dojo.connect(this.LayerList, "onLoad", this.event_loadLayerList);  //添加事件        //this.map.addLayer(this.LayerList);        //        dojo.connect(this.map, "onLoad", this.event_onLoad);        this.map.infoWindow.resize(500, 300);        //        //dojo.connect(this.map, "onMouseMove", event_showCoordinates); //註冊事件，注意事件名大小寫敏感        dojo.connect(this.map, "onClick", this.event_identify);        //初始化導航工具列        this.navToolbar = new esri.toolbars.Navigation(this.map);        dojo.connect(this.navToolbar, "onExtentHistoryChange", this.event_extentHistoryChangeHandler);        //初始化製作工具列        this.navDraw = new esri.toolbars.Draw(this.map);        dojo.connect(this.navDraw, "onDrawEnd", this.event_draw);        //        //設定代理        esri.config.defaults.io.proxyUrl = this.ProxyHost; // "ProxyPage/proxy.aspx";        esri.config.defaults.map.sliderLabel = false;        esri.config.defaults.map.slider = { right: "10px", top: "10px", width: "20px", height: "100px" };        //        //window.alert(this.map.spatialReference);        //        map = this.map;  //給全域變數map賦值               mapWrap = this; //給全域變數賦值     },    //用來記錄顯示圖層的id用    Layers_visible: null,    //載入地圖名稱到右邊的列表中   事件中只能調用全域變數對象如:map,mapWrap等    event_loadLayerList: function(layers) {        var html = "";        //擷取圖層資訊        var infos = layers.layerInfos;        for (var i = 0; i < infos.length; i++) {            var info = infos[i];            //圖層預設顯示的話就把圖層id添加到visible            if (info.defaultVisibility) {                mapWrap.Layers_visible.push(info.id);            }            //輸出圖層列表的html            html = html + "<div><input id='" + info.id + "' name='layerList' class='listCss' type='checkbox' value='checkbox' onclick='setLayerVisibility()' " + (info.defaultVisibility ? "checked" : "") + " />" + info.name + "</div>"        }        //設定可視圖層        mapWrap.LayerList.setVisibleLayers(mapWrap.Layers_visible);        //在右邊顯示圖層名列表        dojo.byId(mapWrap.map_toc_divid).innerHTML = html;    },    //設定圖層是否可視的方法    setLayerVisibility: function() {        //用dojo.query擷取css為listCss的元素數組        var inputs = dojo.query(".listCss");        mapWrap.Layers_visible = [];        //對checkbox數組進行變數把選中的id添加到visible        for (var i = 0; i < inputs.length; i++) {            if (inputs[i].checked) {                mapWrap.Layers_visible.push(inputs[i].id);            }        }        //設定可視圖層        mapWrap.LayerList.setVisibleLayers(mapWrap.Layers_visible);    },    event_onLoad: function() {        /*        map.infoWindow.resize(500, 300);        //        //dojo.connect(map, "onMouseMove", event_showCoordinates); //註冊事件，注意事件名大小寫敏感        dojo.connect(map, "onClick", this.event_identify);        //初始化導航工具列        mapWrap.navToolbar = new esri.toolbars.Navigation(map);        dojo.connect(mapWrap.navToolbar, "onExtentHistoryChange", this.event_extentHistoryChangeHandler);        //初始化製作工具列        mapWrap.navDraw = new esri.toolbars.Draw(map);        dojo.connect(mapWrap.navDraw, "onDrawEnd", this.event_draw);        //        //設定代理        //esriConfig.defaults.io.proxyUrl = "ProxyPage/proxy.aspx";        esriConfig.defaults.map.sliderLabel = false;        esriConfig.defaults.map.slider = { right: "10px", top: "10px", width: "20px", height: "100px" };        //        //window.alert(map.SpatialReference);        //        */    },    event_draw: function(geometry) {        var symbol;        var graphic = null;        switch (geometry.type) {            case "point":                {                    var m_outline = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1)                    symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10, m_outline, new dojo.Color([0, 255, 0, 0.25]));                    graphic = new esri.Graphic(geometry, symbol);                }            case "polyline":                {                    symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);  //window.alert("line");                                graphic = new esri.Graphic(geometry, symbol);                    break;                }            case "polygon":                {                    symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));                    graphic = new esri.Graphic(geometry, symbol);                    break;                }            case "FREEHAND_POLYLINE":                {                    break;                }            default:                {                    liangsuan_type = null;                    break;                }        }        //調用自己寫的演算法計算距離        //cal_Distance();               //geometryService.project([graphic], new esri.SpatialReference({ "wkid": 4326 })); //4326  32618        //geometryService.lengths(graphic);        map.graphics.add(graphic);    },    event_identify: function(evt) {        var mp = evt.mapPoint;        var screenPt = map.toScreen(mp);        var str = "螢幕座標(x,y):(" + screenPt.x + "," + screenPt.y + ") 地圖座標(x,y):(" + mp.x + ", " + mp.y + ")";        //        map.infoWindow.setTitle("Identify");        map.infoWindow.setContent(str);        map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));    },    event_extentHistoryChangeHandler: function() {        //dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();        //dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();    },    //隱藏座標位置提示框    hide_infoWindow: function() {        if (this.map.infoWindow == null) return;        if (this.map.infoWindow.isShowing) {            this.map.infoWindow.hide();        }    },    //清除屏功能    js_map_clear: function() {        if (this.map.graphics != null) {            this.map.graphics.clear();        }        this.hide_infoWindow();    },    //當前正在執行的工具        getCurrentTool: function() {        return this.m_CurrentTool;    },    setCurrentTool: function(p_tool) {        if (this.m_CurrentTool != null) {            try {                this.m_CurrentTool.deactivate();            }            catch (e) { }        }        this.m_CurrentTool = p_tool;        try {            this.m_CurrentTool.activate();        }        catch (e) { }    },    //方法    CLASS_NAME: "MapCwgisAOClass"};//設定全域變數和初始化地圖控制項//============================================================ //定義全域變數var map = null;var mapWrap = null;//頁面地圖載入  //給全域變數賦值      mapWrap = new MapCwgisAOClass();mapWrap.wms_url = wms_url;mapWrap.map_divid = "map";mapWrap.map_toc_divid = "toc";mapWrap.ProxyHost = 'proxy.ashx';//function g_init() {    mapWrap.init();}dojo.addOnLoad(g_init); //============================================================