需求：openlayer 實現投影轉換
源碼：https://pan.baidu.com/s/1-euCKVEPGcQXn_FJ6tda_A 提取碼: 8af8
源碼解壓后 文件放到 tomcat 或任意網絡服務(否則會有跨域問題) 雙擊 ol_wmts.html 瀏覽器打開即可
（其中加載了geoserver 的一個wmts服務，需要安裝geoserver）
參考資料：
資料1：https://blog.csdn.net/SmileCoffin/article/details/56278882
資料2：https://www.cnblogs.com/w-wanglei/p/6538061.html
資料3：https://openlayers.org/en/latest/examples/reprojection.html
資料4：http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.2822265625&zoom=4
資料5：https://www.npmjs.com/package/world-atlas
代碼整體參考資料1 ，不能完全滿足需求，因為其並非 “同一個map的投影轉換”，而是 “不同投影的兩個map之間的對比”
參考資料2 中的 “6.如何改變地圖的投影系” 章節實現了對 vector 的投影轉換
資料3 是官方示例，參考資料3實現了對 raster 的投影轉換
資料4 是在線獲取 中國地區行政區划圖的 geojson格式數據
資料5 是在線獲取 全球國家邊界的 topojson格式數據（本案例里沒有用到）
感謝以上作者的幫助
openlayer 接觸不多，代碼不完美，僅供參考。
<!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:90%; height:500px; 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 vector = new ol.layer.Vector({ source: new ol.source.Vector({ url: '/ol/data/geojson/countries-110m.json', format:new ol.format.GeoJSON() }) }); //osm tile layer var tile = new ol.layer.Tile({ source:new ol.source.OSM() }) //geoserver 默認自帶的 wmts 圖層 //設置地圖投影 var projection = new ol.proj.Projection({ code: 'EPSG:4326',//投影編碼 units: 'degrees', axisOrientation: 'neu' }); var layer_wmts = new ol.layer.Tile({ source: new ol.source.WMTS({ url: 'http://localhost:8088/geoserver/gwc/service/wmts',//注意這里，筆者安裝geoserver時配置的端口是 8088，不是默認的8080 layer: 'nurc:Img_Sample', matrixSet: 'EPSG:4326', format: 'image/png', projection: projection, tileGrid: new ol.tilegrid.WMTS({ tileSize: [256, 256], extent: [-180.0, -90.0, 180.0, 90.0],//范圍 origin: [-180.0, 90.0], resolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7], matrixIds: ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'], }), // style: 'raster', wrapX: true }) }); //初始化地圖 var map = new ol.Map({ layers: [ tile, vector, layer_wmts ], //渲染方式 render: 'canvas', target: 'map', view: new ol.View({ //EPSG:3857投影 projection: ol.proj.get('EPSG:3857'), resolutions: [65536, 32768, 16384, 8192, 4096, 2048, 1024, 512,256], center:ol.proj.transform([120, 37], 'EPSG:4326', 'EPSG:3857'), 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: [-909954.605703328, -909954.605703328, 19009954.605703328, 19009954.605703328], extent: [-20000000, -9000000, 20000000, 10000000], //世界經緯度范圍 worldExtent: [-179, -90, 179, 90] }); //進行投影轉換 將之前的map 及包含的圖層進行轉換 document.getElementById('projection').onclick = function () { //raster trans var view= new ol.View({ projection: sphereMollweideProjection, resolutions: [65536, 32768, 16384, 8192, 4096, 2048, 1024, 512,256], center: ol.proj.transform([0, 10], 'EPSG:4326', 'EPSG:3857'), zoom: 1 }) map.setView(view); //vector trans map.getLayers().getArray().forEach(function (layer) { if (layer instanceof ol.layer.Vector) { var features = layer.getSource().getFeatures(); for( i = 0; i < features.length; i += 1) { features[i].getGeometry().transform(ol.proj.get('EPSG:3857'), sphereMollweideProjection); } } }); }; }; </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="map" class="map"></div> </div> </body> </html>
結果展示：
轉換后
