KatKatKateryna
149 lines
5.1 KiB
HTML
149 lines
5.1 KiB
HTML
|
|
<!-- Modified sample from: https://openstreetmap.be/en/projects/howto/openlayers.html -->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
|
|
type="text/css">
|
|
|
|
<title>OpenLayers demo</title>
|
|
|
|
<style>
|
|
.ol-attribution.ol-logo-only,
|
|
.ol-attribution.ol-uncollapsible {
|
|
max-width: calc(100% - 3em) !important;
|
|
height: 1.5em !important;
|
|
}
|
|
|
|
.ol-control button,
|
|
.ol-attribution,
|
|
.ol-scale-line-inner {
|
|
font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif !important;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="row">
|
|
<h3>Speckle pygeoapi demo with OpenLayers</h3>
|
|
</div>
|
|
<div id="map" style="margin-left: 20px;margin-right: 20px;"></div>
|
|
<div id="popup" class="ol-popup">
|
|
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
|
<div id="popup-content"></div>
|
|
</div>
|
|
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
|
|
|
|
<script>
|
|
|
|
var attribution = new ol.control.Attribution({
|
|
collapsible: false
|
|
});
|
|
|
|
var map = new ol.Map({
|
|
controls: ol.control.defaults({ attribution: false }).extend([attribution]),
|
|
layers: [
|
|
new ol.layer.Tile({
|
|
source: new ol.source.OSM({
|
|
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
attributions: [ol.source.OSM.ATTRIBUTION],
|
|
maxZoom: 18
|
|
})
|
|
})
|
|
],
|
|
target: 'map',
|
|
view: new ol.View({
|
|
center: ol.proj.fromLonLat([0,0]),
|
|
maxZoom: 22,
|
|
zoom: 3
|
|
})
|
|
});
|
|
|
|
//////// add Speckle layer
|
|
(async () => {
|
|
const geojson = await fetch('https://geo.speckle.systems/speckle/?speckleUrl=https://app.speckle.systems/projects/344f803f81/models/5582ab673e&datatype=polygons', {
|
|
headers: {
|
|
'Accept': 'application/geo+json'
|
|
}
|
|
}).then(response => response.json());
|
|
|
|
speckle_data = {
|
|
"type": "FeatureCollection",
|
|
"features": geojson["features"],
|
|
"model": geojson["model"],
|
|
"model_id": geojson["model_id"],
|
|
"project": geojson["project"],
|
|
"requested_data_type": geojson["requested_data_type"],
|
|
"speckle_url": geojson["speckle_url"],
|
|
"speckle_project_url": geojson["speckle_project_url"],
|
|
"timestamp": geojson["timestamp"],
|
|
"lat": geojson["lat"],
|
|
"lon": geojson["lon"],
|
|
"limit": geojson["limit"],
|
|
"north_degrees": geojson["north_degrees"],
|
|
"model_crs": geojson["model_crs"],
|
|
"extent": geojson["extent"],
|
|
}
|
|
|
|
|
|
var width = 1
|
|
var myStyle = [
|
|
new ol.style.Style({
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(10,132,255,0.3)'
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: '#0a84ff',
|
|
width: 3
|
|
}),
|
|
image: new ol.style.Circle({
|
|
radius: 7,
|
|
fill: new ol.style.Fill({color: '#0a84ff'}),
|
|
stroke: new ol.style.Stroke({
|
|
color: [10,132,255], width: 2
|
|
})
|
|
})
|
|
|
|
}),
|
|
];
|
|
|
|
speckleLayer = new ol.layer.Vector({
|
|
source: new ol.source.Vector({
|
|
features: new ol.format.GeoJSON().readFeatures(speckle_data, { featureProjection: 'EPSG:3857' }),
|
|
attributions: ' © Data: <a href="https://speckle.systems/">Speckle Systems</a>.'
|
|
}),
|
|
style: myStyle
|
|
});
|
|
|
|
map.addLayer(speckleLayer);
|
|
|
|
function epsg4326toEpsg3857(coordinates) {
|
|
let x = coordinates[0];
|
|
let y = coordinates[1];
|
|
x = (coordinates[0] * 20037508.34) / 180;
|
|
y =
|
|
Math.log(Math.tan(((90 + coordinates[1]) * Math.PI) / 360)) /
|
|
(Math.PI / 180);
|
|
y = (y * 20037508.34) / 180;
|
|
return [x, y];
|
|
}
|
|
min_xy = [speckle_data["extent"][0], speckle_data["extent"][1]]
|
|
max_xy = [speckle_data["extent"][2], speckle_data["extent"][3]]
|
|
|
|
min_xy_new = epsg4326toEpsg3857(min_xy);
|
|
max_xy_new = epsg4326toEpsg3857(max_xy);
|
|
|
|
if (speckleLayer.getSource().getFeatures().length > 0) {
|
|
map.getView().fit( [min_xy_new[0], min_xy_new[1], max_xy_new[0], max_xy_new[1]], map.getSize() );
|
|
}
|
|
})();
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|