Javascript Openlayers 3获取线段和多边形点
我正在使用OpenLayers 3在地图上绘制点/段/多边形。我做的第一部分，它绘制点/图像，制作线段/多边形等。现在我尝试检索添加的元素点（坐标），以便为其他会话构建它们。我目前的进度是只获取点/图像的坐标，但无法获取线段/多边形的坐标。有什么想法/帮助吗Javascript Openlayers 3获取线段和多边形点,javascript,openstreetmap,openlayers-3,Javascript,Openstreetmap,Openlayers 3,我正在使用OpenLayers 3在地图上绘制点/段/多边形。我做的第一部分，它绘制点/图像，制作线段/多边形等。现在我尝试检索添加的元素点（坐标），以便为其他会话构建它们。我目前的进度是只获取点/图像的坐标，但无法获取线段/多边形的坐标。有什么想法/帮助吗 <!DOCTYPE html> <html> <head> <title>Draw and modify features example</title> <
<!DOCTYPE html>
<html>
<head>
<title>Draw and modify features example</title>
<script src="jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="ol.css" type="text/css">
<script src="ol.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</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>
</select>
</form>
</div>
</div>
<script type="text/javascript">
var icons = [
"stop_sign.png",
"Argentina_P-32.svg.png"
];
var source = new ol.source.XYZ({
url : 'tiles/{z}/{x}/{y}.png'
});
var map = new ol.Map({
layers : [new ol.layer.Tile({
source : source
})],
target : 'map',
view : new ol.View({
center : [3300000, 6000000],
zoom : 9
})
});
var features = new ol.Collection();
var featureOverlay = new ol.layer.Vector({
source : new ol.source.Vector({
features : features
}),
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.Icon({
anchor : [0.5, 0.5],
offset : [0, 0],
opacity : 1,
scale : 1,
src : icons[1]
})
})
});
featureOverlay.setMap(map);
var modify = new ol.interaction.Modify({
features : features,
deleteCondition : function (event) {
return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
},
});
map.addInteraction(modify);
var draw; // global so we can remove it later
function addInteraction() {
console.log(1);
draw = new ol.interaction.Draw({
features : features,
type :
(typeSelect.value)
});
map.addInteraction(draw);
}
var typeSelect = document.getElementById('type');
typeSelect.onchange = function (e) {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
</script>
</body>
</html>
绘制和修改要素示例
几何类型
指向
线绳
多边形
变量图标=[
“stop_sign.png”，
“阿根廷_P-32.svg.png”
];
var source=新的ol.source.XYZ({
url:'tiles/{z}/{x}/{y}.png'
});
var map=新ol.map({
图层：[新建ol.layer.Tile({
资料来源：资料来源
})],
目标：“地图”，
视图：新ol.view({
中心：[33000000，6000000]，
缩放：9
})
});
var features=new ol.Collection（）；
var featureOverlay=新ol.layer.Vector({
来源：新ol.source.Vector({
特色：特色
}),
风格：新的ol风格({
填充：新的ol.style.fill({
颜色：“rgba（255，255，255，0.2）”
}),
笔划：新的ol风格笔划({
颜色：“#ffcc33”，
宽度：2
}),
图片：新ol.style.Icon({
锚定：[0.5,0.5]，
偏移量：[0,0]，
不透明度：1，
比例：1，
src：图标[1]
})
})
});
功能覆盖。设置地图（地图）；
var modify=新建ol.interaction.modify({
特色:特色,，
deleteCondition:函数（事件）{
返回ol.events.condition.shiftKeyOnly（事件）和ol.events.condition.singleClick（事件）；
},
});
映射。添加交互（修改）；
var draw；//全局，以便稍后删除它
函数addInteraction（）{
控制台日志（1）；
draw=新ol.interaction.draw({
特色:特色,，
类型：
（typeSelect.value）
});
地图。添加交互作用（绘制）；
}
var typeSelect=document.getElementById（'type'）；
typeSelect.onchange=函数（e）{
映射。移除交互（绘制）；
addInteraction（）；
};
addInteraction（）；
var polyFeatures = featureOverlay.getSource();
var coordsMulti = [];
var coordsSingle = [];
polyFeatures.forEachFeature(function (polyFeature) {
if (polyFeature.getGeometry().getType() === 'Polygon') {
// this will get you all polygon coordinates
coordsMulti.push(polyFeature.getGeometry().getCoordinates());
// this will get you central coordinate of polygon
coordsSingle.push(polyFeature.getGeometry().getInteriorPoint());
}
});