OpenLayers3添加ImageCanvas作为图层

74 阅读 0 评论 49 点赞

我是靠谱客的博主勤恳裙子，这篇文章主要介绍OpenLayers3添加ImageCanvas作为图层，现在分享给大家，希望可以做个参考。

ol3中的ImageCanvas天然就是为了让用户将Canvas画的图像添加到地图中作为图层。

下面给出代码：

复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加一个Canvas图层</title>
<script type="text/javascript" src="../build/ol-debug.js" ></script>
<link rel="stylesheet" href="../css/ol.css" />
</head>
<body>
	<div id="map" class="map"></div>
<script>
var isFirst=true;//是否第一次加载该canvas图层
var canvasOption=new Object();
//ImageCanvas有一个canvasFunction属性
//通过查看源代码，发现该属性其实是一个回调函数，需要对该函数进行实现，从而创建一个canvas
//创建回调函数如下
canvasOption.canvasFunction=function(extent, resolution, pixelRatio, size, projection){
if(isFirst)//这里必须要做一个判断，每次的范围变动都会引起重绘，从而触发该回调函数，不判断的话，将会导致canvas无法被绘制到地图上，出现闪现的情况
{
isFirst=false;
var canvas=document.createElement('canvas');
canvas.width=size[0];
canvas.height=size[1];
var context = canvas.getContext('2d');
context.fillStyle = "blue";
context.fillRect(0,0,1000,1000);
return canvas;
}
};
//为ImageCanvasLayer创建数据源
var imageCanvas=new ol.source.ImageCanvas(canvasOption);
//创建一个ImageCanvasLayer图层
var imageCanvasLayer=new ol.layer.Image({
source:imageCanvas
});
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()//这里使用ol自带的一个地图图层作为底图
}),
imageCanvasLayer
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-10997148, 4569099],
zoom: 4
})
});
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加一个Canvas图层</title>
<script type="text/javascript" src="../build/ol-debug.js" ></script>
<link rel="stylesheet" href="../css/ol.css" />
</head>
<body>
	<div id="map" class="map"></div>
<script>
var isFirst=true;//是否第一次加载该canvas图层
var canvasOption=new Object();
//ImageCanvas有一个canvasFunction属性
//通过查看源代码，发现该属性其实是一个回调函数，需要对该函数进行实现，从而创建一个canvas
//创建回调函数如下
canvasOption.canvasFunction=function(extent, resolution, pixelRatio, size, projection){
if(isFirst)//这里必须要做一个判断，每次的范围变动都会引起重绘，从而触发该回调函数，不判断的话，将会导致canvas无法被绘制到地图上，出现闪现的情况
{
isFirst=false;
var canvas=document.createElement('canvas');
canvas.width=size[0];
canvas.height=size[1];
var context = canvas.getContext('2d');
context.fillStyle = "blue";
context.fillRect(0,0,1000,1000);
return canvas;
}
};
//为ImageCanvasLayer创建数据源
var imageCanvas=new ol.source.ImageCanvas(canvasOption);
//创建一个ImageCanvasLayer图层
var imageCanvasLayer=new ol.layer.Image({
source:imageCanvas
});
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()//这里使用ol自带的一个地图图层作为底图
}),
imageCanvasLayer
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-10997148, 4569099],
zoom: 4
})
});
</script>
</body>
</html>