您的位置:首页 > Web前端 > JavaScript

基于Arcgis Server的地图封装Javascript类定义

2014-03-28 00:00 429 查看

基于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);
//============================================================



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: