接上一篇 openlayer投影轉換 有了新問題，CGCS2000（EPSG:4490） 坐標轉換有問題。
后來發現應該將問題簡化為 “openlayer 設置CGCS2000 view”。
資料1：用openlayer加載arcgis發布的wmts圖層
資料2：OpenLayers 6 如何優雅的使用天地圖WMTS服務“經緯度投影(CGCS2000)”和“球面墨卡托投影(EPSG:3857)”
問題解決的總結：
要點1：
projection的 Extent WorldExtent 屬性都要賦值，缺一不可
代碼如下：
var projection4490 = new ol.proj.get('EPSG:4490');
//下面這倆 extent 都必須有
projection4490.setExtent([-180,-90,180,90]);
projection4490.setWorldExtent([-180,-90,180,90]);
要點2：
CGCS2000是地理坐標系，單位是經緯度，所以view 的 center 屬性直接使用經緯度，如下所示
center:[0, 0],
3857是投影坐標系，單位不是經緯度，所以view 的 center 屬性需要轉換一下，如下所示
center:ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
另外不知道為啥，加載的本地 geojson 數據在第一個map使用后，需要再次賦值才能給 第二個map使用~~~ 沒理解~
代碼:
<!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:45%; 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() }) //wmts layer //設置地圖投影 var projection4326 = 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', layer: 'nurc:Img_Sample', //切片集 matrixSet: 'EPSG:4326', format: 'image/png', projection: projection4326, //切片信息 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 }) }); //###### map1 ###### //projection3857 var projection3857 = ol.proj.get('EPSG:3857'); var view3857 =new ol.View({ projection: projection3857, resolutions: [65536, 32768, 16384, 8192, 4096, 2048, 1024, 512,256], center:ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'), zoom:0 }) //初始化地圖 var map1 = new ol.Map({ layers: [ tile, vector, layer_wmts ], //渲染方式 render: 'canvas', target: 'map1', view: view3857 }); //顯示網格參考 var graticule = new ol.Graticule({ map: map1 }) //###### map2 ###### //projection4490 proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs"); var projection4490 = new ol.proj.get('EPSG:4490'); //下面這倆 extent 都必須有 projection4490.setExtent([-180,-90,180,90]); projection4490.setWorldExtent([-180,-90,180,90]); var view4490 = new ol.View({ projection: projection4490, center:[0, 0], zoom:2 }) //如果不在這里再次賦值vector 那么map2 里就無法加載出來這個geojson.....什么鬼 vector = new ol.layer.Vector({ source: new ol.source.Vector({ url: '/ol/data/geojson/countries-110m.json', format:new ol.format.GeoJSON() }) }); //初始化地圖 var map2 = new ol.Map({ layers: [ tile, vector, layer_wmts ], //渲染方式 render: 'canvas', target: 'map2', view: view4490 }); //顯示網格參考 var graticule = new ol.Graticule({ map: map2 }) }; </script> </head> <body> <div class="container"> <label>投影坐標系(EPSG:3857)</label> <div id="map1" class="map"></div> </div> <div class="container"> <label>投影坐標系(EPSG:4490)</label> <div id="map2" class="map"></div> </div> </body> </html>
效果如下：
