我想用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>
最佳答案
您可以使用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中的参数计算正确的像素坐标。