Question

我用openlayer 3.15.1编写了这个简短的javascript代码，它加载了一个带有四层的地图：第一个是从Openstreetmap获取的基础层，第二个和第三个是矢量图层，最后一个是jpg图像（光栅图像）我在本地存储。为什么我无法加载光栅图像????

var regStyle = new ol.style.Style ({

           fill: new ol.style.Fill({

            color: 'rgba(127,129,112,0.3)'


           }),
           stroke: new ol.style.Stroke({

            color: 'green', width: 2})                             
        });


var reg = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'http://localhost:8080/Project_first/assets/geojson/regioni.geojson',
    format: new ol.format.GeoJSON(),
    projection: 'EPSG:3857' 
  }),

  style: regStyle
});




var prov = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'http://localhost:8080/Project_first/assets/kml/province.kml',
    format: new ol.format.KML(),
    projection: 'EPSG:3857'

  })
});


  var base_layer = new ol.layer.Tile({

    source: new ol.source.OSM()
  }); 

  var italy = ol.proj.fromLonLat([14.334, 40.965])

  var view = new ol.View({

    center: italy,
    zoom: 6,
  });


var scale = new ol.control.ScaleLine({

  className: 'ol-scale-line',
  target: document.getElementById('scale-line')
});




  var mousePositionControl = new ol.control.MousePosition({
        coordinateFormat: ol.coordinate.createStringXY(2),
        projection: 'EPSG:3857',
        // comment the following two lines to have the mouse position
        // be placed within the map.
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        undefinedHTML: '&nbsp;'
      });







var raster=  new ol.layer.Image ({
        source: [
                 new ol.source.ImageStatic({

                     imageExtent: [0, 0, 1024, 968],
                     projection: new ol.proj.Projection ({
                         code: 'EPSG:3857'

                     }) ,
                     url: 'http://localhost:8080/Project_first/assets/img/allertaMeteo2.jpg',
                    })]
    });



  var scale = new ol.control.ScaleLine();

  var map = new ol.Map({

     controls: ol.control.defaults({
          attributionOptions: ({  collapsible: false })

           }).extend([mousePositionControl, scale]),

    target: 'map',
    layers: [base_layer, prov,reg, raster],
    view: view

  });





  function initMap()
{
    // do map object creation and initialization here
    // ...

    // add a click event handler to the map object
    GEvent.addListener(map, "click", function(overlay, latLng)
    {
        // display the lat/lng in your form's lat/lng fields
        document.getElementById("lat").value = latLng.lat();
        document.getElementById("lng").value = latLng.lng();
    });
}

Answer 1

我认为问题在于您已经以像素为单位指定了图像范围，而不是在静态图像源中指定为3857的地图投影单位。可能在这里使用所有像素。但是，我在当前项目中所做的是对EPSG 3857投影中的图像进行地理配准，然后在该坐标系中指定图像范围。代码摘要：

source: new ol.source.ImageStatic({
        url: "images/ndfd/conus/mercator/maxt_2016020200.png",
        imageSize: [3328, 2048],
        imageExtent: [-15028131.257, 1878516.407,-6887893.493, 6887893.493],
        projection: ovProj

    }),

ovProj变量设置为3857投影。如果您打算保留像素，建议您检查OpenLayers示例页面上的静态图像示例。

Openlayers 3光栅图像叠加

1 个答案: