ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

OpenLayers入门练习

2022-03-27 18:31:57  阅读：177  来源： 互联网

标签：map ol 入门 练习 height source OpenLayers new view


一、实验内容

  1. 练习OpenLayers的引用形式;
  2. 简单地图加载;
  3. 控件加载。

二、实验步骤

2.1 ol引用

<!doctype html>
<html lang="zh">

<head>
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <title>OpenLayers example</title>
</head>

<body>

</body>

</html>

2.2 单个地图显示

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta content="text/html;charset=UTF-8">
    <title>OpenLayers example</title>
    <link rel="stylesheet" href="./v6.5.0-dist/ol.css">
    <script src="./v6.5.0-dist/ol.js"></script>
    <style>
        html,
        body,
        div {
            height: 100%;
            width: 100%;    
            margin: 0%;
        }
    </style>

</head>

<body>
    <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: 10
          })
        });
      </script>
</body>

</html>

image-20210525005353876

2.3 两幅静态地图显示

<html>

<head>
  <meta charset="utf-8">
  <title>单个地图加载</title>
  <link href="./v6.5.0-dist/ol.css" rel="stylesheet" />
  <script src="./v6.5.0-dist/ol.js"></script>
  <style>
    html,
    body {
      height: 100%;
    }

    #map_1 {
      width: 49%;
      height: 99%;
      float: left;
    }

    #map_2 {
      width: 49%;
      height: 99%;
      float: right;
    }
  </style>
</head>

<body>
  <div id="map_1"></div>
  <div id="map_2"></div>
  <script type="text/javascript">
    var map = new ol.Map({
      target: 'map_1',
      layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
      })],
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });
    var map_2 = new ol.Map({
      target: 'map_2',
      layers: [new ol.layer.Tile({
        source: new ol.source.OSM({
          url: 'http://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'
        })
      })],
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    })
  </script>
</body>

</html>

image-20210526162312609

2.4 地图联动

<html>

<head>
  <meta charset="utf-8">
  <title>地图加载</title>
  <link href="./v6.5.0-dist/ol.css" rel="stylesheet" />
  <script src="./v6.5.0-dist/ol.js"></script>
  <style>
    html,
    body {
      height: 100%;
    }

    #map_1 {
      width: 49%;
      height: 99%;
      float: left;
    }

    #map_2 {
      width: 49%;
      height: 99%;
      float: right;
    }
  </style>
</head>

<body>
  <div id="map_1"></div>
  <div id="map_2"></div>
  <script type="text/javascript">
    var view = new ol.View({
      center: [0, 0],
      zoom: 2
    })
    var map = new ol.Map({
      target: 'map_1',
      layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
      })],
      view: view
    });
    var map_2 = new ol.Map({
      target: 'map_2',
      layers: [new ol.layer.Tile({
        source: new ol.source.OSM({
          url: 'http://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'
        })
      })],
      view: view
    })
  </script>
</body>

</html>

image-20210526162524110

2.5 视图属性-旋转角度

<html>

<head>
  <meta charset="utf-8">
  <title>地图加载</title>
  <link href="./v6.5.0-dist/ol.css" rel="stylesheet" />
  <script src="./v6.5.0-dist/ol.js"></script>
  <style>
    html,
    body {
      height: 100%;
    }

    #map_1 {
      width: 49%;
      height: 99%;
      float: left;
    }

    #map_2 {
      width: 49%;
      height: 99%;
      float: right;
    }
  </style>
</head>

<body>
  <div id="map_1"></div>
  <div id="map_2"></div>
  <script type="text/javascript">
    var view = new ol.View({
      center: [0, 0],
      zoom: 2
    })
    var map = new ol.Map({
      target: 'map_1',
      layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
      })],
      view: new ol.View({
        center: [0, 0],
        zoom: 2,
        rotation: Math.PI / 6
      })
    });
    var map_2 = new ol.Map({
      target: 'map_2',
      layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
      })],
      view: view
    })
  </script>
</body>

</html>

image-20210526162830835

2.6 视图属性-限制地图缩放级别

