openlayers 3：如何在地图顶部使用 canvas.getContext('2d') 绘制某物

Question

我想使用 canvas.getContext('2d') 在地图中绘制一些几何图形。但是，我绘制的几何图形只显示了一会儿。当我 pan/zoom 地图时它消失了。如何通过这种方式画出永久几何体？

下面是我的代码：

<html>
<head>
    <title></title>
    <!-- styles -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.19.1/ol.css"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.19.1/ol.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        var map;
        function init()
        {
            var raster = new ol.layer.Tile({
                            title:'basemap',
                 source: new ol.source.Stamen({
                   layer: 'toner'
                 })
               });

            map = new ol.Map( {layers:[raster],target:'map',  view: new ol.View({
      center: [113,25],
                projection: 'EPSG:4326',
      zoom: 6
    })} );

        };


        function drawSth(){
            var canvas = $("canvas")[0];
            var context = canvas.getContext('2d');
            // begin custom shape
                  context.beginPath();
                  context.moveTo(170, 80);
                  context.bezierCurveTo(130, 100, 130, 150, 230, 150);
                  context.bezierCurveTo(250, 180, 320, 180, 340, 150);
                  context.bezierCurveTo(420, 150, 420, 120, 390, 100);
                  context.bezierCurveTo(430, 40, 370, 30, 340, 50);
                  context.bezierCurveTo(320, 5, 250, 20, 250, 50);
                  context.bezierCurveTo(200, 5, 150, 20, 170, 80);

                  // complete custom shape
                  context.closePath();
                  context.lineWidth = 5;
                  context.fillStyle = '#8ED6FF';
                  context.fill();
                  context.strokeStyle = 'blue';
                  context.stroke();
        }

    </script>

</head>

<body onload="init()">

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

    <div id="controls">         
        <button onclick="drawSth();">just draw sth</button></br></br>
    </div>

</body>

Answer 1

您可以使用 ol.source.ImageCanvas 及其 canvas 函数来做到这一点。

jsFiddle: https://jsfiddle.net/45oxL7rf/

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      title: 'basemap',
      source: new ol.source.Stamen({ layer: 'toner' })
    }),
    new ol.layer.Image({
      source: new ol.source.ImageCanvas({
        canvasFunction: function (extent, resolution, pixelRatio, size, projection) {
          var canvas = document.createElement('canvas');
          canvas.width = size[0];
          canvas.height = size[1];

          var context = canvas.getContext('2d');
          // begin custom shape
          context.beginPath();
          context.moveTo(170, 80);
          context.bezierCurveTo(130, 100, 130, 150, 230, 150);
          context.bezierCurveTo(250, 180, 320, 180, 340, 150);
          context.bezierCurveTo(420, 150, 420, 120, 390, 100);
          context.bezierCurveTo(430, 40, 370, 30, 340, 50);
          context.bezierCurveTo(320, 5, 250, 20, 250, 50);
          context.bezierCurveTo(200, 5, 150, 20, 170, 80);

          // complete custom shape
          context.closePath();
          context.lineWidth = 5;
          context.fillStyle = '#8ED6FF';
          context.fill();
          context.strokeStyle = 'blue';
          context.stroke();

          return canvas;
        },
        projection: 'EPSG:3857'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([-97, 38]),
    zoom: 4
  })
});

请注意，我只是 copy/pasted 你的 canvas 绘图并保持原样。当您平移地图时，您的图形将不会像您预期的那样锚定到地图上，因为您正在绘制静态像素坐标。在您的真实应用中，您可能会根据传递给 canvas 函数的参数计算正确的像素坐标。

openlayers 3：如何在地图顶部使用 canvas.getContext('2d') 绘制某物

openlayers 3: how to draw sth using canvas.getContext('2d') on top of the map

html

canvas

openlayers-3