Openlayers加載WMTS時間地圖，加載天地圖底圖

1. 地圖顯示流程圖

Openlayers加載WMS時間地圖實現(xiàn)流程圖

基本的實現(xiàn)思路是：
1.準(zhǔn)備數(shù)據(jù)；
2.map逐個加載數(shù)據(jù)，通過控制圖層可見性進行跳轉(zhuǎn)顯示；
3.添加上一圖層、下一圖層、開始、暫停按鈕進行圖層控制。

2. 基本環(huán)境搭建

2.1 采用組件及環(huán)境

開發(fā)工具：WebStorm
所用組件：Openlayers 5.3、Geoserver 2.15.0、layui（可選）

2.2 搭建步驟

  1. 下載Openlayers插件，文件名為v5.3.0-dist.zip，加壓文件，將其中的ol.js放置到開發(fā)工程目錄底下，不用也行，直接引用在線ol.js
  2. 找個layui.css的樣式組件放到工程目錄底下（為了布局好看，沒有也無所謂）
  3. 需要按時間展示的wmts地圖鏈接，可以準(zhǔn)備開工啦~
    工程目錄如圖所示
    工程目錄結(jié)構(gòu)

3. 柵格WMTS時間地圖展示

3.1 前端HTML頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--網(wǎng)頁標(biāo)題名-->
    <title>柵格時間地圖</title>
    <!--引用的樣式組件-->
    <link rel="stylesheet"  type="text/css">
    <link rel="stylesheet" href="./layui/css/layui.css">

</head>
<body>
<!--地圖id及大小-->
<div id="map" class="map" style="width:1920px;height:700px"></div>
<!--地圖標(biāo)注-->
<div id="nowLayer">當(dāng)前圖層為：基準(zhǔn)等高線</div>
<!--按鈕控制-->
<button class="layui-btn" style="margin-left: 700px;" id="btn_onStarted" type="hidden">開始</button>
<button class="layui-btn" style="margin-left: 20px;" id="btn_onPaused" type="hidden">暫停</button>
<button class="layui-btn" style="margin-left: 20px;" id="btn_addLayer">下一圖層</button>
<button class="layui-btn" style="margin-left: 20px;" id="btn_removeLayer">上一圖層</button>
<button class="layui-btn" style="margin-left: 20px;" id="btn_onReset">復(fù)位</button>
<!--引用的js組件-->
<script src="./ol/ol.js"></script>
<script src="./layui/layui.js"></script>
<script src="./resources/jquery-3.3.1.js"></script>
<!--html對應(yīng)的js腳本-->
<script src="js/showWMTRaster.js" async="async"></script>
</body>
</html>

3.2 Js腳本文件

//預(yù)備展示的柵格圖層組
var m_layerNameGroup=["AvgNorResult5_2_R","AvgNorResult6_3_R","AvgNorResult7_4_R","AvgNorResult8_5_R"]
var animationId=null,map=null
var m_controlVisibile=2;
//圖層參考系
var gridsetName = 'EPSG:4326';
//格網(wǎng)顯示等級
var gridNames = ['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'];
//基礎(chǔ)的wmts URL
var baseUrl='http://localhost:8080/geoserver/gwc/service/wmts'
var style = '';
var format = 'image/png';
//圖層組名稱
var m_layerName = 'main_TS_defo:';
//定義投用信息
var projection = new ol.proj.Projection({
    code: 'EPSG:4326',
    units: 'degrees',
    axisOrientation: 'neu'
});
//格網(wǎng)分辨率
var 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];
baseParams = ['VERSION','LAYER','STYLE','TILEMATRIX','TILEMATRIXSET','SERVICE','FORMAT'];


/**
 * 初始化圖層加載
 */
