我想使用canvas.getContext('2d')在 map 中绘制一些几何图形。然而，我绘制的几何图形只显示了一段时间。当我平移/缩放 map 时它会消失。如何通过这种方式绘制永久几何图形？
下面是我的代码:
<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>
最佳答案
您可以使用 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
})
});
请注意，我只是复制/粘贴了您的 Canvas 绘图并保持原样。当您平移 map 时，您的图形不会像您预期的那样锚定到 map ，因为您正在绘制静态像素坐标。在您的真实应用程序中，您可能会根据传递到 canvasFunction 的参数计算正确的像素坐标。
关于html - openlayers 3 : how to draw sth using canvas. getContext ('2d' ) 在 map 顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40839554/