OpenLayers中Map中默认使用的经纬度坐标系(EPSG:4326),如果我们地图图片采用了墨卡托投影时,我们就需要在初始化Map对象时对相关的参数进行配置,以使用正确的投影方式;
下面代码演示了这个使用:
SimpleMap = OpenLayers.Class(OpenLayers.Map,{
/*按地图引擎的地图参数初始画地图*/
initialize: function (div, options){
OpenLayers.Map.prototype.initialize.apply(this,[div,options]);
//当前地图采用坐标系(墨卡托坐标)
this.projection=new OpenLayers.Projection("EPSG:900913");
//数据采用的坐标系
this.displayProjection=new OpenLayers.Projection("EPSG:4326");
this.units="m";
//this.numZoomLevels=16;
//this.maxResolution=78271.51695;
//this.numZoomLevels=15;
//this.maxResolution=39135.758475;
this.numZoomLevels=14;
//Resolution=20037508*2/256*2^(zoom+1),zoom取值0~15
this.maxResolution= 19567.8792375;
//对应经纬度(-180,-90,180*2,90)
this.maxExtent=new OpenLayers.Bounds(-20037508, -20037508,20037508*2,20037508);
this.restrictedExtent=new OpenLayers.Bounds(6679169.333,0,20037508*2,13358338.667);
this.restrictedExtent=new OpenLayers.Bounds(-20037508, -20037508,20037508*2,13358338.667);
this.addLayer(new SimpleTileCache("baseMap",TILE_PIV_URL,{isBaseLayer:true}));
this.div.oncontextmenu = function () { return false;};
if(CENTER_LONLAT){
this.zoomToLonLat(new OpenLayers.LonLat(CENTER_LONLAT[0],CENTER_LONLAT[1]),DEFAULT_ZOOM);
}
},
/**
* 定位到坐标点 输入点的采用的坐标系与显示坐标系相同
* lonlat 与显示坐标系相同的点 { OpenLayers.LonLat }
* zoom 缩放级数 { Integer }
*/
zoomToLonLat: function(lonlat,zoom){
var p=lonlat.transform(this.displayProjection,this.getProjectionObject());
this.setCenter(p,zoom,false,true);
},
CLASS_NAME:"SimpleMap"
});
我们CENTER_LONLAT是一个经纬度坐标数组。
zoomToLonLat()函数展示了坐标转换。坐标转换需要Proj4j.js包,需要下载后才能进行做坐标转换。
zoomToLonLat函数就是把经纬度坐标转换为墨卡托坐标,this.getProjectionObject()返回的就是this.projection。因为现在地图采用墨卡托坐标系,所有经纬度坐标都要调用Openlayers.LonLat对象的transform函数进行坐标转换。
分享到:
相关推荐
在实际开发中,OpenLayers提供了丰富的API,可以实现地图的初始化、图层的添加和删除、标记的创建、事件监听等功能。例如,你可以通过以下代码创建一个基本的地图实例: ```javascript var map = new ol.Map({ ...
1. **初始化Map对象**:OpenLayers应用的核心是`ol.Map`对象,用于创建和管理地图。你需要指定一个容器(通常是HTML元素)来展示地图,并可设置各种选项,如投影、图层、视图等。 2. **图层(Layers)**:地图由一...
5. **地图投影转换**:如果需要将获取的坐标转换为其他坐标系统,如WGS84(纬度/经度),可以使用`ol.proj.transform()`方法: ```javascript var wgs84Coord = ol.proj.transform(clickCoord, 'EPSG:3857', 'EPSG...
2. 初始化地图对象:接着,使用OpenLayers创建地图实例,指定地图容器、投影类型(通常使用 EPSG:3857,也称为 Web Mercator)和初始视图。 ```javascript var map = new ol.Map({ target: 'map', view: new ol....
3. **创建OpenLayers地图**: 初始化一个OpenLayers Map实例,设置视图、投影等属性。 4. **添加ArcGIS图层**: 创建一个OpenLayers的TileLayer,设置其源为ArcGIS REST服务URL,并在URL中附带token参数。 5. **监听...
这个过程涉及到地图的初始化、数据加载、图层创建、样式定义以及可能的动画处理。OpenLayers的强大之处在于其灵活性和丰富的API,可以根据需求进行定制,例如添加时间滑块控件,让用户自行控制播放速度和轨迹回放。
2. **OpenLayers的初始化** - 创建地图实例:`var map = new OpenLayers.Map('mapdiv');` - 添加底图:`var layer = new OpenLayers.Layer.WMS(“名字”, “URL”, {参数});` - 设置地图视图:`map.setCenter(new...
- **初始化地图**:在HTML页面中,你需要创建一个`div`元素作为地图容器,然后通过`OpenLayers.Map`构造函数来实例化地图对象。 - **设置地图投影**:OpenLayers支持多种投影方式,如EPSG:4326(经纬度)和EPSG:...
1. **初始化Map对象** - `OpenLayers.Map`是OpenLayers的核心,用于创建地图实例。你需要指定一个DOM元素作为地图容器,并可以设置地图的基本属性,如单位、投影、比例尺等。 2. **图层(Layers)管理** - `...
1. 初始化地图容器:创建一个div元素,作为地图显示的区域。 2. 创建地图对象:`var map = new OpenLayers.Map('map_div')`,这里的'map_div'是地图容器的ID。 3. 加载TMS图层:`var tmsLayer = new OpenLayers....
1. 地图(Map):OpenLayers中的地图对象是所有交互的核心,它包含了多个图层、控制和投影。创建一个地图需要指定容器元素、初始视图和图层。 2. 图层(Layer):图层是地图的组成部分,可以是卫星图像、地形图或者...
此外,教程还会涉及如何优化性能,例如通过预加载和缓存策略来减少网络请求,以及如何使用源和投影系统来处理地理坐标转换。 总的来说,OpenLayers实例详解视频教程将带你全面了解OpenLayers的功能和用法,无论你是...
1. **基础概念**:了解OpenLayers的基本结构,如地图对象(Map)、图层对象(Layer)、控制对象(Control)等,以及它们之间的关系。理解如何创建一个基本的地图视图,设置初始中心点和缩放级别。 2. **图层管理**...
- JavaScript: 这是核心部分,包含了OpenLayers的配置和初始化代码。这部分代码将定义源、层和地图,并可能包含交互事件的处理函数。 4. **运行DEMO**: 解压下载的"openLayers简易离线地图Demo"文件,打开其中的...
地图数据可能使用不同的坐标系统,OpenLayers 提供了投影转换功能,如`OpenLayers.Projection`类,使开发者能方便地在不同坐标系之间进行转换。 8. **控件添加**: OpenLayers 内置了多种控件,如缩放滑块、导航...
2. **地图初始化**:创建一个`Map`对象是OpenLayers的核心。你需要指定一个DOM元素作为地图容器,以及一个`View`对象来定义初始视图,包括中心位置和缩放级别。 3. **图层管理**:OpenLayers支持多种图层类型,如...
使用`new OpenLayers.Map()`初始化地图实例,设置地图的基本属性,如容器ID、投影类型、分辨率等。 2. **添加图层**: 在地图实例上添加图层,可以是WMS、TMS、TileImage等多种类型。`new OpenLayers.Layer.WMS()...
3. **实例化扩展**:在地图初始化或需要使用扩展时,你可以创建扩展类的实例,并将其添加到地图对象中。对于图层扩展,你可以在地图的`layers`数组中添加;对于交互扩展,可以添加到地图的`interactions`集合中。 4...
创建OpenLayers地图需要实例化`ol.Map`类,传入一个DOM元素作为地图容器,并指定初始视图。例如: ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) ...
同时,开发者还需要了解如何配置和初始化地图对象,以及如何编写JavaScript代码来实现各种地图功能。 **7. 社区支持:** 作为开源项目,OpenLayers有一个活跃的开发者社区,用户可以在论坛或GitHub上寻求帮助,提交...