Question

我正在构建一个跟踪系统，它从websocket接收位置信号，并在地图上长时间显示带有图标的位置。

我现在需要进行群集处理，我读了this，但没有得到如何修改我的代码来使用它的方法。

“ openlayers”代码为：

<script>
var content = document.getElementById('popup-content');
var center = ol.proj.transform([44.6753, 25.7136], 'EPSG:4326', 'EPSG:3857'); //initial position of map
            //  ol.proj.fromLonLat([44.6753, 25.7136])
var view = new ol.View({
        center: center,  
        zoom: 6   
});  // {"unique_id": "Riyadh", "lat": 24.7136, "lon": 46.6753, "speed": 1}

//raster layer on map
var OSMBaseLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

straitSource = new ol.source.Vector({ wrapX: true });

var straitsLayer = new ol.layer.Vector({
  source: straitSource
});

map = new ol.Map({
    layers: [OSMBaseLayer, straitsLayer],
    target: 'map',
    view: view,
    controls: [new ol.control.FullScreen(), new ol.control.Zoom()]
});

var icon = new ol.style.Icon({
        anchor: [0.5, 0.5],   // Default value is the icon center.
        scale: 0.3,
        color: '#ffcd46',
        crossOrigin: 'anonymous',
        src: 'http://127.0.0.1:8081/static/img/truck128.png'

});
var iconStyle = new ol.style.Style({
    image: icon
});

// Popup showing the position the user clicked
var container = document.getElementById('popup');
var popup = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
        duration: 250
    }
});

map.addOverlay(popup);

/* Add a pointermove handler to the map to render the popup.*/
map.on('pointermove', function (evt) {
      var feature = map.forEachFeatureAtPixel(evt.pixel, function (feat, layer) {
        return feat;
      });

      if (feature && feature.get('type') == 'Point') {
          var coordinate = evt.coordinate;    //default projection is EPSG:3857 you may want to use ol.proj.transform
          content.innerHTML = feature.get('desc');
          popup.setPosition(coordinate);
      } else {
          popup.setPosition(undefined);      
      }
});
</script>

websocket代码是：

<script>
    var socket = new WebSocket("ws://127.0.0.1:8080/ws");
    console.log(window.location.host)

    var devices = [];  // new Array();
    var markers = {};  // new Object();

    socket.onopen = function (event) {}
    socket.onoclose = function (event) {}
    socket.onerror = function (error) {
    console.log('Error ${error.message}')
    }
    socket.onmessage = function (event) {
        var messages = document.getElementById("messages");
        var obj = JSON.parse(event.data);
        var device = obj.unique_id;
        var data=[{"Lon":19.455128,"Lat":41.310575}];

        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([obj.lon, obj.lat], 'EPSG:4326', 'EPSG:3857')),
            type: 'Point',
            desc: '<pre> <b> First Location </b> ' + '<br>' + 'Latitude : ' + obj.lon + '<br>Longitude: ' + obj.lat + '</pre>'
        });
        iconFeature.setStyle(iconStyle);

        if(!devices.includes(device)) {
            devices.push(device);


        var coordinates = [obj.lon, obj.lat];
            markers[device]= iconFeature;
            straitSource.addFeature(iconFeature);
        } else {
            straitSource.removeFeature(markers[device]);
            straitSource.addFeature(iconFeature);
            markers[device]= iconFeature;
        }   
    };
</script>

Answer 1

您的代码看起来像这样，尽管您可能想根据自己的要求进行优化

infer

在openlayers 5上聚类标记

1 个答案: