My problem:Add image along the LineString
My problem has been solved here, but when I add a 32x32 image and I draw between two points, the images in the line don't go straight and there's a slight gap in two or three pictures as shown in the figure. Why can't I draw a straight line between two points with the picture?
The last fiddle: http://jsfiddle.net/w4z3arc9/
I can do this in a nice way with dashed line method, but I can draw lines with a picture I want exactly. While doing so, the breaks at intersection are no longer important. When I draw a line between two points, I want to draw a straight line with the image that I selected without any spaces in the image.
Mathematically, I calculate the angle of a line and calculate how many images will be inserted along that line. Then I calculate the position of each picture. Normally, each new image must be added as a continuation of each other. But when I get closer to the figure, I see that the pictures in the line are not exactly equal to each other and there are some differences between them. What is the reason for this difference?
My mathematical calculation code:
function splitLineString(geometry, minSegmentLength, options) {
function calculatePointsDistance(coord1, coord2) {
var dx = coord1[0] - coord2[0];
var dy = coord1[1] - coord2[1];
return Math.sqrt(dx * dx + dy * dy);
};
function calculateSplitPointCoords(startNode, nextNode, distanceBetweenNodes, distanceToSplitPoint) {
var d = distanceToSplitPoint / distanceBetweenNodes;
var x = nextNode[0] + (startNode[0] - nextNode[0]) * d;
var y = nextNode[1] + (startNode[1] - nextNode[1]) * d;
return [x, y];
};
function calculateAngle(startNode, nextNode, alwaysUp) {
var x = (nextNode[0] - startNode[0]);
var y = (nextNode[1] - startNode[1]);
var angle = Math.atan2(y, x);
if (!alwaysUp) {
angle = y < 0 && x < 0 ? angle * -1 : y < 0 && x == 0 ? Math.PI * 2 - angle : y < 0 && x > 0 ? angle * -1 : angle * -1;
}
return angle;
};
var splitPoints = [];
var coords = geometry.getCoordinates();
if (coords.length == 0 ) {
debugger;
}
var coordIndex = 0;
var startPoint = coords[coordIndex];
var nextPoint = coords[coordIndex + 1];
var angle = options.vertices || calculateAngle(startPoint, nextPoint, options.alwaysUp);
var n = Math.ceil(geometry.getLength() / minSegmentLength);
var segmentLength = geometry.getLength() / n;
var midPoints = (options.midPoints && !options.vertices)
var currentSegmentLength = midPoints ? segmentLength / 2 : segmentLength;
console.log(n);
for (var i = 0; i <= n; i++) {
var distanceBetweenPoints = calculatePointsDistance(startPoint, nextPoint);
currentSegmentLength += distanceBetweenPoints;
if (currentSegmentLength < segmentLength) {
coordIndex++;
if (coordIndex < coords.length - 1) {
startPoint = coords[coordIndex];
nextPoint = coords[coordIndex + 1];
angle = options.vertices || calculateAngle(startPoint, nextPoint, options.alwaysUp);
if (options.vertices && (!options.extent || ol.extent.containsCoordinate(options.extent, startPoint))) {
splitPoints.push(startPoint);
}
i--;
continue;
} else {
if (!midPoints) {
var splitPointCoords = nextPoint;
if (!options.extent || ol.extent.containsCoordinate(options.extent, splitPointCoords)) {
if (!options.vertices) { splitPointCoords.push(angle); }
splitPoints.push(splitPointCoords);
}
}
break;
}
} else {
var distanceToSplitPoint = currentSegmentLength - segmentLength;
var splitPointCoords = calculateSplitPointCoords(startPoint, nextPoint, distanceBetweenPoints, distanceToSplitPoint);
startPoint = splitPointCoords.slice();
if (!options.extent || ol.extent.containsCoordinate(options.extent, splitPointCoords)) {
if (!options.vertices) { splitPointCoords.push(angle); }
splitPoints.push(splitPointCoords);
}
currentSegmentLength = 0;
}
}
return splitPoints;
};
var style = function (feature, resolution) {
var size = 32;
var styles = [];
var mapSize = map.getSize();
var extent = map.getView().calculateExtent([mapSize[0] + (size * 2), mapSize[1] + (size * 2)]);
var splitPoints = splitLineString(geom, size * resolution, { alwaysUp: false, midPoints: true, extent: extent });
splitPoints.forEach(function (point) {
styles.push(new ol.style.Style({
geometry: new ol.geom.Point([point[0], point[1]]),
image: new ol.style.Icon({
src: 'https://lh3.googleusercontent.com/-BNhBReluCzc/XCYkBEGVV1I/AAAAAAAAARc/-7j0eR72Ovsaz9NHAgrDhWS0mR3JWi-agCL0BGAYYCw/h32/2018-12-28.png',
scale: 1,
rotation: point[2]
})
}));
});
return styles;
}