紅杭州網(wǎng)站建設(shè)推銷廣告
Openlayers 疊加天地圖-中國近海海洋等深面圖層服務(wù)
- 核心代碼
- 完整代碼：
- 在線示例
偶然發(fā)現(xiàn)天地圖有一個(gè)近海海洋圖層，覺得不錯(cuò)，于是嘗試疊加一下，花費(fèi)了一些時(shí)間，疊加成功，這里分享一下。
本文包括核心代碼、完整代碼以及在線示例。
另外這里放上 Cesium 疊加示例
核心代碼
主要是 Openlayers 疊加 WMTS 圖層。
// 墨卡托投影
var projection = ol.proj.get("EPSG:3857");
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(18);
var matrixIds = new Array(18);
for (var z = 1; z < 19; ++z) {// generate resolutions and matrixIds arrays for this WMTSresolutions[z] = size / Math.pow(2, z);matrixIds[z] = z;
}// 天地圖 key，只能在本域名下使用
const token = '2b7cbf61123cbe4e9ec6267a87e7442f';// 創(chuàng)建天地圖圖層
taindiLayer = new ol.layer.Tile({source: new ol.source.WMTS({url: "http://t0.tianditu.gov.cn/shuishen_w/wmts?tk=" + token,// 圖層名稱，必須layer: "shuishen", //注意每個(gè)圖層這里不同// 墨卡托投影matrixSet: "w",format: "image/png",style: "default",projection: projection,tileGrid: new ol.tilegrid.WMTS({origin: ol.extent.getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds,}),wrapX: true,}),
});map.addLayer(taindiLayer);
完整代碼：
<html lang="en">
<head><meta charset="utf-8"><!--注意：openlayers 原版的比較慢，這里引起自己服務(wù)器版--><link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css"><style>/* 注意：這里必須給高度，否則地圖初始化之后不顯示；一般是計(jì)算得到高度，然后才初始化地圖 */.map {height: 400px;width: 100%;float: left;}</style><!--注意：openlayers 原版的比較慢，這里引起自己服務(wù)器版--><script src="http://openlayers.vip/examples/resources/ol.js"></script><script src="./tiandituLayers.js"></script><title>OpenLayers example</title>
</head>
<body>
<h2>tianditu ocean layer</h2>
<!--地圖容器，需要指定 id -->
<div id="map" class="map"></div>
<!--注意：本示例將 高德騰訊坐標(biāo)設(shè)置為黑色；將百度坐標(biāo)設(shè)置為黃色 -->
<!--注意：本示例將 高德騰訊坐標(biāo)轉(zhuǎn)為WGS84顏色設(shè)置為粉色；將百度坐標(biāo)轉(zhuǎn)為WS84顏色設(shè)置為綠色 -->
<script type="text/javascript">var map = new ol.Map({// 地圖容器target: 'map',// 地圖圖層，比如底圖、矢量圖等layers: [getIMG_CLayer(),getIBO_CLayer(),getCIA_CLayer(),],// 地圖視野view: new ol.View({projection: "EPSG:4326",// 定位center: [116, 39],// 縮放zoom: 4,maxZoom: 18,minZoom: 1,})});var taindiLayer;// 加載 WMTS 圖層function WMTS() {// 墨卡托投影var projection = ol.proj.get("EPSG:3857");var projectionExtent = projection.getExtent();var size = ol.extent.getWidth(projectionExtent) / 256;var resolutions = new Array(18);var matrixIds = new Array(18);for (var z = 1; z < 19; ++z) {// generate resolutions and matrixIds arrays for this WMTSresolutions[z] = size / Math.pow(2, z);matrixIds[z] = z;}// 天地圖 key，只能在本域名下使用const token = '2b7cbf61123cbe4e9ec6267a87e7442f';// 創(chuàng)建天地圖圖層taindiLayer = new ol.layer.Tile({source: new ol.source.WMTS({url: "http://t0.tianditu.gov.cn/shuishen_w/wmts?tk=" + token,// 圖層名稱，必須layer: "shuishen", //注意每個(gè)圖層這里不同// 墨卡托投影matrixSet: "w",format: "image/png",style: "default",projection: projection,tileGrid: new ol.tilegrid.WMTS({origin: ol.extent.getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds,}),wrapX: true,}),});clearLayer();map.addLayer(taindiLayer);map.getView().fit([101.06147602421068, 2.63671875, 126.81342914921068, 46.23046875], map.getSize());}WMTS();function clearLayer() {taindiLayer && map.removeLayer(taindiLayer);}</script><button id="createCircle1" onclick="WMTS()">添加圖層</button>
</body>
</html>在線示例
Openlayers 在線示例：Openlayers 疊加天地圖-中國近海海洋等深面圖層服務(wù)