Public
Edited
May 27
leaflet = require('leaflet@1.2.0')
proj4 = import("https://cdn.skypack.dev/proj4")
rawPoints = [
[299.92135, 211.988766, -0.5],
[-321.198313, -178.115598, -0.5],
[299.92135, 211.988766, 0.5],
[-321.198313, -178.115598, 0.5],
[321.198313, 178.117084, -0.5],
[321.198313, 178.117084, 0.5],
[-299.923716, -211.988766, -0.5],
[-299.923716, -211.988766, 0.5]
];
placementOrigin = [944.194078, 604.206022, -4.5];
placementOrigin1 = [0, 0, 0];
function applyIfcLocalPlacement(points, placementOrigin) {
const [offsetX, offsetY, offsetZ] = placementOrigin;
return points.map(([x, y, z]) => [
x + offsetX,
y + offsetY,
z !== undefined ? z + offsetZ : undefined
]);
}
globalPoints = applyIfcLocalPlacement(rawPoints, placementOrigin);
bounds = ([[89066.81249022903,440822.419306451,-5.828039038926363],[90953.57318192068,442029.99266275205,-1.4116201263767838]])
rdOriginGlobal = [(bounds[0][0]+bounds[0][1])/2/*88744.8*/, (bounds[1][0]+bounds[1][1])/2];
rdGlobalPoints = globalPoints.map(p=>[p[0]+rdOriginGlobal[0],p[1]+rdOriginGlobal[1], p[2]])
proj4.default.defs("EPSG:28992","+proj=sterea +lat_0=52.1561605555556 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.4171,50.3319,465.5524,1.9342,-1.6677,9.1019,4.0725 +units=m +no_defs +type=crs");
proj4.default.defs("EPSG:4833","+proj=pipeline +step +proj=axisswap +order=2,1 +step +proj=unitconvert +xy_in=deg +xy_out=rad +step +proj=push +v_3 +step +proj=cart +ellps=bessel +step +proj=helmert +x=565.4171 +y=50.3319 +z=465.5524 +rx=0.398957388243134 +ry=-0.343987817378283 +rz=1.87740163998045 +s=4.0725 +convention=coordinate_frame +step +inv +proj=cart +ellps=WGS84 +step +proj=pop +v_3 +step +proj=unitconvert +xy_in=rad +xy_out=deg +step +proj=axisswap +order=2,1");
function rdToWGS84([x, y]) {
return proj4.default("EPSG:28992", "WGS84", [x, y]);
}
wgs84Points = rdGlobalPoints.map(([x, y]) => rdToWGS84([x, y]));
wgs84Bounds = bounds.map(([x, y]) => rdToWGS84([x, y]));
geoJsonPolygon = ({
"type": "Polygon",
"coordinates": [
[
...wgs84Bounds
]
]
});
leafletMap = {
// You'll often see Leaflet examples initializing a map like L.map('map'),
// which tells the library to look for a div with the id 'map' on the page.
// In Observable, we instead create a div from scratch in this cell, so it's
// completely self-contained.
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
// Note that I'm yielding the container pretty early here: this allows the
// div to be placed on the page. This is important, because Leaflet uses
// the div's .offsetWidth and .offsetHeight to size the map. If I were
// to only return the container at the end of this method, Leaflet might
// get the wrong idea about the map's size.
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let layer = L.geoJson(geoJsonPolygon, {
weight: 5,
color: '#432'
}).addTo(map);
layer.bindPopup('Runway 01 Test');
map.fitBounds(layer.getBounds());
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
