Openlayers 3 Openlayers 3：在自定义静态图像上使用预定义单位绘制网格线（分划）

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

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

我试图将以下代码附加到脚本中。但是，

ol.Graticule

类似乎与自定义的

ol.proj.Projection

定义不兼容

上面的代码有什么问题

---

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

我也遇到了同样的问题。为了实现这一点，我创建了一个向量层（在这里绘制轴）。 要绘制轴，我需要听

View

changes

每当视图发生更改时，计算视图的实际范围

使用图像的范围信息和（

[width，height]

，然后可以绘制轴）

让listenerAxis=null，
w=0，
h=0
const xaxistyle=新的ol.style.style({
笔划：新的ol风格笔划({
颜色：“红色”，
宽度：2
})
})
const yaxistyle=新ol.style.style({
笔划：新的ol风格笔划({
颜色：“绿色”，
宽度：2
})
})
const ImageLayer=新的ol.layer.Image（）
const AxisLayer=new ol.layer.Vector（{source:new ol.source.Vector（）}）
AxisLayer.setStyle（（功能，分辨率）=>{
如果（feature.getProperties（）.axis=='x'）{
返回xAxisStyle
}
返回yAxisStyle
})
常量渲染器=新ol.Map({
目标：“地图”，
图层：[图像图层]
})
AxisLayer.setMap（渲染器）
进程文件（'https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426')
函数removeAxis（）{
AxisLayer.getSource（）.clear（）
ol.可观察的unByKey（listenerAxis）
listenerAxis=null
}
函数drawAxis（）{
函数绘图（）{
AxisLayer.getSource（）.clear（）
const extent=renderer.getView（）.calculateExtent（）
常数[xmin，ymin，xmax，ymax]=范围
//EJEX
常量axisX=新的ol.geom.LineString（[[xmin，h/2]，[xmax，h/2]]）
常量axisY=新的ol.geom.LineString（[[w/2，ymin]，[w/2，ymax]]
const featureX=新的ol.Feature（{geometry:axix，axis:'x'}）
const featureY=新的ol.Feature（{geometry:axisY，axis:'y'}）
AxisLayer.getSource（）.addFeatures（[featureX，featureY]）
}
listenerAxis=renderer.getView（）.on（'change'，draw）
画（）
}
异步函数processFile（路径）{
ImageLayer.setSource（）
removeAxis（）
如果（！路径）{
返回
}
常量[wi，hi]=等待读取映像（路径）
w=wi
h=你好
常量源=getImageStatic（路径，w，h）
const view=getViewForImage（w，h）
ImageLayer.setSource（源）
renderer.setView（视图）
drawAxis（）
}
//一些助手
函数readImage（localPath）{
常量img=document.createElement（'img'）
返回新承诺（（res，rej）=>{
img.src=localPath
img.addEventListener（'加载'，（事件）=>{
常数{naturalWidth，naturalHeight}=img
console.log（'img'，自然宽度，自然高度）
res（[自然宽度，自然高度]）
})
})
}
函数getViewForImage（w，h）{
返回新的ol.View({
中心：[w/2，h/2]，
缩放：2，
投影：新的ol.proj.PROJECT({
范围：[0，0，w，h]，
单位：'像素'
}),
范围：[0，0，w，h]
})
}
函数getImageStatic（路径，w，h）{
返回新的ol.source.ImageStatic({
url:path，
imageExtent:[0，0，w，h]
})
}

#地图{
宽度：100%；
身高：100%；
背景：灰色；
}

---

嘿，你解决了这个问题吗？

// 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
      });

// 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);