笔记:openlayers加载天地图为底图

Posted oooiaaam

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了笔记:openlayers加载天地图为底图相关的知识,希望对你有一定的参考价值。

官网上有个quick start 我是在这个基础上进行修改的:

https://openlayers.org/en/latest/doc/quickstart.html

这个是官网的:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

在网页中打开如下: 

 BUT,这里,他使用的是OSM为底图 我们需要做一些修改

layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],

改为,整段代码都附上好了:(这里我修改了一下缩放比例和页面高度)

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 600px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.XYZ({
                      url: "http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=94b23cf14b33f25fbade47ecacddffb8"
                  })
              }),
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                      url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=94b23cf14b33f25fbade47ecacddffb8"
                    })
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([108.01, 32.206]),
                zoom: 9
            })
        });
    </script>
  </body>
</html>

注意,红圈里的一串数字要填写你在天地图申请到的key

 在网页中打开: 

以上是关于笔记:openlayers加载天地图为底图的主要内容,如果未能解决你的问题,请参考以下文章

公网底图调用投影问题怪现象

被天地图的key 坑了一把!!!

Openlayer加载切片地图改变地图样式

ArcGIS API for JavaScript3.x 学习笔记[3] 加载底图天地图(经纬度版)

openlayers6 mapserver加载地图底图

使用openlayers 3 在线加载天地图及GeoServer发布的地图