Question

我从openmaps中保存了一个小的地图部分作为png。即 https://www.openstreetmap.org/search?whereami=1&query=51.8990%2C-1.1527#map=13/51.8989/-1.1528

该地区的经度和纬度是

north = -1.20196;
west = 51.92898;
south = -1.09331;
east =  51.87702;

我想将此图像映射到这些范围，以便可以在各种经度，纬度坐标。

如何获取openlayer将这些范围映射到此图像？

我到目前为止所拥有的如下。但是，地图不会显示。

<!DOCTYPE html>
<html>
<head>
<title>Static image example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>

</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
  </div>
</div>

</div>
<script>

var north = -1.20196;
var west = 51.92898;
var south = -1.09331;
var east =  51.87702;

var ovProj = ol.proj.get('EPSG:3857');

var map = new ol.Map({

  target: 'map',
  view: new ol.View({
    projection: ovProj,
    center: ol.proj.fromLonLat([-1.1527,51.8990]), // Coordinates of Bicester
    zoom: 1
  })
});


// [east, north, west, south] 
var extent = ol.proj.transformExtent([east, north, west, south] , 'EPSG:4326', 'EPSG:3857');
var imageLayer = new ol.layer.Image({
  source: new ol.source.ImageStatic({
        imageSize: [2215,1716],
                url: './bicester.png',
                imageExtent: extent,
                projection: ovProj
              })
});
map.addLayer(imageLayer);


// Show center marker
var marker = new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([-1.1527,51.8990])
  ),  
});
var vectorSource = new ol.source.Vector({
  features: [marker]
});
var markerVectorLayer = new ol.layer.Vector({
  source: vectorSource,
});
map.addLayer(markerVectorLayer);


</script>
</body>
</html>

Answer 1

使用以下代码进行此操作。

<!DOCTYPE html>
<html>
  <head>
    <title>Static image example</title>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>

  </head>
  <body>
    <div id="map" class="map"></div>
    <script>

      var north = 51.928750;
      var west = -1.201857;
      var south = 51.87670;
      var east =  -1.093555;

      var newlonLat = ol.proj.transform([west, north], "EPSG:4326", "EPSG:3857");
      var west_3857 = newlonLat[0];
      var north_3857 = newlonLat[1];

      newlonLat = ol.proj.transform([east, south], "EPSG:4326", "EPSG:3857");
      var east_3857 = newlonLat[0];
      var south_3857 = newlonLat[1];

    var extent = [west_3857, south_3857, east_3857, north_3857];

    var projection = new ol.proj.Projection({
        extent: extent
    });

    var map = new ol.Map({
        target: 'map',
        view: new ol.View({
        projection: projection,
        center: ol.extent.getCenter(extent),
        zoom: 0,
        resolution: 12,        // important for 100% image size!
            maxResolution: 12,
        }),
        controls: [],
    });

    var im_layer = new ol.layer.Image({
        source: new ol.source.ImageStatic({
        url: './bicester.png',  // image size is 128x128 px
        projection: projection,
        imageExtent: extent
        })
    })
    map.addLayer(im_layer)

    </script>
  </body>
</html>

Openlayers将经度和纬度范围映射到一个图像

1 个答案: