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

问题描述 投票：0回答：3

我已将 openmaps 中的一小部分地图保存为 png 格式。 IE 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;

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

如何让 openlayers 将这些范围映射到此图像？

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

<!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>
openlayers
3个回答
1
投票

您可以使用ol.proj函数：transformExtent

let extent = [-1.201857,51.87670,-1.093555,51.928750];
let new_extent = ol.proj.transformExtent(extent,'EPSG:4326','EPSG:3857')

0
投票

试试这个

// Initiating Map
  const Map = new ol.Map({
    view: new ol.View({
      center: [76.34, 19.61], // X,Y
      zoom: 6.5,
      // rotation: 0.1,
      projection: 'EPSG:4326'
    }),
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM(),
        zIndex: 1,
        visible: false,
        extent: [66.41, 7.25, 99.35, 36.9]
      })
    ],
    // You map div with id='map'
    target: 'map',
    // change of expression in V7
    controls: ol.control.defaults.defaults({
      zoom: true,
      attribution: true,
      rotate: false
    })
  })
-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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.