Fatal编程技术网
  • javascript/
  • Javascript 如何动态更改图标源

Javascript 如何动态更改图标源

javascript openlayers

Javascript 如何动态更改图标源,javascript,openlayers,openlayers-5,Javascript,Openlayers,Openlayers 5,我有下面的代码 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({

我有下面的代码

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 clusterLayer = new ol.layer.Vector({
  source: new ol.source.Cluster({
    source: straitSource,
    distance: 40
  })
});

map = new ol.Map({
    layers: [OSMBaseLayer, clusterLayer],
    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
});

var styleCache = {};
clusterLayer.setStyle(function(feature) {
    var size = feature.get('features').length;
    if (size == 1 && map.getView().getZoom() > 16) {  // size == 1 && resolution < map.getView.getResolutionForZoom(6)
          // if a cluster of one show the normal icon
          return iconStyle
    } else {
          // otherwise show the number of features
          var style = styleCache[size];
          if (!style) {
            style = new ol.style.Style({
              image: new ol.style.Circle({
                radius: 10,
                stroke: new ol.style.Stroke({
                  color: '#fff'
                }),
                fill: new ol.style.Fill({
                  color: '#3399CC'
                })
              }),
              text: new ol.style.Text({
                text: size.toString(),
                fill: new ol.style.Fill({
                  color: '#fff'
                })
              })
            });
            styleCache[size] = style;
          }
          return style;
    }
});


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

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

      if (cluster && map.getView().getZoom() > 16) {
          map.addOverlay(popup);
          var coordinate = evt.coordinate;    //default projection is EPSG:3857 you may want to use ol.proj.transform
          // list all the features in the cluster
          content.innerHTML = '';
          cluster.get('features').forEach(function(feature) {
            content.innerHTML += (feature.get('desc') + '<br>');
          });
          popup.setPosition(coordinate);
      } else {
          popup.setPosition(undefined);      
      }
});
更新

完整代码在得到答案后，问题是根据收到的最新更新，为所有用户定义了图标
空闲
或
忙
：

映射启动
：

<script>
var content = document.getElementById('popup-content');
var center = ol.proj.transform([44.6753, 25.7136], 'EPSG:4326', 'EPSG:3857'); /
            //  ol.proj.fromLonLat([44.6753, 25.7136])
var view = new ol.View({
        center: center,  
        zoom: 6   
});  

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

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

var clusterLayer = new ol.layer.Vector({
  source: new ol.source.Cluster({
    source: straitSource,
    distance: 40
  })
});

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

var container = document.getElementById('popup');
var popup = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
        duration: 1000
    }
});

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

      if (cluster && map.getView().getZoom() > 13) {
          map.addOverlay(popup);
          var coordinate = evt.coordinate;    //default projection is EPSG:3857 you may want to use ol.proj.transform
          // list all the features in the cluster
          content.innerHTML = '';
          cluster.get('features').forEach(function(feature) {
            content.innerHTML += (feature.get('desc') + '<br>');
          });
          popup.setPosition(coordinate);
      } else {
          popup.setPosition(undefined);      
      }
});

const list = document.querySelector('#menuList');

const searchBar = document.forms['search-truck'].querySelector('input');
searchBar.addEventListener('keyup', function(e){
  const trucks = Array.from(list.getElementsByTagName('li'));
  const term = e.target.value.toLowerCase();
  trucks.forEach(function(truck){
    const title = truck.textContent.toLowerCase();
    if(title.includes(term)){ 
      truck.style.display = 'inline-block';
    }
    else { 
      truck.style.display = 'none';
    } 
  })
})

function arrayRemove(arr, value) {
   return arr.filter(function(ele){
       return ele != value;
   });
}
</script>

ol.style.Icon
没有
setSrc
方法，因此您需要为每个源创建一个方法。然后，根据需要在
ol.style.style
中设置：

if (size == 1 && map.getView().getZoom() > 16) {  // size == 1 && resolution < map.getView.getResolutionForZoom(6)
      // if a cluster of one show the normal icon
      iconStyle.setImage(obj.free_op ? greenIcon : redIcon);
      return iconStyle
} else { }
完整代码可能如下所示：

var greenIconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        scale: 0.3,
        color: '#ffcd46',
        crossOrigin: 'anonymous',
        src: 'http://127.0.0.1:8081/static/img/greenIcon.png'
    })
});

var redIconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        scale: 0.3,
        color: '#ffcd46',
        crossOrigin: 'anonymous',
        src: 'http://127.0.0.1:8081/static/img/redIconStyle.png'
    })
});

if (size == 1 && map.getView().getZoom() > 16) {  
   if (obj.free_op) { return greenIconStyle; }
         else { return redIconStyle; }
    } else {
}

iconFeature.setStyle( obj.free_op ? greenIconStyle : redIconStyle)
更新 您需要将卡车的自由_op值设置为特征属性

    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([obj.lon, obj.lat], 'EPSG:4326', 'EPSG:3857')),
        type: 'Point',
        desc:  desc,
        free_op: obj.free_op
    });
并在style函数中进行测试

clusterLayer.setStyle(function(feature) {
    var features = feature.get('features');
    var size = features.length;
    if (size == 1 && map.getView().getZoom() > 13) {
         if (features[0].get('free_op')) { return freeStyle; }  
         else { return busyStyle; }  
    } else { }

ol.style.Icon
没有
setSrc
方法，因此您需要为每个源创建一个方法。然后，根据需要在
ol.style.style
中设置：

if (size == 1 && map.getView().getZoom() > 16) {  // size == 1 && resolution < map.getView.getResolutionForZoom(6)
      // if a cluster of one show the normal icon
      iconStyle.setImage(obj.free_op ? greenIcon : redIcon);
      return iconStyle
} else { }
完整代码可能如下所示：

var greenIconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        scale: 0.3,
        color: '#ffcd46',
        crossOrigin: 'anonymous',
        src: 'http://127.0.0.1:8081/static/img/greenIcon.png'
    })
});

var redIconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        scale: 0.3,
        color: '#ffcd46',
        crossOrigin: 'anonymous',
        src: 'http://127.0.0.1:8081/static/img/redIconStyle.png'
    })
});

if (size == 1 && map.getView().getZoom() > 16) {  
   if (obj.free_op) { return greenIconStyle; }
         else { return redIconStyle; }
    } else {
}

iconFeature.setStyle( obj.free_op ? greenIconStyle : redIconStyle)
更新 您需要将卡车的自由_op值设置为特征属性

    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([obj.lon, obj.lat], 'EPSG:4326', 'EPSG:3857')),
        type: 'Point',
        desc:  desc,
        free_op: obj.free_op
    });
并在style函数中进行测试

clusterLayer.setStyle(function(feature) {
    var features = feature.get('features');
    var size = features.length;
    if (size == 1 && map.getView().getZoom() > 13) {
         if (features[0].get('free_op')) { return freeStyle; }  
         else { return busyStyle; }  
    } else { }

我想知道一个问题，请查看我的最新问题。谢谢如果每辆卡车都有自己的
free_op
值，则需要将其设置为功能属性。查看我的更新。非常感谢Mike，非常感谢。我有一个问题，请查看我的更新问题。谢谢如果每辆卡车都有自己的
free_op
值，则需要将其设置为功能属性。看到我的更新。非常感谢迈克，非常感谢。