openlayers笔记ol.layer.Tile

作者：小丑西瓜9 | 2024-05-20 00:15:28

踩

//在EPSG:4326中创建map
<!DOCTYPE html>
<html>
  <head>
    <title>EPSG:4326</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var layers = [
        new ol.layer.Tile({
   
          source: new ol.source.TileWMS({
   
            url: 'https://ahocevar.com/geoserver/wms',
            params: {
   
              'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
              'TILED': true
            }
          })
        })
      ];
      var map = new ol.Map({
   
        controls: ol.control.defaults().extend([
          new ol.control.ScaleLine({
   
            units: 'degrees'
          })
        ]),
        layers: layers,
        target: 'map',
        view: new ol.View({
   
          projection: 'EPSG:4326' /'EPSG:3857',
          center: [0, 0],
          zoom: 2
        })
      });
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

当view中EPSG:4326时的图片 WMS
当view中为EPSG:3857时WMS

//把layers修改成如下：
var layers = [
        new ol.layer.Tile({
   
          source: new ol.source.OSM()
        })
      ];
1
2
3
4
5
6
7

在这里插入图片描述
EPSG:3857

<!DOCTYPE html>
<html>
  <head>
    <title>Reprojection with EPSG.io Search</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <form class="form-inline">
      <label for="epsg-query">Search projection:</label>
      <input type="text" id="epsg-query" placeholder="4326, 27700, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
      <button id="epsg-search" class="btn">Search</button>
      <span id="epsg-result"></span>
      <div>
        <label for="render-edges">
          Render reprojection edges
          <input type="checkbox" id="render-edges">
        </label>
      </div>
    </form>
    <script>
      var map = new ol.Map({
   
        layers: [
          new ol.layer.Tile({
   
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
   
          projection: 'EPSG:4326',
          center: [0, 0],
          zoom: 1
        })
      });
      var queryInput = document.getElementById('epsg-query');
      var searchButton = document.getElementById('epsg-search');
      var resultSpan = document.getElementById('epsg-result');
      var renderEdgesCheckbox = document.getElementById('render-edges');

      function setProjection(code, name, proj4def, bbox) {
   
        if (code === null || name ==
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/595201