Article GeoTribu

article-geotribu.markdown

Article GeoTribu

A Pen by Karl TAYOU on CodePen.

License.

index.html

<div class="preview">
  <p>Initial polygon preview</p>
  <canvas id="initial2d"></canvas>
  <p>2D straight skeleton preview</p>
  <canvas id="canvas2d"></canvas>
</div>

script.js

import straightSkeleton from "https://esm.sh/straight-skeleton";

const initialPolygon = {
		"type": "Polygon",
		"coordinates": [
			[
				[
                    259521.14076069795,
                    6253167.799861707
                ],
                [
                    259606.34863939675,
                    6253192.28359733
                ],
                [
                    259590.5611086523,
                    6253248.230426137
                ],
                [
                    259505.31590718575,
                    6253223.7466905145
                ],
                [
                    259521.14076069795,
                    6253167.799861707
                ]
			]
		]
	}

const drawInitial2d = (skeletonBox) => {
  
  // 2D canvas
	const initial2d = document.getElementById('initial2d') ;
	const initialCtx = initial2d.getContext('2d');
   
  
  initial2d.width = initial2d.clientWidth * window.devicePixelRatio;
	initial2d.height = initial2d.clientHeight * window.devicePixelRatio;
  
		initialCtx.fillStyle = '#eee';
		initialCtx.fillRect(0, 0, initial2d.width, initial2d.height);


		const padding = 15 * window.devicePixelRatio;
		const scale = Math.min(
			(canvas2d.width - padding * 2) / (skeletonBox.maxX - skeletonBox.minX),
			(canvas2d.height - padding * 2) / (skeletonBox.maxY - skeletonBox.minY)
		);
		const offsetX = (canvas2d.width - (skeletonBox.maxX - skeletonBox.minX) * scale) / 2;
		const offsetY = (canvas2d.height - (skeletonBox.maxY - skeletonBox.minY) * scale) / 2;


		initialCtx.strokeStyle = '#000';
		initialCtx.lineWidth = window.devicePixelRatio;
		initialCtx.fillStyle = '#ffb6e9';


		for (const polygon of initialPolygon.coordinates) {
			initialCtx.beginPath();

			for (let i = 0; i < polygon.length; i++) {

				const vertex = polygon[i]
				const x = (vertex[0] - skeletonBox.minX) * scale + offsetX;
				const y = (vertex[1] - skeletonBox.minY) * scale + offsetY;

				if (i === 0) {
					initialCtx.moveTo(x, y);
				} else {
					initialCtx.lineTo(x, y);
				}
			}

			initialCtx.closePath();
			initialCtx.stroke();
			initialCtx.fill();
		}
	};

const draw2d = (skeletonBox, skeleton) => {
    // 2D canvas
  const canvas2d = document.getElementById('canvas2d') ;
	const ctx = canvas2d.getContext('2d');
  
  
		canvas2d.width = canvas2d.clientWidth * window.devicePixelRatio;
		canvas2d.height = canvas2d.clientHeight * window.devicePixelRatio;
  
		ctx.fillStyle = '#eee';
		ctx.fillRect(0, 0, canvas2d.width, canvas2d.height);

		

		const padding = 15 * window.devicePixelRatio;
		const scale = Math.min(
			(canvas2d.width - padding * 2) / (skeletonBox.maxX - skeletonBox.minX),
			(canvas2d.height - padding * 2) / (skeletonBox.maxY - skeletonBox.minY)
		);
		const offsetX = (canvas2d.width - (skeletonBox.maxX - skeletonBox.minX) * scale) / 2;
		const offsetY = (canvas2d.height - (skeletonBox.maxY - skeletonBox.minY) * scale) / 2;

		ctx.strokeStyle = '#000';
		ctx.lineWidth = window.devicePixelRatio;
		ctx.fillStyle = '#ffb6e9';
		
		for (const polygon of skeleton.polygons) {
			ctx.beginPath();

			for (let i = 0; i < polygon.length; i++) {

				const vertex = skeleton.vertices[polygon[i]];
				const x = (vertex[0] - skeletonBox.minX) * scale + offsetX;
				const y = (vertex[1] - skeletonBox.minY) * scale + offsetY;

				if (i === 0) {
					ctx.moveTo(x, y);
				} else {
					ctx.lineTo(x, y);
				}
			}

			ctx.closePath();
			ctx.stroke();
			ctx.fill();
		}
	};

straightSkeleton.SkeletonBuilder.init().then(() => {
  
  // Construction du skeleton
  const skeleton  = straightSkeleton.SkeletonBuilder.buildFromGeoJSONPolygon(initialPolygon);
  
    // Construction de l'étendue de la géométrie afin de centrer la géométrie dans la vue
  let minX = Infinity ;
	let minY = Infinity;
	let maxX = -Infinity;
	let maxY = -Infinity;

	for (const vertex of skeleton.vertices) {
		minX = Math.min(minX, vertex[0]);
		minY = Math.min(minY, vertex[1]);
		maxX = Math.max(maxX, vertex[0]);
		maxY = Math.max(maxY, vertex[1]);
	}

	const skeletonBox = { minX, minY, maxX, maxY };

	drawInitial2d(skeletonBox);
	draw2d(skeletonBox, skeleton);
  
console.log(1)

})