function init(){
    function ScaleControl(opt_options) {
        var options = opt_options || {};

        var element = document.createElement('div');
        element.setAttribute('id', 'scale');
        element.className = 'ol-scale-value';

        ol.control.Control.call(this, {
            element: element,
            target: options.target
        });
    };
    ol.inherits(ScaleControl, ol.control.Control);
    ScaleControl.prototype.setMap = function(map) {
        map.on('postrender', function() {
            var view = map.getView();
            var resolution = view.getResolution();
            var dpi = 90.71428571428572;
            var mpu = map.getView().getProjection().getMetersPerUnit();
            var scale = resolution * mpu * 39.37 * dpi;

            if (scale >= 9500 && scale <= 950000) {
                scale = Math.round(scale / 1000) + 'K';
            } else if (scale >= 950000) {
                scale = Math.round(scale / 1000000) + 'M';
            } else {
                scale = Math.round(scale);
            }
            document.getElementById('scale').innerHTML =  'Scale = 1 : ' + scale;
        }, this);
        ol.control.Control.prototype.setMap.call(this, map);
    }
    var initLayerName=m_layerName+"AvgNorResult3_1";
    //將定義的圖層參數(shù)配置到圖層中
    params = {
        'VERSION': '1.0.0',
        'LAYER': initLayerName,
        'STYLE': style,
        'TILEMATRIX': gridNames,
        'TILEMATRIXSET': gridsetName,
        'SERVICE': 'WMTS',
        'FORMAT': format
    };

    function constructSource() {
        var url = baseUrl+'?'
        for (var param in params) {
            if (baseParams.indexOf(param.toUpperCase()) < 0) {
                url = url + param + '=' + params[param] + '&';
            }
        }
        url = url.slice(0, -1);
        //wmts圖層顯示配置
        var source = new ol.source.WMTS({
            url: url,
            layer: params['LAYER'],
            matrixSet: params['TILEMATRIXSET'],
            format: params['FORMAT'],
            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: resolutions,
                matrixIds: params['TILEMATRIX']
            }),
            style: params['STYLE'],
            wrapX: true
        });
        return source;
    }

    var layer = new ol.layer.Tile({
        source: constructSource()
    });

    //天地圖底圖配置
    var projection1 = ol.proj.get('EPSG:4326');
    var resolutions1 = new Array(18);
    var projectionExtent = projection1.getExtent();
    var matrixIds = new Array(18);
    var size = ol.extent.getWidth(projectionExtent) / 256;
    for (var z = 1; z < 19; ++z) {
        // generate resolutions and matrixIds arrays for this WMTS
        resolutions1[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
    }
    var wmtsUrl_1 = 'http://t0.tianditu.gov.cn/vec_c/wmts?tk='; //矢量底圖
    var wmtsUrl_2 = 'http://t0.tianditu.gov.cn/cva_c/wmts?tk='; //矢量注記
//需要改為自己的token，如果不需要底圖顯示，可以將這段代碼去掉
    var webKey = 'your token';
    //定義圖層
    var layers = [];
    var layer1 =new ol.layer.Tile({
            opacity: 0.7,
            source: new ol.source.WMTS({
                url: wmtsUrl_1 + webKey,
                layer: 'vec',
                matrixSet: 'c',
                format: 'tiles',
                style: 'default',
                projection: projection1,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions1,
                    matrixIds: matrixIds
                }),
                wrapX: true
            })
        })
    var layer2 =new ol.layer.Tile({
        opacity: 0.7,
        source: new ol.source.WMTS({
            url: wmtsUrl_2 + webKey,
            layer: 'cva',
            matrixSet: 'c',
            format: 'tiles',
            style: 'default',
            projection: projection1,
            tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions1,
                matrixIds: matrixIds
            }),
            wrapX: true
        })
    });

    var view = new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: projection,
        extent: [-180.0,-90.0,180.0,90.0]
    });

    map = new ol.Map({
        controls: ol.control.defaults({attribution: false}).extend([
            new ol.control.MousePosition(),
            new ScaleControl()
        ]),
        layers: [layer1,layer2,layer],
        target: 'map',
        view: view
    });
    map.getView().fit([113.97890540635177,37.77507734365083,114.0056545989984,37.79244001605483], map.getSize());

}

/**
 * 控制延時
 * @param numberMillis延時時長
 */
function sleep(numberMillis) {
    var now = new Date();
    var exitTime = now.getTime() + numberMillis;
    while (true) {
        now = new Date();
        if (now.getTime() > exitTime)
            return;
    }
}

