Question

也就是说，我想把这个。

strong text into something like this

 _____
|     |
|     |
|     |
 -----

    ____
   /    \
  /      \
 /        \
 ----------

Answer 1

纯粹使用OpenLayers，你可以重新投射图像，类似于OpenLayers的例子。https:/openlayers.orgenlatestexamplesreprojection-image.html。 但你可以定义你自己的投影和变换，而不是使用proj4投影。

var viewProjection = "EPSG:3857";

var imageExtent = [1000000, 7000000, 2000000, 7500000];

var bottomLeft = ol.extent.getBottomLeft(imageExtent);
var left = bottomLeft[0];
var bottom = bottomLeft[1];
var width = ol.extent.getWidth(imageExtent);
var height = ol.extent.getHeight(imageExtent);

var imageProjection = new ol.proj.Projection({
  code: "xkcd-image",
  extent: imageExtent
});

var narrowing = 0.5;

ol.proj.addCoordinateTransforms(
  imageProjection,
  viewProjection,
  function(coordinate) {
return [
  (coordinate[0] - left - width / 2) *
    ((height - (coordinate[1] - bottom) * narrowing) / height) +
    left +
    width / 2,
  coordinate[1]
];
  },
  function(coordinate) {
return [
  (coordinate[0] - left - width / 2) /
    ((height - (coordinate[1] - bottom) * narrowing) / height) +
    left +
    width / 2,
  coordinate[1]
];
  }
);

var viewExtent = ol.proj.transformExtent(imageExtent, imageProjection, viewProjection);

var map = new ol.Map({
  layers: [
new ol.layer.Tile({
  source: new ol.source.OSM()
}),
new ol.layer.Image({
  source: new ol.source.ImageStatic({
    attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
    url: "https://imgs.xkcd.com/comics/online_communities.png",
    projection: imageProjection,
    imageExtent: imageExtent
  })
})
  ],
  target: "map",
  view: new ol.View({ projection: viewProjection })
});

map.getView().fit(viewExtent);

html,
body,
.map {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://openlayers.org/en/v6.3.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<div id="map" class="map"></div>