OpenLayers学习笔记2——坐标转换问题

参照别人的添加marker的demo来改造时,发现无论怎样更改经纬度,都是停留在同一个位置。过了一两天突然想起可能是坐标参考的问题,尝试搜了一下,果然是这个问题。问题是这样子的:

WMTS中地图的坐标参考系是102100(具体是哪个不清楚),如下图所示:

而我在初始化地图时设置的参数如下图所示:projection属性设置的是‘EPSG:102100’,displayProjection属性设置的是‘EPSG:4326’,也即经纬度显示。

projection

{String} Set in the map options to specify the default projection for layers added to this map.  When using a projection other than EPSG:4326 (CRS:84, Geographic) or EPSG:3857 (EPSG:900913, Web Mercator), also set
maxExtent, maxResolution or resolutions.  Default is “EPSG:4326”.  Note that the projection of the map is usually determined by that of the current baseLayer (see baseLayer and getProjectionObject).

displayProjection

{OpenLayers.Projection}
Requires proj4js support for projections other than EPSG:4326 or EPSG:900913/EPSG:3857.  Projection used by several controls to display data to user.  If this property is set, it will be set on any control which has a null displayProjection property at the
time the control is added to the map.

因此如果要利用经纬度进行定位标记的话,需要进行坐标转换,即EPSG:4326—>EPSG:102100,主要用到OpenLayers.LonLat的transform函数,代码如下:

//坐标转换
function corTransform(lon, lat) {
    var proj = new OpenLayers.Projection("EPSG:4326");
    var lonlat = new OpenLayers.LonLat(lon, lat);
    lonlat.transform(proj, this.map.getProjectionObject());
    return lonlat;

}

OpenLayers.LonLat的transform函数代码:

	/**
	 * APIMethod: transform
	 * Transform the LonLat object from source to dest. This transformation is
	 *    *in place*: if you want a *new* lonlat, use .clone() first.
	 *
	 * Parameters:
	 * source - {<OpenLayers.Projection>} Source projection.
	 * dest   - {<OpenLayers.Projection>} Destination projection.
	 *
	 * Returns:
	 * {<OpenLayers.LonLat>} Itself, for use in chaining operations.
	 */
	transform : function (source , dest) {
		var point = OpenLayers.Projection.transform(
			{'x' : this.lon , 'y' : this.lat} , source , dest);
		this.lon = point.x;
		this.lat = point.y;
		return this;
	} ,

通过查看源代码会发现它调用的是OpenLayers.Projection的transform方法,有兴趣的可以一步一步看到转换的源码,这里就不赘述了

时间: 2024-07-28 18:38:47

OpenLayers学习笔记2——坐标转换问题的相关文章

OpenLayers学习笔记4——使用jQuery UI实现测量对话框

OpenLayers学习最好的方式就是跟着其自带的示例进行学习,另外对web前端的开发设计要了解,慢慢积累,这样在一般的小项目中应该是足够用了.本篇参照量测demo实现对话框形式的量测,抛砖引玉,通过这个功能,后面的查询.定位等基于对话框的形式就很容易实现了.先看下效果图: 长度测量: 面积测量: 代码基本都是demo里的代码,就不贴出来了.这里需要注意的问题是,在关闭窗口的时候一定要使measureTools   deactive //测量 $("#Measure").click(f

OpenLayers学习笔记3——使用jQuery UI美化界面设计

PC端软件在开发是有较多的界面库可以选择,比如DevExpress.BCG.DotNetBar等,可以很方便快捷的开发出一些炫酷的界面,最近在学习OpenLayers,涉及到web前端开发,在设计界面时刚开始不熟悉,设计的很丑,后来参照ArcGIS在线体验中心的demo以及对web前端界面设计库的调研,最终采用jQuery UI来美化界面(还有比较强大的Dojo).先来看下效果: 这里说下地图与影像切换两个按钮的实现,其他的都是一样的方式: CSS文件: #mapViewButton { wid

OpenLayers学习笔记5——使用jQuery UI实现查询并标注(UI篇)

最近事情很多,老板给的压力也很大,经常出差,另外项目和个人研究还都要跟上,本月要交论文,还要写专利,只能抽时间来学习其他的东西了.关于OpenLayers的在博客中不会写太多具体的实现(网上有很多openlayers的博客,关于加载wms.标记.量测的,我这里就不再重复了),只是记录自己的开发学习经验和一些需要注意的问题,真正做开发的都知道,要想学好开发只能通过自己默默的多磨..关于WW的学习和开发已经搁置了好久了,等过去这段时间,打算好好学一下jogl,争取做一些粒子模拟出来,另外打算采用rc

openlayers 学习笔记一

1. 创建地图,加载控件 var map = new OpenLayers.Map("map", { projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326") }); map.addControl(new OpenLayers.Control.Permalink()); map.ad

OpenLayers学习笔记9——使用servlet与jquery-ui实现自动提示输入

做软件都要从用户的角度来做,怎么样让用户输入的更少,体验更好,我们就应该怎么来做,也就是需求驱动,客户都是大爷!题外话说完了,步入正题,本文实现在查询时输入查询条件时,自动提示数据库中包含改值所有记录(注意,我这里用的是包含,not start,not end,这是跟mysql的模糊查询相关的),看下实现效果: 1.使用jquery ui的autocomplete控件 jQuery UI Autocomplete是jQuery UI的自动完成组件它支持本地的Array/JSON数组.通过ajax

OpenLayers学习笔记10——datagrid双击缩放指定点

这里实现gis里最常用的功能:缩放至图层(或者缩放至要素),实现效果如下: 这个实现就很简答了,主要用到的是datagrid的双击事件,其api是这么描述的: 那么,只要获取双击行的经纬度,然后利用map的setCenter或zoomto方法就可以了.代码如下: onDblClickRow: function(rowIndex, rowData){ var lat = rowData.schoolLat; var lon = rowData.schoolLon; var lonlat = cor

OpenLayers学习笔记6——使用jQuery UI实现查询并标注(功能实现篇)

本篇博客接上篇是关于OpenLayers的地图标注及弹出窗(marker+popup),先来看下效果图: 下面给出代码,都写了注释,不做过多解释了: ///添加标记 function addMarke(x, y, attribute) { //设置marker样式 var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); style_mark.graphicWidth = 64

openlayers 学习笔记之1

1. 为Web Gis客户端开发的javascript 框架 百度文库中的教程:入门经典> 1) 初始化map: map = new OpenLayers.Map(mapContainerName, { controls: [new OpenLayers.Control.PanZoomBar({ zoomWorldIcon: true, position: new OpenLayers.Pixel(5, 22) }), new OpenLayers.Control.Navigation(), n

OpenLayers学习笔记1——实现WMTS的逐级无缝缩放

在内网部署应用时,将下载的地图发布为WMTS服务,可以提升地图访问速度,并可以通过设置相关参数实现不同地图的无缝缩放(世界---中国----省---市),效果图如下所示: 主要需要设置不同图层的最大和最小分辨率(maxResolution,minResolution)属性,然后通过几次调试以达到最佳效果 代码如下: //GSM矢量全球切片 GSMapEarth = new OpenLayers.Layer.WMTS( { name: "世界矢量地图", url: wmtsUrl, la