/**
 * 全部加載圖層
 */
function loadTimeMap(){
    for(var i=0;i<m_layerNameGroup.length;i++){
        var renderLayerName=m_layerName+m_layerNameGroup[i];
        params = {
            'VERSION': '1.0.0',
            'LAYER': renderLayerName,
            'STYLE': style,
            'TILEMATRIX': gridNames,
            'TILEMATRIXSET': gridsetName,
            'SERVICE': 'WMTS',
            'FORMAT': format
        };

        function constructSource() {
            var url = baseUrl+'?'
            for (var param in params) {
                if (baseParams.indexOf(param.toUpperCase()) < 0) {
                    url = url + param + '=' + params[param] + '&';
                }
            }
            url = url.slice(0, -1);
            var source = new ol.source.WMTS({
                url: url,
                layer: params['LAYER'],
                matrixSet: params['TILEMATRIXSET'],
                format: params['FORMAT'],
                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: resolutions,
                    matrixIds: params['TILEMATRIX']
                }),
                style: params['STYLE'],
                wrapX: true
            });
            return source;
        }
        var layer = new ol.layer.Tile({
            source: constructSource()
        });
        map.addLayer(layer);
    }
}

/**
 * 控制圖層組可見性
 * @param mapLayerGroup
 */
function controlTimeLayer(mapLayerGroup) {
    if(m_controlVisibile<7){

        if(m_controlVisibile!=2){
            mapLayerGroup.a[m_controlVisibile-1].N.visible=false;
        }else{
            mapLayerGroup.a[6].N.visible=false;
        }
        mapLayerGroup.a[m_controlVisibile].N.visible=true;
        updateInfo(m_controlVisibile);
        map.getView().fit([113.97890540635177,37.77507734365083,114.0056545989984,37.79244001605483], map.getSize());
        m_controlVisibile=m_controlVisibile+1;
    }else{
        m_controlVisibile=2;
    }

}
function updateInfo(m_controlVisibile){
    var nowLayerName=null;
    switch (m_controlVisibile) {
        case 2:
            nowLayerName="當(dāng)前圖層為：基準(zhǔn)等高線"
            break;
        case 3:
            nowLayerName="當(dāng)前圖層為：等高線1期"
            break;
        case 4:
            nowLayerName="當(dāng)前圖層為：等高線2期"
            break;
        case 5:
            nowLayerName="當(dāng)前圖層為：等高線3期"
            break;
        case 6:
            nowLayerName="當(dāng)前圖層為：等高線4期"
            break;
        default:
            nowLayerName="當(dāng)前圖層為：等高線數(shù)據(jù)"
    }
    document.getElementById('nowLayer').innerText = nowLayerName;
}


/**
 * 添加圖層
 * @param inputLayerName 需要添加的圖層名稱
 */
function addLayertoMap(inputLayerName){

    var renderLayerName=m_layerName+inputLayerName;
    params = {
        'VERSION': '1.0.0',
        'LAYER': renderLayerName,
        'STYLE': style,
        'TILEMATRIX': gridNames,
        'TILEMATRIXSET': gridsetName,
        'SERVICE': 'WMTS',
        'FORMAT': format
    };

    function constructSource() {
        var url = baseUrl+'?'
        for (var param in params) {
            if (baseParams.indexOf(param.toUpperCase()) < 0) {
                url = url + param + '=' + params[param] + '&';
            }
        }
        url = url.slice(0, -1);

        var source = new ol.source.WMTS({
            url: url,
            layer: params['LAYER'],
            matrixSet: params['TILEMATRIXSET'],
            format: params['FORMAT'],
            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: resolutions,
                matrixIds: params['TILEMATRIX']
            }),
            style: params['STYLE'],
            wrapX: true
        });
        return source;
    }

    var layer = new ol.layer.Tile({
        source: constructSource()
    });

    var view = new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: projection,
        extent: [-180.0,-90.0,180.0,90.0]
    });

    map.addLayer(layer);
    map.setView(view);
    map.getView().fit([113.97890540635177,37.77507734365083,114.0056545989984,37.79244001605483], map.getSize());
}


