前言
使用openlays,首先导入自己的图片,在使用modify和draw进行标记
一、如何导入图片图层
这部分网上有很多实例,可以查询
二、全部代码
1.下载
首先你可以先下载openlayers的相关包(也有其他方法可以导入)
官网链接: https://openlayers.org/
下载链接:https://openlayers.org/download/
建议下载5.3的版本(因为我下载6.0以上版本最后运行不出来,不知道是什么原因)
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Draw and Modify Features</title>
<script src="https://unpkg.com/elm-pep"></script>
<link rel="stylesheet" href="../v6.4.3/css/ol.css" type="text/css" />
<script src="../v6.4.3/build/ol.js" type="text/javascript"></script>//导入下载好的包里的js文件和css文件
<style>
.map {
width: 100%;
height:600px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<form class="form-inline">
<label>Geometry type </label>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
</select>
</form>
<script type="text/javascript">
var extent = [0, 0, 1000, 600];//图片尺寸
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)',
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2,
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33',
}),
}),
}),
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'D://plant.jpg',//这里添加静态图片的地址
projection: projection,
imageExtent: extent
})
})
,vector],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2,
//maxZoom: 8
})
});
var modify = new ol.interaction.Modify({source: source});
map.addInteraction(modify);
var draw, snap; // global so we can remove them later
var typeSelect = document.getElementById('type');
function addInteractions() {
draw = new ol.interaction.Draw({
source: source,
type: typeSelect.value,
});
map.addInteraction(draw);
snap = new ol.interaction.Snap({source: source});
map.addInteraction(snap);
}
typeSelect.onchange = function () {
map.removeInteraction(draw);
map.removeInteraction(snap);
addInteractions();
};
addInteractions();
</script>
</body>
</html>
2.输出结果
这里可以选择类型
这是最终成果
总结
至于如何导出圈住图层的图片信息,还在研究,希望有人可以给我一些方法,谢谢!!!!