基于OpenLayers的地图封装Javascript类定义

标签: openlayers 地图 封装 | 发表时间:2014-03-28 07:02 | 作者:hsg77
出处:http://blog.csdn.net


基于OpenLayers的地图封装Javascript类定义

MapCwgisClass.js

//web地图封装类
//MapCwgisClass类的定义
//vp:hsg,myk
//create date:2013-07-26
//类 原型定义
var Person = function () {
    this.m_Name = "good";
}
Person.prototype = {
    m_Name: '',
    getName: function () {
        return this.m_Name;
    }
}
//类 原型定义
var MapCwgisClass=function()
{
        //OpenLayers环境参数
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
        OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
        OpenLayers.INCHES_PER_UNIT["千米"] = OpenLayers.INCHES_PER_UNIT["km"];
        OpenLayers.INCHES_PER_UNIT["米"] = OpenLayers.INCHES_PER_UNIT["m"];
        OpenLayers.INCHES_PER_UNIT["英里"] = OpenLayers.INCHES_PER_UNIT["mi"];
        OpenLayers.INCHES_PER_UNIT["英寸"] = OpenLayers.INCHES_PER_UNIT["ft"];
        this.defaultFormat = 'image/png';
        //
        this.map=null;                      
}
MapCwgisClass.prototype={
    //属性
    wms_url:null,
    wms_url_getFeature:null,
    map_divid:null,
    map: null,
    currentClientPoint: null,
    currentClientMapPoint:null,
    m_CurrentTool:null,    
    ProxyHost:null,
    defaultFormat:null,
    defaultProjection:null,
    defaultBounds:null,
    vlayer_drawFeature:null,
    layer_Highlight:null,
    LayerList:null,
    //自定义的wms图层属性
    map_Raster:null,
    map_Cadastra:null,
    //
    //图层名称
    layer_DOM: "RFS_DOM",       //DOM层名;
    layer_XZQ: "RFS_XZQ",       //行政区层名
    layer_DX : "RFS_MZDW",        //其他地类层名
    layer_ZD : "RFS_CBD_ZD",    //宗地层名
    //新添加图层
    layer_ZD_LS:"RFS_CBD_LS",   //地块历鸣图层名称
    //方法    
    //初始化地图方法
    init:function()
    {    
        //OpenLayers.ProxyHost = 'GeoServerProxy.aspx?URL=';
        OpenLayers.ProxyHost =this.ProxyHost;	
        //
        //默认参数
        this.defaultProjection = "EPSG:2358";
        this.defaultBounds = new OpenLayers.Bounds(
            34602000.15, 3318000.3500000006,
            34609999.65, 3326999.8500000006);
	    var bounds = this.defaultBounds;
        //选项
	    var options = {
		    controls: [], //若添加编辑框就在[]中加上 new OpenLayers.Control.EditingToolbar(vlayer)
		    maxExtent: bounds,
		    maxResolution: 35.154296875,
		    projection: this.defaultProjection,
		    units: 'm',
		    allOverlays: false        //true代表允许叠加显示图层
	    };
        //初始化地图对象
	    this.map = new OpenLayers.Map(this.map_divid, options);
        map=this.map;  //给全局变量map赋值
        mapWrap = this; //给全局变量赋值 
        var t_LLPoint=new OpenLayers.LonLat(0, 0);
	    //this.setCenterPoint(t_LLPoint, 3);
        //放大到指定范围地图
	    //this.map.zoomToExtent(bounds);
        //    
	}, 
    setCenterPoint:function(openLayerLonLatPoint,Level)
    {
        if(this.map!=null)
        {
            this.map.setCenter(openLayerLonLatPoint,Level); 
        }
    },
    //创建wms图层
    createLayerWms:function(p_mapName,p_wms_url,p_layers)
    {
         var t_mapLayer = new OpenLayers.Layer.WMS(
                    p_mapName, p_wms_url,
				    {
					    layers: p_layers,
					    styles: '',
					    tiled: true,
					    srs: defaultProjection,
					    format: defaultFormat
				    },
				    {
					    singleTile: true, ratio: 1
				    }
        );
        return t_mapLayer;
    },
    //创建Vector图层
    createLayerVector:function(p_LayerName)
    {
        var t_layer_vector = new OpenLayers.Layer.Vector(p_LayerName);
        return t_layer_vector;
    },
    //创建查询图层
    createLayerQuery:function(p_QueryLayerName)
    {
        var t_querylayerName='查询图层';
        if(p_QueryLayerName!=null && p_QueryLayerName!="")
        {
            t_querylayerName=p_QueryLayerName;
        }
        var t_styleMap=new OpenLayers.StyleMap({ 
			    "default": {
				    strokeColor: "#FF0000",
				    strokeOpacity: 1,
				    fillColor: "#6699ff",
				    fillOpacity: 0.2
			    }
		    });
        var t_layer_Query = new OpenLayers.Layer.Vector(t_querylayerName, t_styleMap);
        return t_layer_Query;
    },
    //添加图层
    addLayer:function(pLayer)
    {
        if(this.map!=null)
        {
            this.map.addLayers([pLayer]);
        }
    },
    //添加图层集
    addLayers:function(pLayers)
    {
        if(this.map!=null)
        {
            this.map.addLayers([pLayers]);
        }
    },
    //添加地图系统常用工具控件
    //添加系统命令  控件 OK
    addSystemCommands:function()
    {
        //	this.map.addControl(new OpenLayers.Control.LayerSwitcher());
            //添加比例尺线
            var t_scaleline=new OpenLayers.Control.ScaleLine({ topOutUnits: "千米",
		        topInUnits: "米", bottomOutUnits: "英里", bottomInUnits: "英寸"
	        });t_scaleline.setMap(this.map);            
	        this.map.addControl(t_scaleline);
            //添加比例尺
            var t_scale=new OpenLayers.Control.Scale();t_scale.setMap(this.map);
	        this.map.addControl(t_scale);
            //添加鼠标点
            var t_mouseposition=new OpenLayers.Control.MousePosition();
            t_mouseposition.setMap(this.map);
	        this.map.addControl(t_mouseposition);
            //添加鹰眼图
            var t_ovmap=new OpenLayers.Control.LTOverviewMap();
            t_ovmap.setMap(this.map);
	        this.map.addControl(t_ovmap);
            //添加Zomm动画
            var t_zommAnimation=new OpenLayers.Control.LTZommAnimation();
            t_zommAnimation.setMap(this.map);
	        this.map.addControl(t_zommAnimation);
            //添加平移缩放条
            var t_panZoomBar=new OpenLayers.Control.PanZoomBar({
		        position: new OpenLayers.Pixel(2, 15)
	        });
            t_panZoomBar.setMap(this.map);
	        this.map.addControl(t_panZoomBar);
            //添加导航
            var t_navigation=new OpenLayers.Control.Navigation();
            t_navigation.setMap(this.map);
	        this.map.addControl(t_navigation);
    },
    addSystemCommands_normal:function()
    {
           //添加鼠标点
            var t_mouseposition=new OpenLayers.Control.MousePosition();
            t_mouseposition.setMap(this.map);
	        this.map.addControl(t_mouseposition);
            //添加Zomm动画
            var t_zommAnimation=new OpenLayers.Control.LTZommAnimation();
            t_zommAnimation.setMap(this.map);
	        this.map.addControl(t_zommAnimation);            
    },
    //添加测量命令  控件
    addMeasureCommands:function()
    {
	    //测量控制操作 
	    var sketchSymbolizers = {
		        "Point": {
			        graphicName: "cross",
			        graphicHeight: 8,
			        graphicWidth: 8,
			        fillColor: "#FF0000",
			        fillOpacity: 1,
			        strokeWidth: 0,
		        },
		        "Line": {
			        strokeWidth: 1.5,
			        strokeOpacity: 1,
			        strokeColor: "#0000FF"
		        },
		        "Polygon": {
			        strokeWidth: 1.5,
			        strokeOpacity: 1,
			        strokeColor: "#0000FF",
			        fillColor: "#ccccff",
			        fillOpacity: 0.3
		        }
	    };

	    var style = new OpenLayers.Style();
	    style.addRules([new OpenLayers.Rule({ symbolizer: sketchSymbolizers })]);
	    var styleMap = new OpenLayers.StyleMap({ "default": style });

	    var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
	    renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

	    var options = {
		    persist: true,
		    handlerOptions: {
			    style: "default",
			    layerOptions: {
				    renderers: renderer,
				    styleMap: styleMap
			    }
		    }
	    };
        //线,面测量
	    measureControls = {
		    line: new OpenLayers.Control.Measure(OpenLayers.Handler.Path, options),
		    polygon: new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, options)
	    };

	    var control;
	    for (var key in measureControls)
	    {
		    control = measureControls[key];
		    control.events.on({
			    "measure": handleMeasure,    //测量距离完成的时候
			    "measurepartial": handleMeasurePartial   //测量距离加入一个点的时候
		    });
		    this.map.addControl(control);
            this.LayerList.add(control);
	    }
    },
    //添加绘制要素的命令  点,线,面
    addDrawFeatureCommands:function()
    {
	    this.vlayer_drawFeature = new OpenLayers.Layer.Vector();
	    this.map.addLayer(vlayer_drawFeature);
	    drawControls = {
		    point: new OpenLayers.Control.DrawFeature(
			    this.vlayer_drawFeature, OpenLayers.Handler.Point),
		    line: new OpenLayers.Control.DrawFeature(
			    this.vlayer_drawFeature, OpenLayers.Handler.Path),
		    polygon: new OpenLayers.Control.DrawFeature(
			    this.vlayer_drawFeature, OpenLayers.Handler.Polygon)
	    };
	    for (var key in drawControls)
	    {
		    this.map.addControl(drawControls[key]);
            this.LayerList.add(drawControls[key]);
	    }
    },
    //添加面板
    addPanel:function()
    {
	    var panel = new OpenLayers.Control.Panel();
	    this.map.addControls(panel);
	    addPanelControls = {
		    zoomBox: new OpenLayers.Control.ZoomBox()
	    };
	    for (var key in addPanelControls)
	    {
		    this.map.addControl(addPanelControls[key]);        
	    }
    },
    //缩放到要素
    zoomToFeatures:function(features)
    {
        if(features==null||features=='undefined') return;
	    var left=0;
	    var top=0;
	    var right=0;
	    var bottom=0;
        //
	    for(i=0;i<features.length;i++)
	    {
		    var fea = features[i];
            if(fea.geometry!=null)
            {
		        var geoBound = fea.geometry.getBounds();
		        if(geoBound.left<left || left==0)
			        left = geoBound.left;
		        if(geoBound.top>top || top==0)
			        top = geoBound.top;
		        if(geoBound.right>right ||right==0)
			        right = geoBound.right;
		        if(geoBound.bottom<bottom||bottom==0)
			        bottom =geoBound.bottom;
            }
	    }
	    var zoomBounds = new OpenLayers.Bounds(
            left, bottom,
            right, top);

	    this.map.zoomTo(7);
        var t_LLpoint=this.getFeatureCenterLonLat(features[0]);
	    this.map.panTo(t_LLpoint);
    },
    //////////////////////////
    //统一获取要素中心点函数//
    //////////////////////////
    getFeatureCenterLonLat:function (fea){
        if(fea==null||fea=='undefined')
        { 
             return null;
        }
	    var bound = fea.geometry.getBounds();
	    var lon = (parseFloat(bound.right) - parseFloat(bound.left)) / 2 + parseFloat(bound.left);
	    var lat = (parseFloat(bound.top ) - parseFloat(bound.bottom)) / 2 + parseFloat(bound.bottom);
	    var lonlat = new OpenLayers.LonLat(lon,lat);
	    return lonlat;
    },/**/
    //长度单位、面积单位汉化
    UnitsToCHS:function (units)
    {
	    var unitsCHS = units;
	    switch (units.toLowerCase())
	    {
		    case "m":
			    unitsCHS = "米";
			    break;
		    case "km":
			    unitsCHS = "千米";
			    break;
	    }
	    return unitsCHS;
    },
    //当前正在执行的工具
    getCurrentTool:function()  
    {
         return m_CurrentTool;
    },
    setCurrentTool:function(p_tool)
    {
         if(m_CurrentTool!=null)
         {
             try
             {
                m_CurrentTool.deactivate();
             }
             catch(e){}
         }
         m_CurrentTool=p_tool;
         try
         {
            m_CurrentTool.activate();
         }
         catch(e){}         
    }, 
    CLASS_NAME: "MapCwgisClass"
};
//设置全局变量和初始化地图控件
//============================================================        
var t_p = new Person();
var t_t=t_p.getName();
//定义全局变量
var map=null;
var mapWrap=null;
//页面地图加载  //给全局变量赋值      
mapWrap = new MapCwgisClass();
mapWrap.wms_url = wms_url;
mapWrap.wms_url_getFeature = wms_url_getFeature;
mapWrap.map_divid = 'map';
mapWrap.ProxyHost = 'GeoServerProxy.aspx?URL=';
mapWrap.init();
mapWrap.addSystemCommands();  //加载常用的系统功能  
//============================================================  


