openlayers 3:如何在地图顶部使用canvas.getContext('2d')绘制图形 [英] openlayers 3: how to draw sth using canvas.getContext('2d') on top of the map
问题描述
我想使用canvas.getContext('2d')在地图上绘制一些几何图形.但是，我绘制的几何图形仅显示了一段时间.当我平移/缩放地图时，它消失了.如何通过这种方式绘制永久几何图形?
I want to draw some geometry in the map using canvas.getContext('2d'). However, the geometry I've drawn just show for a while. It disappear when I pan/zoom the map. How can I draw a permanent geometry through this way?
下面是我的代码:
<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来实现.
You can do that with an ol.source.ImageCanvas and its canvasFunction.
jsFiddle: https://jsfiddle.net/45oxL7rf/
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的参数来计算正确的像素坐标.
Note that I just copy/pasted your canvas drawing and left it as is. As you pan the map, your graphic will not be anchored to the map as you might expect, since you're drawing to static pixel coordinates. In your real app, you'll likely be calculating the proper pixel coordinates based on the arguments passed into your canvasFunction.
这篇关于openlayers 3:如何在地图顶部使用canvas.getContext('2d')绘制图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
