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

2021-08-02 17:06:46 阅读：475 来源： 互联网

标签：map layer 底图 source ol openlayers Tile new 加载

官网上有个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

在网页中打开：

标签：map,layer,底图,source,ol,openlayers,Tile,new,加载
来源： https://blog.csdn.net/weixin_44396653/article/details/119328914

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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