作者:hsg77 发表于2014-3-27 23:02:53 原文链接
阅读:51 评论:0 查看评论

相关 [openlayers 地图 封装] 推荐:

基于OpenLayers的地图封装Javascript类定义

- - CSDN博客推荐文章
基于OpenLayers的地图封装Javascript类定义. //web地图封装类 //MapCwgisClass类的定义 //vp:hsg,myk //create date:2013-07-26 //类 原型定义 var Person = function () {. } } //类 原型定义 var MapCwgisClass=function() {.

OpenLayers 选中元素弹框

- - Web前端 - ITeye博客
已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

Openlayers中热力图的实现

- - CSDN博客推荐文章
本文讲述结合heatmap.js,在Openlayers中如何实现热力图. heatmap.js简介:. Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示. Heatmap.js 这个 JavaScript 库可以实现各种动态热力图的网页,帮助您研究和可视化用户的行为.

(转)JavaScript封装

- - CSDN博客Web前端推荐文章
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象. 但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢.

Disruptor封装

- - 开源软件 - ITeye博客
在数据交换场景,disruptor受到越来越多的欢迎. 下面是将原生disruptor封装成queue模型的代码,供参考. 抽象类Disruptor,提供pull、take等接口. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

Hoop:Hadoop HDFS的RESTFul封装

