openlayers-3 - 开放层 3 : Drawing grid lines (graticule) with predefined units on the custom static image

Question

我正在尝试在静态图像上绘制自定义 x-y 轴网格线，即图像像素而不是纬度和经度。理想情况下，当我拖动/缩放/滚动图像时，网格线应该动态重绘，就像 Photoshop 中的 x-y 标尺条一样。

我遇到了下面的代码示例，它提供了一个自定义投影功能，可以直接将图像像素坐标映射到 map 坐标。

http://openlayers.org/en/latest/examples/static-image.html

// Map views always need a projection.  Here we just want to map image
// coordinates directly to map coordinates, so we create a projection that uses
// the image extent in pixels.
var extent = [0, 0, 1024, 968];
var projection = new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
      });

我尝试将以下代码附加到脚本中。但是，ol.Graticule 类似乎与自定义 ol.proj.Projection 定义不兼容。

http://openlayers.org/en/latest/examples/graticule.html

// Create the graticule component
var graticule = new ol.Graticule({
// the style to use for the lines, optional.
strokeStyle: new ol.style.Stroke({
  color: 'rgba(255,120,0,0.9)',
  width: 2,
  lineDash: [0.5, 4]
  })
});
graticule.setMap(map);

上面的代码有什么问题？

附言我知道提供动态比例尺的 Openseadragon API。但是，我希望坚持使用 Openlayers API，因为我在静态图像的预定义位置还有一个额外的 anchor map 层。

Answer 1

我遇到了同样的问题。为此，我创建了一个矢量图层(绘制轴的位置)。要绘制轴，我需要监听 View 的变化。

每当 View 发生变化时，计算 View 的实际范围。

有了图像的范围信息和([width, height]，就可以画轴了)

let listenerAxis = null,
    w = 0,
    h = 0

const xAxisStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: 'red',
    width: 2
  })
})

const yAxisStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: 'green',
    width: 2
  })
})


const ImageLayer = new ol.layer.Image()

const AxisLayer = new ol.layer.Vector({ source: new ol.source.Vector() })

AxisLayer.setStyle((feature, resolution) => {
  if(feature.getProperties().axis == 'x') {
    return xAxisStyle
  }
  return yAxisStyle
})

const renderer = new ol.Map({
  target: 'map',
  layers: [ImageLayer]
})

AxisLayer.setMap(renderer)

processFile('https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426')



function removeAxis() {
  AxisLayer.getSource().clear()
  ol.Observable.unByKey(listenerAxis)
  listenerAxis = null
}

function drawAxis() {
  function draw(){
    AxisLayer.getSource().clear()
    const extent = renderer.getView().calculateExtent()
    const [xmin, ymin, xmax, ymax] = extent
    // Eje X
    const axisX = new ol.geom.LineString([ [xmin, h / 2], [xmax, h / 2] ])
    const axisY = new ol.geom.LineString([ [w / 2, ymin], [w / 2, ymax] ])

    const featureX = new ol.Feature({ geometry: axisX, axis: 'x' })
    const featureY = new ol.Feature({ geometry: axisY, axis: 'y' })

    AxisLayer.getSource().addFeatures([featureX, featureY])
  }

  listenerAxis = renderer.getView().on('change', draw)
  draw()

}


async function processFile(path) {

  ImageLayer.setSource()
  removeAxis()

  if(!path) {
    return 
  }


  const [wi, hi] = await readImage(path)
  w = wi
  h = hi

  const source = getImageStatic(path, w, h)
  const view = getViewForImage(w, h)


  ImageLayer.setSource(source)
  renderer.setView(view)
  drawAxis()
}


// Some helpers
function readImage(localPath) {
  const img = document.createElement('img')
  return new Promise((res, rej) => {
    img.src = localPath
    img.addEventListener('load', (event) => {
      const { naturalWidth, naturalHeight } = img
      console.log('img', naturalWidth, naturalHeight)
      res([naturalWidth, naturalHeight])
    })
  })
}

function getViewForImage(w, h) {
  return new ol.View({
    center: [w / 2, h / 2],
    zoom: 2,
    projection: new ol.proj.Projection({
      extent: [0, 0, w, h],
      units: 'pixels'
    }),
    extent: [0, 0, w, h]
  })
}

function getImageStatic(path, w, h) {
  return new ol.source.ImageStatic({
    url: path,
    imageExtent: [0, 0, w, h]
  })
}

#map {
  width: 100%;
  height: 100%;
  background: grey;
}

<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>

<div id="map"></div>