Openlayers之投影转换
1、投影转换
所谓投影转换，就是将具有某种投影坐标系的地图转换到另一种投影坐标系上显示，一般通过建立这两种投影之间坐标点的数学关系来实现，也可以将一种投影先转换为地理坐标系，再由地理坐标系转换到另一种投影坐标系；
2、代码实现
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../lib/ol/ol.js"></script>
<script src="../lib/ol/proj4.js"></script>
<link href="../css/ol.css" rel="stylesheet" />
<style type="text/css">
body,html,div{
border:none;padding:0;margin:0;
font-size:14px;
font-family:"微软雅黑";
}
#menu{
width:100%;
height:20px;
padding:5px 10px;
left:10px;
}
.container{
float:left;
width:48%;
height:850px;
margin:0 5px;
margin-left:10px;
}
.map{
float:left;
width:100%;
height:100%;
border:1px dashed red;
}
</style>
<script type="text/javascript">
window.onload = function () {
//定义一个变量，用来存储投影变换后的地图
var transformMap;
//初始化矢量图层
var vector = 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.OSM()
}),
vector
],
//渲染方式
render: 'canvas',
target: 'map1',
view: new ol.View({
//EPSG:3857投影
projection: ol.proj.get('EPSG:3857'),
//分辨率
resolutions: [65536, 32768, 16384, 8192, 4096, 2048],
center: [0, 0],
zoom:2
})
});
//显示网格参考
var graticule = new ol.Graticule({
map: map
})
//定义球形摩尔魏特投影坐标系
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 () {
//如果当前投影转换的地图为空或者未定义，则创建一个map对象
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()
})
})
],
render: 'canvas',
target: 'map2',
view: new ol.View({
//指定投影为球形摩尔魏特投影
projection: sphereMollweideProjection,
resolutions: [65536, 32768, 16384, 8192, 4096, 2048],
center: [0, 0],
zoom: 2
})
});
var graticule = new ol.Graticule({
map:transformMap
})
}
};
};
</script>
</head>
<body>
<div id="menu">
<label class="title" for="projection">
地图投影转换演示：<button id="projection">投影转换</button>
</label>
</div>
<div class="container">
<label>投影坐标系(EPSG:3857)</label>
<div id="map1" class="map"></div>
</div>
<div class="container">
<label>投影坐标系(ESRI:53009)</label>
<div id="map2" class="map"></div>
</div>
</body>
</html>
3、结果展示
初始化界面
单击投影转换按钮，在右边的地图窗口显示投影转换以后的地图
在右边的视口中缩小地图，可以看见其完全在一个球面上
转载自：https://blog.csdn.net/SmileCoffin/article/details/56278882
