openlayers不能画星星
Openlayers can't draw the star
我有一组选项可以绘制,尽管所有工作都有效(因为它们属于一个代码)我无法绘制星号,这是从另一个解决方案中合并的。
我从这里捡到的:
https://openlayers.org/en/latest/examples/draw-shapes.html
接下来按照这些方法对其进行了修改:
https://github.com/openlayers/openlayers/issues/8512
https://dolmenweb.it/viewers/openlayer/examples/draw-shapes.html
现在我的代码如下所示:
var starInteraction = new ol.interaction.Draw({
source: vectorLayer.getSource(),
type: 'Polygon',
geometryFunction: function (coordinates, geometry) {
if (!geometry) {
geometry = new ol.geom.Polygon([newCoordinates]);
} else {
geometry.setCoordinates([newCoordinates]);
}
var center = coordinates[0];
var last = coordinates[1];
var dx = center[0] - last[0];
var dy = center[1] - last[1];
var radius = Math.sqrt(dx * dx + dy * dy);
var rotation = Math.atan2(dy, dx);
var newCoordinates = [];
var numPoints = 12;
for (var i = 0; i < numPoints; ++i) {
var angle = rotation + i * 2 * Math.PI / numPoints;
var fraction = i % 2 === 0 ? 1 : 0.5;
var offsetX = radius * fraction * Math.cos(angle);
var offsetY = radius * fraction * Math.sin(angle);
newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
}
newCoordinates.push(newCoordinates[0].slice());
geometry.setCoordinates([newCoordinates]);
return geometry;
}
});
starInteraction.setActive(false);
starInteraction.on('drawend', onDrawend);
不幸的是,我收到一个错误:
未捕获类型错误:无法读取未定义的属性
主要是指这行代码:
if (coordinates.length === 0) {
存在于另一个文件中。
那么这里可能缺少什么?
我的完整 fiddle 看起来像这样:
调用
时你没有定义newCoordinates
if (!geometry) {
geometry = new ol.geom.Polygon([newCoordinates]);
}
将该行更改为
if (!geometry) {
geometry = new ol.geom.Polygon([]);
}
所以你有一个空数组而不是一个包含未定义条目的数组
或者,您可以像最近的示例那样将行向下移动 https://openlayers.org/en/latest/examples/draw-shapes.html
if (!geometry) {
geometry = new ol.geom.Polygon([newCoordinates]);
} else {
geometry.setCoordinates([newCoordinates]);
}
我有一组选项可以绘制,尽管所有工作都有效(因为它们属于一个代码)我无法绘制星号,这是从另一个解决方案中合并的。
我从这里捡到的:
https://openlayers.org/en/latest/examples/draw-shapes.html
接下来按照这些方法对其进行了修改:
https://github.com/openlayers/openlayers/issues/8512
https://dolmenweb.it/viewers/openlayer/examples/draw-shapes.html
现在我的代码如下所示:
var starInteraction = new ol.interaction.Draw({
source: vectorLayer.getSource(),
type: 'Polygon',
geometryFunction: function (coordinates, geometry) {
if (!geometry) {
geometry = new ol.geom.Polygon([newCoordinates]);
} else {
geometry.setCoordinates([newCoordinates]);
}
var center = coordinates[0];
var last = coordinates[1];
var dx = center[0] - last[0];
var dy = center[1] - last[1];
var radius = Math.sqrt(dx * dx + dy * dy);
var rotation = Math.atan2(dy, dx);
var newCoordinates = [];
var numPoints = 12;
for (var i = 0; i < numPoints; ++i) {
var angle = rotation + i * 2 * Math.PI / numPoints;
var fraction = i % 2 === 0 ? 1 : 0.5;
var offsetX = radius * fraction * Math.cos(angle);
var offsetY = radius * fraction * Math.sin(angle);
newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
}
newCoordinates.push(newCoordinates[0].slice());
geometry.setCoordinates([newCoordinates]);
return geometry;
}
});
starInteraction.setActive(false);
starInteraction.on('drawend', onDrawend);
不幸的是,我收到一个错误:
未捕获类型错误:无法读取未定义的属性
主要是指这行代码:
if (coordinates.length === 0) {
存在于另一个文件中。 那么这里可能缺少什么? 我的完整 fiddle 看起来像这样:
调用
时你没有定义newCoordinates
if (!geometry) {
geometry = new ol.geom.Polygon([newCoordinates]);
}
将该行更改为
if (!geometry) {
geometry = new ol.geom.Polygon([]);
}
所以你有一个空数组而不是一个包含未定义条目的数组
或者,您可以像最近的示例那样将行向下移动 https://openlayers.org/en/latest/examples/draw-shapes.html
if (!geometry) {
geometry = new ol.geom.Polygon([newCoordinates]);
} else {
geometry.setCoordinates([newCoordinates]);
}