KatKatKateryna
223 lines
11 KiB
HTML
223 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Maptalks demo</title>
|
|
<style type="text/css">
|
|
html,body{margin:0px;height:100%;width:100%}
|
|
.container{width:100%;height:100%}
|
|
</style>
|
|
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
|
|
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
|
|
<body>
|
|
|
|
<div class="row">
|
|
<h3>Speckle pygeoapi demo: display polygons</h3>
|
|
</div>
|
|
<div id="map" class="container"></div>
|
|
|
|
<script>
|
|
var map = new maptalks.Map('map', {
|
|
center: [-0.113049, 51.498568],
|
|
zoom: 14,
|
|
pitch : 56,
|
|
bearing : 60,
|
|
baseLayer: new maptalks.TileLayer('base', {
|
|
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
|
|
subdomains: ["a","b","c","d"],
|
|
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
|
|
})
|
|
});
|
|
|
|
(async () => {
|
|
//const speckle_data = await fetch('https://geo.speckle.systems/speckle/?speckleUrl=https://app.speckle.systems/projects/344f803f81/models/5582ab673e&datatype=projectcomments', {
|
|
//var speckle_url = 'http://localhost:5000/speckle/?speckleUrl=https://app.speckle.systems/projects/5feae56049/models/9c43d7569c&limit=1000000&datatype=polygons&preserveattributes=false';
|
|
// https://app.speckle.systems/projects/5feae56049/models/01c4183677
|
|
var speckle_url = 'https://geo.speckle.systems/speckle/?speckleUrl=https://app.speckle.systems/projects/5feae56049/models/01c4183677&limit=1000000&datatype=polygons&preserveattributes=true';
|
|
|
|
//var speckle_url = 'https://geo.speckle.systems/speckle/?speckleUrl=https://app.speckle.systems/projects/5feae56049/models/9c43d7569c&northDegrees=-30&preserveAttributes=true';
|
|
const speckle_data = await fetch(speckle_url, {
|
|
headers: {
|
|
'Accept': 'application/geo+json'
|
|
}
|
|
}).then(response => response.json());
|
|
|
|
var speckle_features = []
|
|
for (let i = 0; i < speckle_data.features.length; i++) {
|
|
feature = speckle_data.features[i];
|
|
coords = feature.geometry.coordinates;
|
|
|
|
if (feature.geometry.type.includes("Polygon")) {
|
|
|
|
// check orientation of each PolygonPart, if vertical - shift points slightly
|
|
for (let p = 0; p < coords.length; p++) {
|
|
for (let c = 0; c < coords[p].length; c++) {
|
|
|
|
// each polygon Part unpacked
|
|
sum_orientation = 0;
|
|
polygon_pts = coords[p][c]; // usually 3 for Mesh faces
|
|
|
|
for (let k = 0; k < polygon_pts.length; k++){
|
|
index = k + 1
|
|
if (k == polygon_pts.length - 1){index = 0}
|
|
pt = polygon_pts[k]
|
|
pt2 = polygon_pts[index]
|
|
sum_orientation += (pt2[0] - pt[0]) * (pt2[1] + pt[1])
|
|
};
|
|
|
|
createdPolygon = false;
|
|
if (-0.01 < sum_orientation && sum_orientation <0.01){
|
|
coords[p][c][0][0] += 0.0000001;
|
|
coords[p][c][0][1] += 0.0000001;
|
|
coords[p][c][1][0] -= 0.0000001;
|
|
coords[p][c][1][1] -= 0.0000001;
|
|
if(polygon_pts.length==3) {
|
|
createdPolygon = true;
|
|
|
|
speckle_features.push(
|
|
new maptalks.MultiPolygon([coords[p][c]], {
|
|
visible : true,
|
|
cursor : null,
|
|
symbol: {
|
|
'lineColor' : 'rgb(200,200,200)',
|
|
'lineOpacity' : 0.3,
|
|
'lineWidth' : 0.5,
|
|
'polygonFill' : feature.displayProperties.color,
|
|
'polygonOpacity' : 1
|
|
}
|
|
})
|
|
);
|
|
}
|
|
else if (polygon_pts.length==4) {
|
|
createdPolygon = true;
|
|
|
|
speckle_features.push(
|
|
new maptalks.MultiPolygon([coords[p][c].slice(0,3)], {
|
|
visible : true,
|
|
cursor : null,
|
|
symbol: {
|
|
'lineColor' : 'rgb(200,200,200)',
|
|
'lineOpacity' : 0.3,
|
|
'lineWidth' : 0.5,
|
|
'polygonFill' : feature.displayProperties.color,
|
|
'polygonOpacity' : 1
|
|
}
|
|
})
|
|
);
|
|
speckle_features.push(
|
|
new maptalks.MultiPolygon([[coords[p][c][2], coords[p][c][3], coords[p][c][0]]], {
|
|
visible : true,
|
|
cursor : null,
|
|
symbol: {
|
|
'lineColor' : 'rgb(200,200,200)',
|
|
'lineOpacity' : 0.3,
|
|
'lineWidth' : 0.5,
|
|
'polygonFill' : feature.displayProperties.color,
|
|
'polygonOpacity' : 1
|
|
}
|
|
})
|
|
);
|
|
|
|
|
|
}
|
|
};
|
|
if (createdPolygon == false){
|
|
speckle_features.push(
|
|
new maptalks.MultiPolygon([coords[0][c]], {
|
|
visible : true,
|
|
cursor : null,
|
|
symbol: {
|
|
'lineColor' : 'rgb(200,200,200)',
|
|
'lineOpacity' : 0.3,
|
|
'lineWidth' : 0.5,
|
|
'polygonFill' : feature.displayProperties.color,
|
|
'polygonOpacity' : 1
|
|
}
|
|
})
|
|
);
|
|
|
|
}
|
|
};
|
|
};
|
|
|
|
} else if (feature.geometry.type.includes("MultiLineString")){
|
|
|
|
speckle_features.push(
|
|
new maptalks.MultiLineString(coords, {
|
|
visible : true,
|
|
cursor : null,
|
|
symbol: {
|
|
'lineColor' : feature.displayProperties.color,
|
|
'lineOpacity' : 1,
|
|
'lineWidth' : 2
|
|
}
|
|
})
|
|
);
|
|
} else if (feature.geometry.type.includes("LineString")){
|
|
|
|
speckle_features.push(
|
|
new maptalks.LineString(coords, {
|
|
visible : true,
|
|
cursor : null,
|
|
symbol: {
|
|
'lineColor' : feature.displayProperties.color,
|
|
'lineOpacity' : 1,
|
|
'lineWidth' : 2
|
|
}
|
|
})
|
|
);
|
|
} else if (feature.geometry.type.includes("MultiPoint")){
|
|
symbol= {
|
|
'markerType': 'ellipse',
|
|
'markerFill': speckle_data.features[i].displayProperties.color,
|
|
'markerFillOpacity': 0.7,
|
|
'markerLineColor': speckle_data.features[i].displayProperties.color,
|
|
'markerLineWidth': 0,
|
|
'markerLineOpacity': 1,
|
|
'markerLineDasharray':[],
|
|
'markerWidth': 10,
|
|
'markerHeight': 10,
|
|
'markerDx': -10,
|
|
'markerDy': 0,
|
|
'markerOpacity' : 1,
|
|
'textFaceName' : 'sans-serif',
|
|
'textName' : speckle_data.features[i].properties["FID"],
|
|
'textFill' : '#34495e',
|
|
'textHorizontalAlignment' : 'right',
|
|
'textSize' : 20
|
|
};
|
|
if (feature.displayProperties["object_type"] == "comment"){
|
|
var strippedHtml = feature.properties.text_html.replaceAll(' ', ' ').replaceAll('<br>', '\n').replace(/<[^>]+>/g, '');
|
|
symbol.textName = strippedHtml;
|
|
symbol.textSize = 10;
|
|
};
|
|
|
|
speckle_features.push(
|
|
new maptalks.MultiPoint(coords, {
|
|
visible : true,
|
|
cursor : null,
|
|
cursor : 'pointer',
|
|
symbol: symbol
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
speckle_layer = new maptalks.VectorLayer('vector', speckle_features, { enableAltitude : true
|
|
, drawAltitude : {
|
|
//polygonFill : '#1bbc9b',
|
|
//polygonOpacity : 0.3,
|
|
//lineWidth : 0
|
|
}
|
|
}
|
|
);
|
|
|
|
speckle_layer.addTo(map);
|
|
map.fitExtent(speckle_layer.getExtent(), 0);
|
|
|
|
//map.fitBounds(speckle_layer.getBounds())
|
|
})();
|
|
|
|
</script>
|
|
</body>
|
|
</html> |