Skip to content

Commit 03515e3

Browse files
mdhslmdhsl
authored
Layer remove color from point marker layer #705 (#706)
* Remove color property from PointLayerMarker * Update examples to use iconColor instead of color for PointMarkerLayer
1 parent 7d710cc commit 03515e3

File tree

22 files changed

+578
-13
lines changed

22 files changed

+578
-13
lines changed

‎demos/3dr-solo-uav/3dr-solo-uav-react/src/components/BaseMap.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ class BaseMap extends React.Component {
4545
}
4646
},
4747
icon: "./models/Drone+06B.glb",
48+
iconScale: 12.0,
4849
name: 'Solo draping marker'
4950
});
5051

‎demos/3dr-solo-uav/3dr-solo-uav-vuejs/src/components/Globe.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,9 @@
4444
};
4545
}
4646
},
47-
icon: "./images/quadcopter.png"
47+
icon: "./images/quadcopter.png",
48+
iconSize: [32, 32],
49+
iconScale: 1.5
4850
});
4951
5052
// style it with a moving point marker

‎showcase-dev/examples/cesium-piaware/cesium-piaware.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div id="cesium-container" style="height:100%; width:100%"></div>

‎showcase-dev/examples/cesium-piaware/cesium-piaware.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import {
2+
Ion,
3+
Cartesian3,
4+
Color,
5+
HeightReference,
6+
HorizontalOrigin,
7+
} from 'cesium';
8+
import SosGetResult from 'osh-js/core/datasource/sos/SosGetResult.datasource.js';
9+
import CesiumView from 'osh-js/core/ui/view/map/CesiumView.js';
10+
import PointMarkerLayer from 'osh-js/core/ui/layer/PointMarkerLayer.js';
11+
import {Mode} from "../../../source/core/datasource/Mode";
12+
13+
Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ODY0NTkzNS02NzI0LTQwNDktODk4Zi0zZDJjOWI2NTdmYTMiLCJpZCI6MTA1N' +
14+
'zQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTY4NzI1ODJ9.IbAajOLYnsoyKy1BOd7fY1p6GH-wwNVMdMduA2IzGjA';
15+
window.CESIUM_BASE_URL = './';
16+
17+
// create piAware data sources
18+
let locationDataSource = new SosGetResult('piaware-location', {
19+
protocol: 'ws',
20+
service: 'SOS',
21+
endpointUrl: '76.187.247.4:8181/sensorhub/sos',
22+
// endpointUrl: 'localhost:8181/sensorhub/sos',
23+
offeringID: 'urn:osh:sensor:aviation:PiAware',
24+
observedProperty: 'http://sensorml.com/ont/swe/property/Location',
25+
mode: Mode.REAL_TIME,
26+
responseFormat: 'application/json',
27+
});
28+
29+
let trackDataSource = new SosGetResult('piaware-track', {
30+
protocol: 'ws',
31+
service: 'SOS',
32+
endpointUrl: '76.187.247.4:8181/sensorhub/sos',
33+
// endpointUrl: 'localhost:8181/sensorhub/sos',
34+
offeringID: 'urn:osh:sensor:aviation:PiAware',
35+
observedProperty: 'http://sensorml.com/ont/swe/property/Track',
36+
responseFormat: 'application/json',
37+
mode: Mode.REAL_TIME
38+
});
39+
40+
function hover(markerId, billboard, event) {
41+
console.log('[Hover]: '+markerId + ',' + billboard + ',' + event);
42+
}
43+
44+
// style it with a moving point marker
45+
const locs = new Map();
46+
const headings = new Map();
47+
const planes = new Map();
48+
// const flights = new Map();
49+
50+
let pointMarker = new PointMarkerLayer({
51+
dataSourceIds: [locationDataSource.id, trackDataSource.id],
52+
getMarkerId: (rec) => rec.hexIdent,
53+
// filter: (rec) => rec.hexIdent === 'urn:osh:sensor:aviation:A3980F',
54+
allowBillboardRotation: true,
55+
onHover: (markerId, billboard, event) => hover(markerId, billboard, event) ,
56+
getLocation: {
57+
dataSourceIds: [locationDataSource.getId()],
58+
handler: function(rec, timestamp, options, instance) {
59+
return {
60+
x: rec.location.lon,
61+
y: rec.location.lat,
62+
z: rec.location.alt
63+
};
64+
}
65+
},
66+
getOrientation: {
67+
dataSourceIds: [trackDataSource.getId()],
68+
handler: function(rec, timestamp, options, instance) {
69+
return {
70+
heading: 360 - rec.track
71+
};
72+
}
73+
},
74+
icon: 'images/icons8-airplane-64.png',
75+
iconAnchor: [16, 40]
76+
});
77+
78+
// create Cesium view
79+
let cesiumView = new CesiumView({
80+
container: 'cesium-container',
81+
allowBillboardRotation: true,
82+
layers: [pointMarker]
83+
});
84+
85+
// ABIA Airport icon
86+
cesiumView.viewer.entities.add({
87+
position: Cartesian3.fromDegrees(-97.6664, 30.1975),
88+
billboard: {
89+
image: "images/icons8-airport-50.png",
90+
heightReference: HeightReference.CLAMP_TO_GROUND,
91+
disableDepthTestDistance: Number.POSITIVE_INFINITY,
92+
},
93+
});
94+
95+
96+
console.log('connecting to datasources');
97+
98+
// start streaming
99+
locationDataSource.connect();
100+
trackDataSource.connect();

‎showcase-dev/examples/cesium-piaware/images/icons8-airplane-64.png

3.19 KB
Loading

