OpenLayers示例代码：分形渲染
OpenLayers示例代码：分形渲染
<!DOCTYPE html>
<html>
<head>
<title>Fractal Rendering</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
<style>
.map {
background: whitesmoke;
}
#depth {
width: 100px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<label for="depth">
depth:
<input id="depth" type="range" min="0" max="9" step="1" value="5">
(<span id="count">#</span> points)
</label>
<script>
var radius = 10e6;
var cos30 = Math.cos(Math.PI / 6);
var sin30 = Math.sin(Math.PI / 6);
var rise = radius * sin30;
var run = radius * cos30;
var triangle = new ol.geom.LineString([
[0, radius], [run, -rise], [-run, -rise], [0, radius]
]);
var feature = new ol.Feature(triangle);
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature]
})
});
var map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
function makeFractal(depth) {
var geometry = triangle.clone();
var graph = coordsToGraph(geometry.getCoordinates());
for (var i = 0; i < depth; ++i) {
var node = graph;
while (node.next) {
var next = node.next;
injectNodes(node);
node = next;
}
}
var coordinates = graphToCoords(graph);
document.getElementById('count').innerHTML = coordinates.length;
geometry.setCoordinates(coordinates);
feature.setGeometry(geometry);
}
function injectNodes(startNode) {
var endNode = startNode.next;
var start = startNode.point;
var end = startNode.next.point;
var dx = end[0] - start[0];
var dy = end[1] - start[1];
// first point at 1/3 along the segment
var firstNode = {
point: [start[0] + dx / 3, start[1] + dy / 3]
};
// second point at peak of _/\_
var r = Math.sqrt(dx * dx + dy * dy) / (2 * cos30);
var a = Math.atan2(dy, dx) + Math.PI / 6;
var secondNode = {
point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)]
};
// third point at 2/3 along the segment
var thirdNode = {
point: [end[0] - dx / 3, end[1] - dy / 3]
};
startNode.next = firstNode;
firstNode.next = secondNode;
secondNode.next = thirdNode;
thirdNode.next = endNode;
}
function coordsToGraph(coordinates) {
var graph = {
point: coordinates[0]
};
var length = coordinates.length;
for (var level = 0, node = graph; level < length - 1; ++level) {
node.next = {
point: coordinates[level + 1]
};
node = node.next;
}
return graph;
}
function graphToCoords(graph) {
var coordinates = [graph.point];
for (var node = graph, i = 1; node.next; node = node.next, ++i) {
coordinates[i] = node.next.point;
}
return coordinates;
}
var depthInput = document.getElementById('depth');
function update() {
makeFractal(Number(depthInput.value));
}
var updateTimer;
/**
* Regenerate fractal on depth change. Change events are debounced so updates
* only occur every 200ms.
*/
depthInput.onchange = function() {
window.clearTimeout(updateTimer);
updateTimer = window.setTimeout(update, 200);
};
update();
</script>
</body>
</html>
说明：
OpenLayers示例代码：分形渲染
