openlayers学习(八)加载天地图各种底图_openlayer引入天地图所有底图-程序员宅基地

技术标签: geoserver  openlayers  

加载天地图的各种在线地图资源

天地图在线地图资源地址:http://lbs.tianditu.gov.cn/server/MapService.html

1、初始化地图

var rootLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
    }) //加载谷歌影像地图
});

var view = new ol.View({
    center: [113, 23],//设置地图默认中心点
    projection: 'EPSG:4326',//坐标系
    zoom: 10//默认缩放级别
});
map = new ol.Map({
    layers: [rootLayer],
    target: 'map',
    view: view
});

2、加载天地图

let img_w_url = "http://t0.tianditu.gov.cn/img_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";

let img_w = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: img_w_url
    }) //
});
map.addLayer(img_w);

每次只需要修改地址就可以了

3、加载0到7二级域名的地址的地图

let img_w_url1 = "http://t{0-7}.tianditu.gov.cn/img_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";
var openStreetMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        //url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        url: img_w_url1
    })
});
map.addLayer(openStreetMapLayer);

需要修改url中的t{0-7}

完整代码;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw Shapes</title>
    <script src="https://unpkg.com/elm-pep"></script>
    <style>
        .map {
            width: 100%;
            height: 400px;
        }
    </style>
    <link rel="stylesheet" href="../lib/openlayerv6.4.3/css/ol.css">
    <script src="../lib/openlayerv6.4.3/build/ol.js"></script>
</head>
<script>
    var map;
    function init() {
        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
            }) //加载谷歌影像地图
        });

        var view = new ol.View({
            center: [113, 23],//设置地图默认中心点
            projection: 'EPSG:4326',//坐标系
            zoom: 10//默认缩放级别
        });
        map = new ol.Map({
            layers: [rootLayer],
            target: 'map',
            view: view
        });
    }

    function addLayer1() {

        let img_w_url = "http://t0.tianditu.gov.cn/img_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";

        let img_w = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: img_w_url
            }) //
        });
        map.addLayer(img_w);
    }

    function addLayer2() {
        var imageURL = "http://t0.tianditu.gov.cn/cia_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";

        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: imageURL
            }) //加载谷歌影像地图
        });

        map.addLayer(rootLayer);

    }

    function addLayer4() {
        var imageURL = "http://t0.tianditu.gov.cn/ter_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";

        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: imageURL
            }) //加载谷歌影像地图
        });

        map.addLayer(rootLayer);

    }

    function addLayer5() {
        var imageURL = "http://t0.tianditu.gov.cn/ibo_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";
        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: imageURL
            }) //加载谷歌影像地图
        });

        map.addLayer(rootLayer);

    }

    function addLayer3() {

        var imageURL = "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=自己的key";

        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: imageURL
            }) //加载谷歌影像地图
        });

        map.addLayer(rootLayer);

    }

    function addLayer6() {
        var imageURL = "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=自己的key";
        //var imageURL = "http://t0.tianditu.gov.cn/ibo_w/wmts&x={x}&y={y}&l={z}&tk=自己的key";
        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: imageURL
            }) //加载谷歌影像地图
        });

        map.addLayer(rootLayer);

    }

    function addLayer7() {
        let img_w_url1 = "http://t{0-7}.tianditu.gov.cn/img_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";
        var openStreetMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                //url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                url: img_w_url1
            })
        });
        map.addLayer(openStreetMapLayer);
    }

</script>
<body οnlοad="init()">
<div id="map" class="map"></div>
<button οnclick="addLayer1()">影像地图</button>
<button οnclick="addLayer2()">影像注记</button>
<button οnclick="addLayer3()">矢量注记</button>
<button οnclick="addLayer4()">地形晕渲</button>
<button οnclick="addLayer5()">全球境界</button>
<button οnclick="addLayer6()">矢量底图</button>
<button οnclick="addLayer7()">影像地图使用0-7二级域名</button>
</body>
</html>

 

 

 

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u014572215/article/details/109382398

智能推荐

10000以内的同构数-程序员宅基地

文章浏览阅读597次。/*找出10000以内的同构数同构数 376*376=141376思路:1、输入一个数num 先判断是几位数。记住数位length。 2、然后算它(num)的平方, square。 3、取square的后length位的数值temp 4、temp与num相等,则是同构数。*/#include <iostream>#include &..._小于10000的同构数

js实现文字转语音功能tts_js tts-程序员宅基地

文章浏览阅读5.1k次,点赞3次,收藏26次。写了很久的语音呼叫功能、调用在线语音合成的调用系统自带的;现在客户又要求搞网页版的语音呼叫还是不带联网的。客户太难伺候了详细使用请参考 【web语音API】完整代码<!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>网页文字转语音</title><meta http-equiv="Content-Typ._js tts

Java经典问题(百僧吃百馍)-程序员宅基地