/**
 * 復(fù)位（直接復(fù)位到第一個圖層）
 */
$('#btn_onReset').click(function () {
    map.getLayers().a[m_controlVisibile].N.visible=false;
    m_controlVisibile=2;
    map.getLayers().a[m_controlVisibile].N.visible=true;
    updateInfo(m_controlVisibile)
    map.getView().fit([113.97890540635177,37.77507734365083,114.0056545989984,37.79244001605483], map.getSize());

})

/**
 * 上一圖層（移除當(dāng)前圖層）
 */
$('#btn_removeLayer').click(function () {

    if(m_controlVisibile>2){
        map.getLayers().a[m_controlVisibile].N.visible=false;
        map.getLayers().a[m_controlVisibile-1].N.visible=true;
        map.getView().fit([113.97890540635177,37.77507734365083,114.0056545989984,37.79244001605483], map.getSize());
        m_controlVisibile=m_controlVisibile-1
        updateInfo(m_controlVisibile);
    }else{
        map.getLayers().a[m_controlVisibile].N.visible=false;
        m_controlVisibile=6;
        map.getLayers().a[m_controlVisibile].N.visible=true;
        updateInfo(m_controlVisibile)
        map.getView().fit([113.97890540635177,37.77507734365083,114.0056545989984,37.79244001605483], map.getSize());

    }
})

/**
 * 下一圖層（在當(dāng)前圖層疊加圖層）
 */
$('#btn_addLayer').click(function(){

    if(m_controlVisibile<6){
        map.getLayers().a[m_controlVisibile].N.visible=false;
        map.getLayers().a[m_controlVisibile+1].N.visible=true;
        map.getView().fit([113.97890540635177,37.77507734365083,114.0056545989984,37.79244001605483], map.getSize());
        m_controlVisibile=m_controlVisibile+1
        updateInfo(m_controlVisibile)
    }else{
        map.getLayers().a[m_controlVisibile].N.visible=false;
        m_controlVisibile=2;
        map.getLayers().a[m_controlVisibile].N.visible=true;
        updateInfo(m_controlVisibile)
        map.getView().fit([113.97890540635177,37.77507734365083,114.0056545989984,37.79244001605483], map.getSize());
    }
})


/**
 * 圖層播放響應(yīng)事件
 * */
$('#btn_onStarted').click(function(){


    animationId=window.setInterval(
        function(){
            controlTimeLayer(map.getLayers())
        },
        1000);

});
/**
 * 圖層暫停響應(yīng)事件
 */
$('#btn_onPaused').click(function(){
    window.clearInterval(animationId);
    animationId=null;
})

init();

loadTimeMap();
//循環(huán)控制圖層可見、隱藏
for(var j=0;j<map.getLayers().N.length;j++){
    if(j>2){
        map.getLayers().a[j].N.visible=false;
    }
}

3.3 運行演示

二維柵格時間地圖.gif
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.配置開發(fā)環(huán)境 使用OpenLayers 3開發(fā)WebGIS應(yīng)用，我們首先需要配置開發(fā)環(huán)境，首先我們需要在ope...
    jiegiser閱讀 4,456評論 0贊 5
  • 筆者最近實踐了利用openlayers在android app中實現(xiàn)離線地圖應(yīng)用，本文記錄了筆者實踐的思路。 an...
    老羽閱讀 10,952評論 9贊 6
  • source 是 Layer 的重要組成部分，表示圖層的來源，也就是服務(wù)地址。除了在構(gòu)造函數(shù)中指定外，還可以使用 ...
    changhr2013閱讀 10,737評論 1贊 1
  • 自我實現(xiàn)是每個人的需求，誰不想成為一個厲害的人？受到別人尊敬，信賴，高度評價等 假設(shè)一下，一個相當(dāng)厲害的人，我們稱...
    軒饅頭閱讀 456評論 1贊 1
  • 你做過的最正確的決定是什么？ 昨天上午，我在家聽混沌大學(xué)的線上課程，新東方創(chuàng)始人俞敏洪講了這么一件事，讓我挺有感觸...
    他說他的不說閱讀 169評論 0贊 0

友情鏈接更多精彩內(nèi)容