Html openlayers 3：如何在地图顶部使用canvas.getContext（'；2d'；）绘制某物
我想使用canvas.getContext（'2d'）在地图中绘制一些几何图形。然而，我绘制的几何图形只显示了一段时间。当我平移/缩放地图时，它将消失。如何通过这种方式绘制永久几何体 下面是我的代码：Html openlayers 3：如何在地图顶部使用canvas.getContext（'；2d'；）绘制某物,html,canvas,openlayers-3,Html,Canvas,Openlayers 3,我想使用canvas.getContext（'2d'）在地图中绘制一些几何图形。然而，我绘制的几何图形只显示了一段时间。当我平移/缩放地图时，它将消失。如何通过这种方式绘制永久几何体 下面是我的代码： <html> <head> <title></title> <!-- styles --> <link rel="stylesheet" type="text/css" href="https://cdnjs
<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>
var映射；
函数init（）
{
var raster=新建ol.layer.Tile({
标题：'basemap'，
来源：新ol.source.雄蕊({
图层：“碳粉”
})
});
map=new ol.map（{图层：[光栅]，目标：'map'，视图：new ol.view({
中心：[113,25]，
投影：‘EPSG:4326’，
缩放：6
})} );
};
函数{
var canvas=$（“canvas”）[0]；
var context=canvas.getContext（'2d'）；
//开始自定义形状
context.beginPath（）；
上下文。moveTo（170,80）；
贝塞尔曲线图（130100130150230150）；
贝塞尔曲线图（250180320180340150）；
贝塞尔曲线图（420150420120390100）；
贝塞尔曲线图（430、40370、30340、50）；
贝塞尔曲线图（320,5250,20250,50）；
贝塞尔曲线图（200,5150,20170,80）；
//完全自定义形状
closePath（）；
context.lineWidth=5；
context.fillStyle='#8ED6FF'；
context.fill（）；
context.strokeStyle='blue'；
stroke（）；
}
画画
您可以使用ol.source.ImageCanvas及其canvas功能来实现这一点 jsFiddle：
请注意，我只是复制/粘贴了您的画布绘图，并保持原样。平移地图时，图形将不会像预期的那样固定到地图上，因为您正在绘制静态像素坐标。在您真正的应用程序中，您可能会根据传入canvasFunction的参数计算正确的像素坐标。Jeff，非常感谢canvasFunction提供的线索。我可以用openlayers示例来处理其余的部分。很高兴这对您有所帮助！如果你认为这是一个好的答案，请你把它标记为“回答”好吗？谢谢你，祝你好运！很抱歉回复晚了。我最近正忙于另一个项目。你的回答当然回答了我的问题。谢谢你，祝你愉快！事实证明，将图形锚定到地图上是一件非常困难的事情。我已经编写了一个函数“canvasOverlay”，它将监听map的pointerdrag和moveend事件。虽然成功了，但效果不太好。
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
})
});