‎showcase-dev/examples/cesium-piaware/images/icons8-airport-50.png

609 Bytes
Loading

‎showcase-dev/examples/cesium-piaware/images/icons8-plane-50.png

877 Bytes
Loading

‎showcase-dev/examples/cesium-piaware/leaflet-piaware.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<style>
2+
#leafletMap {
3+
height: 100%;
4+
}
5+
6+
.leaflet-container {
7+
height: 100%;
8+
}
9+
</style>
10+
<div id="leafletMap"></div>

‎showcase-dev/examples/cesium-piaware/leaflet-piaware.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import SosGetResult from 'osh-js/core/datasource/sos/SosGetResult.datasource.js';
2+
import CesiumView from 'osh-js/core/ui/view/map/CesiumView.js';
3+
import { EllipsoidTerrainProvider } from 'cesium';
4+
import PointMarkerLayer from 'osh-js/core/ui/layer/PointMarkerLayer.js';
5+
import {EventType} from "../../../source/core/event/EventType";
6+
import LeafletView from "../../../source/core/ui/view/map/LeafletView";
7+
8+
// create piAware data sources
9+
let locationDataSource = new SosGetResult('piaware-location', {
10+
protocol: 'ws',
11+
service: 'SOS',
12+
endpointUrl: '76.187.247.4:8686/sensorhub/sos',
13+
// endpointUrl: 'localhost:8181/sensorhub/sos',
14+
offeringID: 'urn:osh:sensor:aviation:PiAware',
15+
observedProperty: 'http://sensorml.com/ont/swe/property/Location',
16+
startTime: 'now',
17+
endTime: '2022-12-31T00:00:00Z',
18+
responseFormat: 'application/json',
19+
replaySpeed: 1
20+
});
21+
22+
let trackDataSource = new SosGetResult('piaware-track', {
23+
protocol: 'ws',
24+
service: 'SOS',
25+
endpointUrl: '76.187.247.4:8686/sensorhub/sos',
26+
// endpointUrl: 'localhost:8181/sensorhub/sos',
27+
offeringID: 'urn:osh:sensor:aviation:PiAware',
28+
observedProperty: 'http://sensorml.com/ont/swe/property/Track',
29+
startTime: 'now',
30+
endTime: '2022-12-31T00:00:00Z',
31+
responseFormat: 'application/json',
32+
replaySpeed: 1
33+
});
34+
35+
function hover(markerId, billboard, event) {
36+
console.log(markerId + ',' + billboard + ',' + event);
37+
}
38+
39+
// style it with a moving point marker
40+
const locs = new Map();
41+
const headings = new Map();
42+
const planes = new Map();
43+
// const flights = new Map();
44+
let pointMarker = new PointMarkerLayer({
45+
dataSourceIds: [locationDataSource.id, trackDataSource.id],
46+
getMarkerId: (rec) => rec.hexIdent,
47+
allowBillboardRotation: true,
48+
getLocation: {
49+
dataSourceIds: [locationDataSource.getId()],
50+
handler: function(rec, timestamp, options, instance) {
51+
console.log(rec.hexIdent + ' , ' + rec.location.lat + "," + rec.location.lon);
52+
instance.id = rec.hexIdent;
53+
return {
54+
x: rec.location.lon,
55+
y: rec.location.lat,
56+
z: rec.location.alt
57+
};
58+
}
59+
},
60+
getOrientation: {
61+
dataSourceIds: [trackDataSource.getId()],
62+
handler: function(rec, timestamp, options, instance) {
63+
console.log(rec.hexIdent + ' , ' + rec.track);
64+
instance.id = rec.hexIdent;
65+
return {
66+
heading: 360 - rec.track
67+
};
68+
}
69+
},
70+
icon: 'images/icons8-airplane-64.png',
71+
iconAnchor: [16, 40]
72+
});
73+
74+
// create Cesium view
75+
let view = new LeafletView({
76+
container: 'leafletMap',
77+
layers: [pointMarker]
78+
});
79+
80+
// start streaming
81+
locationDataSource.connect();
82+
trackDataSource.connect();

‎showcase-dev/examples/cesium-piaware/package.json

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "osh-js",
3+
"version": "1.3.3",
4+
"description": "OSH javascript Toolkit",
5+
"main": "osh.js",
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/opensensorhub/osh-js.git"
9+
},
10+
"keywords": [
11+
"OSH",
12+
"Sensors",
13+
"Toolkit",
14+
"Javascript",
15+
"GIS",
16+
"Spatial",
17+
"OGC",
18+
"SensorML"
19+
],
20+
"author": "OSH community",
21+
"license": "ISC",
22+
"bugs": {
23+
"url": "https://github.com/opensensorhub/osh-js/issues"
24+
},
25+
"homepage": "https://github.com/opensensorhub/osh-js#readme",
26+
"scripts": {
27+
"dev": "webpack-dev-server --config webpack.config.cesium.js --mode development --watch"
28+
},
29+
"devDependencies": {
30+
"clean-webpack-plugin": "3.0.0",
31+
"copy-webpack-plugin": "5.1.1",
32+
"css-loader": "3.4.2",
33+
"file-loader": "5.1.0",
34+
"html-webpack-plugin": "3.2.0",
35+
"style-loader": "1.1.3",
36+
"webpack": "4.42.0",
37+
"webpack-cli": "3.3.11",
38+
"webpack-dev-server": "3.10.3",
39+
"worker-loader": "2.0.0"
40+
},
41+
"dependencies": {
42+
"cesium": "1.68.0",
43+
"leaflet": "^1.9.3"
44+
}
45+
}

0 commit comments

Comments
 (0)