Openlayers6 入门（一）加载天地图在线瓦片

最新推荐文章于 2024-05-29 20:27:13 发布
最新推荐文章于 2024-05-29 20:27:13 发布
阅读量2.5k 收藏 8
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014380802/article/details/119766216
版权

今天开始为大家带来零基础入门Openlayers的教程，轻松实现加载天地图瓦片。
一、准备工作
①到Openlayers官网下载Openlayers的API包。
下载地址：https://openlayers.org/download/

②创建一个Web工程，使用IDEA工具创建的Web工程

使用IDEA工具创建Web工程

③将API包放至工程lib文件夹下，并创建一个MapView.html

 

工程结构

④在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>

⑤到天地图官方网站申请开发者token
这个是天地图官网：
http://lbs.tianditu.gov.cn/
这个是官方指导（按照这个进行申请）：
http://lbs.tianditu.gov.cn/authorization/authorization.html#register

二、实现代码
①在MapView.html中创建一个Map的容器。用于之后创建Map对象，注意map的z-index需要设置高一些，防止其他要素遮挡地图。

<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>

 ②创建Map对象，在Layers数组中添加创建的天地图Layer,并设置地图中心点

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
    }),
});

③创建天地图瓦片方法：

/*
 * 获取在线天地图
 * type:获取的瓦片类型，影像、矢量 
 * wkid:坐标系 
 * token:官网申请的开发者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;
}

④创建天地图Layer 

var wkid =4326;
//天地图官网申请的Token
var token =""; 
//创建天地图影像底图
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'
    })
});

//创建天地图矢量底图
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 = "";
        //创建天地图影像底图
        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'
            })
        });

        //创建天地图矢量底图
        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:坐标系
         * token:官网申请的开发者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>

 

四、实现效果：

① 矢量瓦片

天地图矢量瓦片

 

② 影像瓦片 

天地图影像瓦片

 

 

 

 

王巧_1
关注
OpenLayers6入门，OpenLayers加载天地图
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-10 1185
本章讲解如何使用OpenLayers加载天地图，需要先到天地图申请key。本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）
openlayers加载天地图
m0_51431448的博客
02-04 1867
vue集成openlayers，加载天地图
（转）Openlayers 2.X加载天地图
06-09 321
http://blog.csdn.net/gisshixisheng/article/details/44621923 概述： 在前面的章节，讲到了Arcgis for js加载天地图，在本节讲述如何在Openlayers 2.X的版本中加载天地图，并添加自己的wms服务。 效果： 地图 影像 地形 去掉本地wms 实现： 1、天地图服务 在天地...
arcgis js api 加载本地天地图瓦片
12-11
提供arcgis js api加载本地天地图瓦片的方法，dojo封装类
cesium加载高层级离线影像地图瓦片（天地图、19级Arcgis）
OuNuo5280的博客
04-17 4611
下载高清离线地图瓦片，并cesium加载
Vue+OpenLayers7入门到实战：OpenLayers7加载天地图
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
02-02 613
本章介绍如何使用OpenLayers7在地图上加载天地图.天地图瓦片访问需要先到天地图申请key。天地图官网链接本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）
OpenLayers6入门，OpenLayers加载船讯网航海地图
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-17 703
本章实现OpenLayers加载船讯网航海地图。
Openlayers 教程 01 - 初始化（helloworld ）以及加载天地图底图示例
linzi19900517的博客
02-24 2987
Openlayers 教程，主要是平时项目中用的较多的功能方法的总结，可以根据这些文章对 openlayers 进行二次封装提供给自己项目使用。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 3472
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总
最新发布
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-29 993
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
根据坐标得到天地图、谷歌地图对应瓦片
01-30
根据输入坐标，得到天地图和谷歌地图的瓦片
openlayers5加载天地图影像.zip
06-23
使用openlayers5加载天地图影像，可以供参考使用，希望可以改进代码，重新使用。
openlayer6加载天地图.html
08-02
openlayers6.* 加载在线天地图示例，换上自己的tk，直接可以运行
重写openalyers 的方法，加载天地图瓦片数据
04-07
NULL 博文链接：https://qinchaoyong.iteye.com/blog/1564085
天地图地图瓦片下载器
01-06
MapDownload 天地图地图资源下载器 支持地图类型 球面墨卡托投影(img_w:影像底图 cia_w:影像标注 vec_w:街道底图 cva_w街道标注) 需要node环境 node下载地址:https://nodejs.org/zh-cn/ gihub下载地址: (别忘了点星星) https://github.com/weshmily/MapDownload 安装依赖包 npm install or 双击install.bat文件 使用说明 更改地图下载配置 1.配置文件的路径 2.修改配置 开始下载 npm start or 双击start.bat文件 说明 1.关于并发
OpenLayers加载天地图
Moon Star
10-17 2640
Vue中使用OpenLayers加载天地图图层。网站中创建应用
Openlayers实战：加载天地图
大剑师兰特的GIS世界
07-14 1017
国家地理信息公共服务平台“天地图”（以下简称“天地图“）是国家基础地理信息中心建设的网络化地理信息共享与服务门户。其属于国家队的，有一定的权威性。在Openlayers中如何加载天地图呢，方法很简单，用XYZ的形式。它分为底图和标注，可以灵活的做配合使用。
openlayers学习——1、openlayers加载天地图
热门推荐
记录生活点滴
01-06 1万+
openlayers加载天地图 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法
OpenLayers3入门：瓦片缓存与地图操作
瓦片缓存在地图渲染中扮演着重要角色，通过预先分割地图成规律的256×256像素网格（瓦片），提高地图加载速度和性能。OpenLayers库提供了对瓦片缓存的支持，包括ol.source.XYZ和ol.source.OSM两个关键类。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值