openlayer CGCS2000 EPSG:4490
生活随笔
收集整理的這篇文章主要介紹了
openlayer CGCS2000 EPSG:4490
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
接上一篇 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>
效果如下：
總結
以上是生活随笔為你收集整理的openlayer CGCS2000 EPSG:4490的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在lean trace mode下运行f
- 下一篇： 如何自动打开function对应的ABA