null - 程序员宅基地

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

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

天地图在线地图资源地址：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>

本文链接：https://blog.csdn.net/u014572215/article/details/109382398

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

计算机丢失concrt140,小编教你解决concrt140 dll 【解决教程】的技巧_-程序员宅基地

文章浏览阅读4.5w次。近日有小伙伴发现电脑出现问题了，在突然遇到concrt140 dll时不知所措了，对于concrt140 dll带来的问题，其实很好解决concrt140 dll带来的问题，下面小编跟大家介绍concrt140 dll解决方法：丢失CONCRT140.dll，怎么办？答：分析及解决：网上下载这个DLL文件，将其放置到system32目录下面。重启系统，或者在CMD下面运行regsvr32*.dl..._concrt140.dll下载教程

微信小程序源码案例大全_微信小程序switch页面demo-程序员宅基地

文章浏览阅读4.3k次，点赞4次，收藏62次。微信小程序demo：足球，赛事分析小程序简易导航小程序demo：办公审批小程序Demo：电魔方小程序demo：借阅伴侣微信小程序demo：投票微信小程序demo：健康生活小程序demo：文章列表demo 微商城（含微信小程序）完整源码+配置指南微信小程序Demo：一个简单的工作系统微信小程序Demo：用于聚会的小程序微信小程序Demo：Growth 是一款..._微信小程序switch页面demo

SLAM学习笔记(Code2)----刚体运动、Eigen库_eigen.determinant-程序员宅基地

文章浏览阅读2.2k次。2.1除了#include<iostream>之外的头文件#include <Eigen/Core>//Core:核心#include <Eigen/Dense>//求矩阵的逆、特征值、行列式等#include <Eigen/Geometry>//Eigen的几何模块，可以利用矩阵完成如旋转、平移/***其他***/#include <ctime>//可用于计时，比较哪个程序更快#include <cmath>//包含a_eigen.determinant

图像梯度-sobel算子-程序员宅基地

文章浏览阅读1w次，点赞12次，收藏61次。（1）理论部分x 水平方向的梯度，其实也就是右边 - 左边，有的权重为1，有的为2 。若是计算出来的值很大说明是一个边界。y 竖直方向的梯度，其实也就是下面减上面，权重1，或2 。若是计算出来的值很大说明是一个边界。图像的梯度为：有时简化为：即：（2）程序部分函数：Sobelddepth 通常取 -1，但是会导致结果溢出，检测不出边缘，故使..._sobel算子

cuda10.1和cudnn7.6.5百度网盘下载链接（Linux版）_cudnn7.6网盘下载-程序员宅基地

文章浏览阅读3.6k次，点赞17次，收藏8次。cuda10.1和cudnn7.6.5百度网盘下载链接（Linux版）在官网下载不仅慢，，，主要是还总失败。。终于下载成功了，这里给出百度网盘下载链接，希望可以帮到别人百度网盘下载链接提取码: vyg5_cudnn7.6网盘下载

Python正则表达式大全-程序员宅基地

文章浏览阅读9.3w次，点赞69次，收藏427次。定义：正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式，该模式描述在搜索文本时要匹配的一个或多个字符串。上面都是官方的说明，我自己的理解是（仅供参考）：通过事先规定好一些特殊字符的匹配规则，然后利用这些字符进行组合来匹配各种复杂的字符串场景。比如现在的爬虫和数据分析，字符串校验等等都需要用_python正则表达式

随便推点

NILM（非侵入式电力负荷监测）学习笔记 —— 准备工作（一）配置环境NILMTK Toolkit_nilmtk学习-程序员宅基地

文章浏览阅读1.9w次，点赞27次，收藏122次。安装Anaconda，Python，pycharm我另一篇文章里面有介绍https://blog.csdn.net/wwb1990/article/details/103883775安装NILMTK有了上面的环境，接下来进入正题。NILMTK官网：http://nilmtk.github.io/因为官方安装流程是基于linux的（官方安装流程），我这里提供windows..._nilmtk学习

k8s-pod 控制器-程序员宅基地

文章浏览阅读826次，点赞20次，收藏28次。如果实际 Pod 数量比指定的多那就结束掉多余的，如果实际数量比指定的少就新启动一些Pod，当 Pod 失败、被删除或者挂掉后，RC 都会去自动创建新的 Pod 来保证副本数量，所以即使只有一个 Pod，我们也应该使用 RC 来管理我们的 Pod。label 与 selector 配合，可以实现对象的“关联”，“Pod 控制器” 与 Pod 是相关联的 —— “Pod 控制器”依赖于 Pod，可以给 Pod 设置 label，然后给“控制器”设置对应的 selector，这就实现了对象的关联。

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

智能推荐

计算机丢失concrt140,小编教你解决concrt140 dll 【解决教程】的技巧_-程序员宅基地

微信小程序源码案例大全_微信小程序switch页面demo-程序员宅基地

SLAM学习笔记(Code2)----刚体运动、Eigen库_eigen.determinant-程序员宅基地

图像梯度-sobel算子-程序员宅基地

cuda10.1和cudnn7.6.5百度网盘下载链接（Linux版）_cudnn7.6网盘下载-程序员宅基地

Python正则表达式大全-程序员宅基地

随便推点

NILM（非侵入式电力负荷监测）学习笔记 —— 准备工作（一）配置环境NILMTK Toolkit_nilmtk学习-程序员宅基地

k8s-pod 控制器-程序员宅基地

相关工具设置-程序员宅基地

ico引入方法_arco的ico怎么导入-程序员宅基地

Microsoft Visual Studio 2010（VS2010）正式版 CDKEY_visual_studio_2010_professional key-程序员宅基地

互联网医疗的定义及架构-程序员宅基地

推荐文章

热门文章

相关标签