<html>

<head>
  <meta charset="utf-8">
  <title>地图加载</title>
  <link href="./v6.5.0-dist/ol.css" rel="stylesheet" />
  <script src="./v6.5.0-dist/ol.js"></script>
  <style>
    html,
    body {
      height: 100%;
    }

    #map_1 {
      width: 49%;
      height: 99%;
      float: left;
    }

    #map_2 {
      width: 49%;
      height: 99%;
      float: right;
    }
  </style>
</head>

<body>
  <div id="map_1"></div>
  <div id="map_2"></div>
  <script type="text/javascript">
    var view = new ol.View({
      center: [0, 0],
      zoom: 2
    })
    var map = new ol.Map({
      target: 'map_1',
      layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
      })],
      view: new ol.View({
        center: [0, 0],
        zoom: 2,
        rotation: Math.PI / 6,
        minZoom: 4,
        maxZoom: 7,
      })
    });
    var map_2 = new ol.Map({
      target: 'map_2',
      layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
      })],
      view: view
    })
  </script>
</body>

</html>

image-20210526163034044

2.7 View-缩放到范围

<html>

<head>
  <meta charset="utf-8">
  <title>地图加载</title>
  <link href="./v6.5.0-dist/ol.css" rel="stylesheet" />
  <script src="./v6.5.0-dist/ol.js"></script>
  <style>
    html,
    body {
      height: 100%;
    }

    #menu {
      position: absolute;
      top: 100px;
      left: 20px;
      z-index: 11;
    }

    .btn {
      background-color: rgba(0, 60, 136, 0.5);
      display: block;
      margin: 1px;
      padding: 0;
      color: #fff;
      font-size: 1.14em;
      text-decoration: none;
      text-align: center;
      height: 1.375em;
      border: none;
      border-radius: 0 0 2px 2px;
    }
  </style>
</head>

<body>
  <div id="map">
    <div id="menu">
      <button class="btn" onclick="fitToChangsha()">长沙市</button>
      <button class="btn" onclick="fitToPoint()">地信楼</button>
    </div>
  </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: [12952902.8394, 4852401.2052],
        zoom: 10,
      })
    });

    function fitToChangsha() {
      map.getView().fit([12560816.6134, 3273506.2545, 12591065.3310, 3281592.9487])
    }
    function fitToPoint() {
      map.getView().fit(new ol.geom.Point([12570902.1896, 3269680.4449]), { maxZoom: 18 })
    }
  </script>
</body>

</html>

image-20210526165056269

2.8 View-动画效果

<html>

<head>
  <meta charset="utf-8">
  <title>地图加载</title>
  <link href="./v6.5.0-dist/ol.css" rel="stylesheet" />
  <script src="./v6.5.0-dist/ol.js"></script>
  <style>
    html,
    body {
      height: 100%;
    }

    #menu {
      position: absolute;
      top: 100px;
      left: 20px;
      z-index: 11;
    }

    .btn {
      background-color: rgba(0, 60, 136, 0.5);
      display: block;
      margin: 1px;
      padding: 0;
      color: #fff;
      font-size: 1.14em;
      text-decoration: none;
      text-align: center;
      height: 1.375em;
      border: none;
      border-radius: 0 0 2px 2px;
    }
  </style>
</head>

<body>
  <div id="map">
    <div id="menu">
      <button class="btn" onclick="fitToChangsha()">长沙市</button>
      <button class="btn" onclick="fitToPoint()">地信楼</button>
    </div>
  </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: [12952902.8394, 4852401.2052],
        zoom: 10,
      })
    });

    var changsha = [12570902.1896, 3269680.4449];
    var changsha_center = [12571883.0743, 3277963.5524
    ];

    function fitToChangsha() {
      map.getView().animate({
        center: changsha_center,
        duration: 2000,
      })
    }

  </script>
</body>

</html>

image-20210526170000513

标签：map,ol,入门,练习,height,source,OpenLayers,new,view
来源： https://www.cnblogs.com/jiujiubashiyi/p/16063804.html

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

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有