Блог

У меня есть эти особенности

  <ol-vector-layer title="Features" :visible="vectorMenuDisplay" >
    <ol-source-vector ref="sourceVectorNew" :projection="projection" :features="existingFeatures">
      <ol-interaction-modify v-if="!mapLock amp;amp; modifyEnabled" :features="selectedFeatures" @modifyend="modifyend"></ol-interaction-modify>
      <ol-interaction-draw v-if="!mapLock amp;amp; drawEnable" :type="drawType" @drawend="drawend"></ol-interaction-draw>
    </ol-source-vector>
    <ol-style>
      <ol-style-stroke color="red" :width="5"></ol-style-stroke>
      <ol-style-fill color="rgba(255,255,255,0.1)"></ol-style-fill>
      <ol-style-circle :radius="7">
        <ol-style-fill color="green"></ol-style-fill> 
        // this color should be from extra data in properties of the feature
      </ol-style-circle>
    </ol-style>
  </ol-vector-layer>
 

Я хотел бы color="green" динамически изменять в зависимости от изменяющегося состояния связанную с ним информацию, которая является отдельной и хранится в функции properties values

Обновление: я использовал эту функцию из ответа ниже, но всегда получал один цвет (первый из списка) на выходе, даже если цвет соответствует функции

 const overrideStyleFunction = (feature, style) => {
  const difficulty = feature.get('difficulty');
  const mode = feature.get('mode')
  let color = getPointColor(mode, difficulty)
  console.log(color) // getting 'red', 'blue', etc...
  style.getImage().getFill().setColor(color); // wrong color in style after first; they are all same color as first
}
 

вы можете добавить функцию переопределения функции в такой стиль

  <ol-style :overrideStyleFunction="overrideStyleFunction">
            <ol-style-stroke color="red" :width="2"></ol-style-stroke>
            <ol-style-fill color="rgba(255,255,255,0.1)"></ol-style-fill>

            <ol-style-circle :radius="20">
                <ol-style-stroke color="black" :width="15" :lineDash="[]" lineCap="butt"></ol-style-stroke>
                <ol-style-fill color="black"></ol-style-fill>
            </ol-style-circle>

            <ol-style-text>
                <ol-style-fill color="white"></ol-style-fill>
            </ol-style-text>
        </ol-style>
 

В сценарии :

    const overrideStyleFunction = (feature, style) => {

       let properties= feature.get('bla bla bla');  //from extra data in properties of the feature
       if(properties == "....") // change the style
           style.getImage().getFill().setColor("red");
    
    }