文章浏览阅读62次。System.out.println("100个和尚吃了100个馒头 ,100和尚有大和尚和小和尚,一个大和尚能吃3馒头,三个小和尚吃1个馒头,问大和尚和小和尚有多少个?System.out.println("大和尚有"+i+"个人");System.out.println("小和尚有"+j+"个人");System.out.println("查看答案请按回车键");

vacode模块使用报错的问题_indesssss.html:1 access to script at 'file:///i:/v-程序员宅基地

文章浏览阅读651次。在vscode中是用模块化的时候会出现报错,提示如下Access to script at ‘file:///F:/%E5%AD%A6%E4%B9%A0/%E7%BA%BF%E4%B8%8BJS/test/js./modul.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, ch_indesssss.html:1 access to script at 'file:///i:/vscode/cheshi/tesss.js' fro

华三SDN产业链分析-程序员宅基地

文章浏览阅读218次。为什么80%的码农都做不了架构师?>>> ..._h3c virtual converged framework切片

手把手教你开发第一个HarmonyOS (鸿蒙)移动应用_鸿蒙移动应用开发-程序员宅基地

文章浏览阅读1.9w次,点赞44次,收藏268次。AndroidIOSHarmonyOS (鸿蒙)文档概览-HarmonyOS应用开发官网2.1.1 系统的定位搭载该操作系统的设备在系统层⾯融为⼀体、形成超级终端,让设备的硬件能⼒可以弹性 扩展,实现设备之间 硬件互助,资源共享。对消费者⽽⾔,HarmonyOS能够将⽣活场景中的各类终端进⾏能⼒整合,实现不同终端 设备之间的快速连接、能⼒互助、资源共享,匹配合适的设备、提供流畅的全场景体验。⾯向开发者,实现⼀次开发,多端部署。_鸿蒙移动应用开发

随便推点

设计模式--组合模式-程序员宅基地

文章浏览阅读47次。定义:允许将对象组成树形结构来表现 “整体/部分” 层次结构。组合能让客户以一致的方式处理个别对象及对象组合。说白了,就是类似于树形结构。 只是它要求子节点和父节点都具备统一的接口。类图如下:示例如下:比如我们常见的电脑上的目录,目录下面有文件夹,也有文件,然后文件夹里面还有文件及文件夹。这样一层层形成了树形结构。示例代码如下:#include <iostream>#include <stdio.h>#include "string"#includ..

Kotlin相关面试题_kotlin面试题-程序员宅基地

文章浏览阅读1.9w次,点赞26次,收藏185次。目录一.请简述下什么是kotlin?它有什么特性?二.Kotlin 中注解 @JvmOverloads 的作用?三.Kotlin中的MutableList与List有什么区别?四.kotlin实现单例的几种方式?五. kotlin中关键字data的理解?相对于普通的类有哪些特点?六.什么是委托属性?简单说一下应用场景?七.kotlin中with、run、apply、let函数的区别?一般用于什么场景?八.kotlin中Unit的应用以及和Java中void的区别?九.Ko_kotlin面试题

HEVC英文缩写及部分概念整理(1)--博主整理_反量化 英文缩写-程序员宅基地

文章浏览阅读2.8k次。有这个想法一方面是确实很多时候会记不得一些缩写是什么意思。另外也是受 http://blog.csdn.net/lin453701006/article/details/52797415这篇博客的启发,本文主要用于自己记忆 内容主要整理自http://blog.sina.com.cn/s/blog_520811730101hmj9.html http://blog.csdn.net/feix_反量化 英文缩写

超级简单的Python爬虫入门教程(非常详细),通俗易懂,看一遍就会了_爬虫python入门-程序员宅基地

文章浏览阅读7.3k次,点赞6次,收藏36次。超级简单的Python爬虫入门教程(非常详细),通俗易懂,看一遍就会了_爬虫python入门

python怎么输出logistic回归系数_python - Logistic回归scikit学习系数与统计模型的系数 - SO中文参考 - www.soinside.com...-程序员宅基地

文章浏览阅读1.2k次。您的代码存在一些问题。首先,您在此处显示的两个模型是not等效的:尽管您将scikit-learn LogisticRegression设置为fit_intercept=True(这是默认设置),但您并没有这样做statsmodels一;来自statsmodels docs:默认情况下不包括拦截器,用户应添加。参见statsmodels.tools.add_constant。另一个问题是,尽管您处..._sm fit(method

VS2017、VS2019配置SFML_vsllfqm-程序员宅基地

文章浏览阅读518次。一、sfml官网下载32位的版本 一样的设置,64位的版本我没有成功,用不了。二、三、四以下这些内容拷贝过去:sfml-graphics-d.libsfml-window-d.libsfml-system-d.libsfml-audio-d.lib..._vsllfqm

推荐文章

热门文章

相关标签