openlayers 3: как рисовать sth с помощью canvas.getContext ('2d') в верхней части карты

Я хочу нарисовать некоторую геометрию на карте, используя canvas.getContext ('2d'). Однако геометрия, которую я нарисовал, показывается только на некоторое время. Он исчезает, когда я панорамирую/масштабирую карту. Как я могу провести постоянную геометрию таким образом?openlayers 3: как рисовать sth с помощью canvas.getContext ('2d') в верхней части карты

Ниже мой код:

<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>

источник

2016-11-28 Ying XIONG

Оказалось, что такая сложная задача привязать графику к карте. Я написал функцию «canvasOverlay», которая будет прослушивать действия pointerdrag и moveend карты. Хотя это сработало, эффект был не очень хорошим. –

Вы можете сделать это с ol.source.ImageCanvas и его canvasFunction.

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

Обратите внимание, что я просто скопировать/вставить свой холст рисунок и оставил как есть. Когда вы скопируете карту, ваша графика не будет привязана к карте, как вы могли бы ожидать, так как вы рисуете статические координаты пикселей. В вашем реальном приложении вы, вероятно, будете вычислять правильные координаты пикселей на основе аргументов, переданных в ваш canvasFunction.

источник

2016-11-28 17:53:51

Джефф, спасибо за подсказку canvasFunction. Я мог бы справиться с остальными с помощью примера openlayers. –

Рад, что помогло вам! Если вы считаете это хорошим ответом, не могли бы вы отметить его как «Ответ»? Спасибо и удачи! –

Прошу прощения за поздний ответ. Недавно я занят другим проектом. Конечно, ваш ответ ответил на мой вопрос. Благодарю вас и наслаждайтесь! –

openlayers 3: как рисовать sth с помощью canvas.getContext ('2d') в верхней части карты

ответ

Смежные вопросы