Openlayers6 入門（一）加載天地圖在線瓦片

今天開始為大家?guī)砹慊A(chǔ)入門Openlayers的教程，輕松實(shí)現(xiàn)加載天地圖瓦片。
一、準(zhǔn)備工作
①到Openlayers官網(wǎng)下載Openlayers的API包。
下載地址：https://openlayers.org/download/

②創(chuàng)建一個Web工程，使用IDEA工具創(chuàng)建的Web工程

使用IDEA工具創(chuàng)建Web工程

③將API包放至工程lib文件夾下，并創(chuàng)建一個MapView.html


工程結(jié)構(gòu)

④在MapView.html中，引入ol.css、ol.js文件

<head>
    <meta charset="UTF-8">
    <title>Openleyers</title>
    <link rel="stylesheet" href="lib/openlayers-v6.5.0/ol.css">
    <script type="application/javascript" src="lib/openlayers-v6.5.0/ol.js"></script>
</head>

⑤到天地圖官方網(wǎng)站申請開發(fā)者token
這個是天地圖官網(wǎng)：
http://lbs.tianditu.gov.cn/
這個是官方指導(dǎo)（按照這個進(jìn)行申請）：
http://lbs.tianditu.gov.cn/authorization/authorization.html#register

二、實(shí)現(xiàn)代碼
①在MapView.html中創(chuàng)建一個Map的容器。用于之后創(chuàng)建Map對象，注意map的z-index需要設(shè)置高一些，防止其他要素遮擋地圖。

<style>
    .map {
        z-index: 999;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-height: 100%;
        height: auto;
    }
</style>
<body>
    <div id="map" class="map"></div>
</body>

②創(chuàng)建Map對象，在Layers數(shù)組中添加創(chuàng)建的天地圖Layer,并設(shè)置地圖中心點(diǎn)


var map =new ol.Map({
    target:"map",
    view:new ol.View({
         center:ol.proj.transform([116.40, 39.97], 'EPSG:4326', 'EPSG:3857'),
          zoom:10
    }),
});

③創(chuàng)建天地圖瓦片方法：

/*
 * 獲取在線天地圖
 * type:獲取的瓦片類型，影像、矢量 
 * wkid:坐標(biāo)系 
 * token:官網(wǎng)申請的開發(fā)者token
 */
function getLayerUrlByData(type, wkid, token) {
var url ='', layerId, tileMatrixSetId;
    if (type ==='image') {
        url ='http://t{1-7}.tianditu.com/DataServer?';
        layerId ="img_";
        tileMatrixSetId = wkid ===4326 ?'c' :"w";
    }else if (type ==='label') {
        url ='http://t{1-7}.tianditu.com/DataServer?';
        layerId ="cia_";
        tileMatrixSetId = wkid ===4326 ?'c' :"w";
    }else if (type ==='street') {
        url ='http://t{1-7}.tianditu.com/DataServer?';
        layerId ="vec_";
        tileMatrixSetId = wkid ===4326 ?'c' :"w";
    }else if (type ==='street_label') {
        url ='http://t{1-7}.tianditu.com/DataServer?';
        layerId ="cva_";
        tileMatrixSetId = wkid ===4326 ?'c' :"w";
    }
    return url +'T=' + layerId + tileMatrixSetId +'&x={x}&y={y}&l={z}&tk=' + token;
}

④創(chuàng)建天地圖Layer

var wkid =4326;
//天地圖官網(wǎng)申請的Token
var token =""; 
//創(chuàng)建天地圖影像底圖
var layerTianDiImg =new ol.layer.Tile({
source:new ol.source.XYZ({
url:getLayerUrlByData('image', wkid, token),
        projection:'EPSG:' +wkid,
        wrapX:true,
        crossOrigin:'anonymous'
    })
});
var layerTianDiImgLabel =new ol.layer.Tile({
source:new ol.source.XYZ({
url:getLayerUrlByData('label', wkid, token),
        projection:'EPSG:' +wkid,
        wrapX:true,
        crossOrigin:'anonymous'
    })
});

