WebGIS之OpenLayers全面解析: 8.2 动态投影 |
您所在的位置：网站首页 › openlayers加载tif地图 › WebGIS之OpenLayers全面解析: 8.2 动态投影 |
WebGIS之OpenLayers全面解析: 8.2 动态投影
|
8.2 动态投影 每个地图数据在Web端加载显示时，都需要设置其投影坐标系。OpenLayers 3在地图视图对象中有一个投影坐标系参数（projection），加载地图时通过此参数设置地图的投影坐标系。在实际应用中，叠加图层数据需要确保在统一的投影坐标系下，有时候需要对坐标点、地图数据进行投影转换操作。OpenLayers 3框架下针对地图投影坐标系的操作均由ol.proj.Projection类实现。例如，提供的ol.proj.transform()方法可以对坐标点进行投影转换。 目前，OpenLayers 3已定义了两种常用的投影坐标系，即地理经纬度的EPSG:4326和Web墨卡托的EPSG:3857。本示例将一个EPSG:3857的矢量地图，转换到自定义的投影坐标系（ESRI:53009）中显示，如图8.5所示。 
图8.5 动态投影示例 主要实现步骤如下。 （1）在OL3Demo网站的Others目录下新建一个ProjectionTransformation.htm页面，引用OpenLayers 3开发库、jQuery库。 （2）添加界面元素，分别创建两个div层作为地图容器，一个默认加载EPSG:3857的地图数据，另一个则通过功能按钮动态加载ESRI:53009的矢量地图。 示例界面的代码如下。 地图投影转换演示：投影转换 投影坐标系（EPSG:3857） 投影坐标系（ESRI:53009）（3）第一个地图容器默认加载MapQuest瓦片与GeoJSON的矢量地图，设置视图的projection参数为EPSG:3857的投影坐标系对象；另一个地图容器动态加载GeoJSON的矢量地图，设置视图的projection参数为自定义的ESRI:53009的投影坐标系对象，并通过ol.Graticule加载显示参考系标线。 动态投影示例的代码如下。 var transformMap; var vectLayer = new ol.layer.Vector({ source: new ol.source.Vector({ url: '../data/geojson/countries-110m.json', format: new ol.format.GeoJSON() }) }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({ layer: 'osm' }) }), vectLayer ], renderer: 'canvas', target: 'map1', //地图容器div的id view: new ol.View({ projection: ol.proj.get('EPSG:3857'), //投影坐标系 resolutions: [65536, 32768, 16384, 8192, 4096, 2048], center: [0, 0], zoom: 0 }) }); //定义球形摩尔魏特投影坐标系，对应ESRI的编号为ESRI:53009 proj4.defs('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' + '+b=6371000 +units=m +no_defs'); var sphereMollweideProjection = new ol.proj.Projection({ code: 'ESRI:53009', //编号 extent: [-9009954.605703328, -9009954.605703328,9009954.605703328, 9009954.605703328], //范围 worldExtent: [-179, -90, 179, 90] //世界经纬度范围 }); //开始投影转换 document.getElementById('projection').onclick = function () { if (transformMap == null || transformMap == undefined) { transformMap = new ol.Map({ layers: [ new ol.layer.Vector({ source: new ol.source.Vector({ url: '../data/geojson/countries-110m.json', format: new ol.format.GeoJSON() }) }) ], renderer: 'canvas', target: 'map2', view: new ol.View({ projection: sphereMollweideProjection, //投影坐标系 resolutions: [65536, 32768, 16384, 8192, 4096, 2048], center: [0, 0], zoom: 0 }) }); var graticule = new ol.Graticule({ //参考系标线 map: transformMap //显示参考系标线的地图 }); } };代码说明：上述代码的关键是创建自定义投影坐标系对象，先通过proj4.defs()定义球形摩尔魏特投影坐标系（ESRI:53009），然后实例化ol.proj.Projection对象，创建ESRI:53009对应的投影坐标系对象。基于创建的投影坐标系对象，将加载的矢量地图投影到此投影坐标系中显示。 |
【本文地址】
今日新闻 |
推荐新闻 |