Last active
September 13, 2022 23:32
-
-
Save pramsey/7f93a43db1c9a091f48722c34f028786 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Try as I might, I cannot get the location of the dots to update. | |
| // The first time a payload is received, I get a point, and thereafter, | |
| // the original point will not move (if I send in the same id) nor will a | |
| // a second point be added (if I send in new ids). | |
| // I just want to manipulate the data, and see the map view of the data | |
| // change. | |
| var objectServer = "ws://localhost:7700/objects"; | |
| var objectSource = new ol.source.Vector({ | |
| wrapX: false | |
| }); | |
| var objectLayer = new ol.layer.Vector({ | |
| source: objectSource, | |
| style: new ol.style.Style({ | |
| image: new ol.style.RegularShape({ | |
| fill: new ol.style.Fill({ | |
| color: 'red' | |
| }), | |
| stroke: new ol.style.Stroke({ | |
| width: 1, | |
| color: 'grey' | |
| }), | |
| points: 16, | |
| radius: 4, | |
| angle: Math.PI / 4 | |
| }) | |
| }) | |
| }); | |
| var baseLayer = new ol.layer.Tile({ | |
| source: new ol.source.XYZ({ | |
| url: "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png" | |
| }) | |
| }); | |
| var map = new ol.Map({ | |
| target: 'map', | |
| view: new ol.View({ | |
| center: [0, 0], | |
| zoom: 2 | |
| }), | |
| layers: [baseLayer, objectLayer] | |
| }); | |
| var outputField = document.getElementById("wsPayload"); | |
| var outputStatus = document.getElementById("wsStatus") | |
| var ws = new WebSocket(objectServer); | |
| ws.onopen = function () { | |
| outputStatus.innerHTML = "Connected\n"; | |
| }; | |
| ws.onmessage = function (e) { | |
| try { | |
| var payload = JSON.parse(e.data); | |
| outputField.innerHTML = JSON.stringify(payload, null, 2) + "\n"; | |
| } | |
| catch (e) { | |
| outputField.innerHTML = "[ERROR: Unable to parse JSON payload]\n"; | |
| outputField.innerHTML += e.data; | |
| return; | |
| } | |
| if ("object_id" in payload && "events" in payload && "location" in payload) { | |
| var oid = payload["object_id"]; | |
| var lng = payload["location"]["longitude"]; | |
| var lat = payload["location"]["latitude"]; | |
| var coord = ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857'); | |
| // var coord = [lng, lat]; | |
| var objectFeature = new ol.Feature({ | |
| geometry: new ol.geom.Point(coord), | |
| timeStamp: payload["location"]["ts"], | |
| props: payload["props"] | |
| }); | |
| objectFeature.setId(oid); | |
| console.log(objectFeature); | |
| if(objectSource.hasFeature(objectFeature)) { | |
| objectSource.removeFeature(objectFeature); | |
| console.log("removeFeature"); | |
| } | |
| objectSource.addFeature(objectFeature); | |
| console.log("addFeature"); | |
| objectSource.changed(); | |
| objectLayer.changed(); | |
| map.render(); | |
| console.log(objectSource); | |
| console.log(coord); | |
| // update the map! | |
| } | |
| else { | |
| outputField.innerHTML = outputField.innerHTML + "\n[ERROR: Payload is not moving object]\n"; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Yeah, that had me scratching my head for a while too. See https://github.com/openlayers/openlayers/blob/v7.1.0/src/ol/source/Vector.js#L926-L939
For consistency,
source.removeFeature()could behave the same way. Seems like a bug to me.