//創(chuàng)建天地圖矢量底圖
var layerTianDi =new ol.layer.Tile({
source:new ol.source.XYZ({
url:getLayerUrlByData('street', wkid, token),
        projection:'EPSG:' +wkid,
        wrapX:true,
        crossOrigin:'anonymous'
    })
});

var layerTianDiLabel =new ol.layer.Tile({
source:new ol.source.XYZ({
url:getLayerUrlByData('street_label', wkid, token),
        projection:'EPSG:' +wkid,
        wrapX:true,
        crossOrigin:'anonymous'
    })
});

⑤添加天地圖Layer到Map中。

        //添加天地圖矢量底圖
        map.addLayer(layerTianDi);
        map.addLayer(layerTianDiLabel);

        //添加天地圖影像底圖
        map.addLayer(layerTianDiImg);
        map.addLayer(layerTianDiImgLabel);

三、完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Openleyers</title>
    <link rel="stylesheet" href="lib/openlayers-v6.5.0/ol.css">
    <script type="application/javascript" src="lib/openlayers-v6.5.0/ol.js"></script>
</head>
<style>
    .map {
        z-index: 999;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-height: 100%;
        height: auto;
    }
</style>
<body>
<div id="map" class="map">
    <script>
        var map = new ol.Map({
            target: "map",
            //layers: [layerTianDi, layerTianDiLabel],
            // layers: [layerTianDiImg, layerTianDiImgLabel],
            view: new ol.View({
                center: ol.proj.transform([116.40, 39.97], 'EPSG:4326', 'EPSG:3857'),
                zoom: 10
            }),
        });

        var wkid = 4326;
        var token = "";
        //創(chuàng)建天地圖影像底圖
        var layerTianDiImg = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: getLayerUrlByData('image', wkid, token),
                projection: 'EPSG:' + wkid,
                wrapX: true,
                crossOrigin: 'anonymous'
            })
        });
        var layerTianDiImgLabel = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: getLayerUrlByData('label', wkid, token),
                projection: 'EPSG:' + wkid,
                wrapX: true,
                crossOrigin: 'anonymous'
            })
        });

        //創(chuàng)建天地圖矢量底圖
        var layerTianDi = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: getLayerUrlByData('street', wkid, token),
                projection: 'EPSG:' + wkid,
                wrapX: true,
                crossOrigin: 'anonymous'
            })
        });
        var layerTianDiLabel = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: getLayerUrlByData('street_label', wkid, token),
                projection: 'EPSG:' + wkid,
                wrapX: true,
                crossOrigin: 'anonymous'
            })
        });

        map.addLayer(layerTianDi);
        map.addLayer(layerTianDiLabel);

        // map.addLayer(layerTianDiImg);
        // map.addLayer(layerTianDiImgLabel);

        /*
         * 獲取在線天地圖
         * type:獲取的瓦片類型，影像、矢量
         * wkid:坐標(biāo)系
         * token:官網(wǎng)申請的開發(fā)者token
         */
        function getLayerUrlByData(type, wkid, token) {
            var url = '', layerId, tileMatrixSetId;
            if (type === 'image') {
                url = 'http://t{1-7}.tianditu.com/DataServer?';
                layerId = "img_";
                tileMatrixSetId = wkid === 4326 ? 'c' : "w";
            } else if (type === 'label') {
                url = 'http://t{1-7}.tianditu.com/DataServer?';
                layerId = "cia_";
                tileMatrixSetId = wkid === 4326 ? 'c' : "w";
            } else if (type === 'street') {
                url = 'http://t{1-7}.tianditu.com/DataServer?';
                layerId = "vec_";
                tileMatrixSetId = wkid === 4326 ? 'c' : "w";
            } else if (type === 'street_label') {
                url = 'http://t{1-7}.tianditu.com/DataServer?';
                layerId = "cva_";
                tileMatrixSetId = wkid === 4326 ? 'c' : "w";
            }
            return url + 'T=' + layerId + tileMatrixSetId + '&x={x}&y={y}&l={z}&tk=' + token;
        }
    </script>
</div>
</body>
</html>

四、實(shí)現(xiàn)效果：

① 矢量瓦片

天地圖矢量瓦片

② 影像瓦片

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

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

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