openlayers笔记ol.layer.Tile

最新推荐文章于 2024-01-30 22:25:27 发布

VIP文章 running_ljy

最新推荐文章于 2024-01-30 22:25:27 发布

阅读量3.3k

点赞数

分类专栏： openlayers

本文链接：https://blog.csdn.net/beiniao123/article/details/102622460

版权

//在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>

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

//把layers修改成如下：
var layers = [
        new ol.layer.Tile({
   
          source: new ol.source.OSM()
        })
      ];

在这里插入图片描述
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 ==

最低0.47元/天解锁文章

running_ljy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
openlayers笔记ol.layer.Tile

//在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="tex...
复制链接

扫一扫