- Vent - NoSQLFan
Hoop是对Hadoop HDFS Proxy 的改良重写,为Hadoop HDFS提供了HTTP(S)的访问接口. 通过标准的HTTP协议访问你的HDFS系统. 在运行不同版本的HDFS之间进行数据交换(这克服了一些RPC方式因版本不同而产生的兼容性问题). 将对HDFS的操作置于防火墙的保护下.

javascript封装addClass()方法

- - 收集分享互联网资源!
//获取obj标签对象的class. //如果oClass为空则直接赋newClass. //1、判断当前标签里是否含有newClass,如果含有newClass则return跳出不赋值,避免反复赋同样的newClass. //2、如果不含有newClass,则在原来oClass的基础上添加新的newClass.

javascript封装drag()拖拽函数

- - 收集分享互联网资源!
拖拽效果虽然项目中很少使用,但不可否认其是一个很经典的效果(google产品使用的挺多的),下面整理了拖拽效果的代码框架. 里面解决兼容性的代码需要重点理解下:. 1、通过setCapture()与releaseCapture()解决IE浏览器下拖拽图片的bug,即图片拖拽过程中不跟随鼠标移动直接到达鼠标目标点;.

javascritp原生CSS封装函数

- - 收集分享互联网资源!
jQuery中css()使用起来是比较方便的,它即可以获取又可以设置选择元素的样式属性值. css("width")获得元素的属性值 css("width","100px")设置元素的属性值. 今天来探讨一下原生态的js是如何封装css函数,此封装的函数可获得可设置样式属性值. 一般我们获得元素的style属性值是通过element.style.attrbute来获得的,但问题在其只能获得行间样式,而无法获得非行间样式.

Spring对JDBC异常的封装

- - 编程语言 - ITeye博客
      Spring对JDBC异常的封装来自于《Expert One-on-One J2EE Design and Development》一书所持的观点. 书中指明jdbc使用单一java.lang.SQLException异常表示数据访问时发生的所有异常是一 个糟糕的设计. 在JDBC API 4.0以前的版本中,异常处理功能极其有限.