Draw modify

by Vladimir Vershinin

HTML

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v5.3.0/build/ol.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/style.css">
<div id="app">
  <div id="map">
    <vl-map :load-tiles-while-animating="true"
            :load-tiles-while-interacting="true"
            data-projection="EPSG:4326">
      <vl-view :zoom="zoom"
               :center="center"
               :max-zoom="maxZoom"
               :min-zoom="minZoom"
               :rotation="rotation"></vl-view>

      <vl-layer-tile>
        <vl-source-osm></vl-source-osm>
      </vl-layer-tile>

      <vl-layer-vector>
        <vl-source-vector>
          <vl-feature v-for="f in features" :key="f.id">
            <vl-geom-point :coordinates="f.geometry.coordinates"></vl-geom-point>
            <vl-style-box>
              <vl-style-text :text="_fommatText(f)"
                             font="bold 24px Arial"
                             text-align="end"
                             text-baseline="middle">
                <vl-style-stroke :width="3"
                                 color="rgba(250,0,0,0.8)"></vl-style-stroke>
                <vl-style-fill :color="f.properties.color"></vl-style-fill>
              </vl-style-text>
              <vl-style-icon src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png"
                             cross-origin="anonymous"
                             :scale="0.1"
                             :color="f.properties.color"></vl-style-icon>
            </vl-style-box>
          </vl-feature>
        </vl-source-vector>
      </vl-layer-vector>

      <vl-layer-vector>
        <vl-source-vector ident="draw-target" ></vl-source-vector>
        <vl-style-box>
          <vl-style-text text=" how to bin text by data?"
                        ...

CSS

html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body * {
  box-sizing: border-box;
}

#app {
  display: flex;
  flex-direction: column;
}

#map {
  flex: 1 1 auto;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    center: [37.41, 8.82],
    rotation: 0,
    zoom: 5,
    maxZoom: 5,
    minZoom: 5,
    features: [
      {
        id: "d45bdba2-84b7-46d9-80a0-64b78c67acd1",
        type: "Feature",
        geometry: {
          type: 'Point',
          coordinates: [37.41, 15.82],
        },
        properties: {
          name: "Point 1",
          color: 'yellow',
          value: 100,
        },
      },
      {
        id: "d45bdba2-84b7-46d9-80a0-64b78c67acd2",
        type: "Feature",
        geometry: {
          type: 'Point',
          coordinates: [30.41, 10.82],
        },
        properties: {
          name: "Point 2",
          color: 'yellow',
          value: 50,
        },
      },
      {
        id: "d45bdba2-84b7-46d9-80a0-64b78c67acd3",
        type: "Feature",
        geometry: {
          type: 'Point',
          coordinates: [47.41, 15.82],
        },
        properties: {
          name: "Point 3",
          color: 'yellow',
          value: 0,
        },
      },
    ],
  },
  methods: {
    _fommatText(f) {
      return `  ${f.properties.name}
${f.properties.value}%`;
    },
    test() {
      setInterval(() => {
        for (var i = 0; i < this.features.length; i++) {
          let color = ["blue", "yellow", "green", "pink"][Math.ceil(Math.random() * 100) % 4];
          let value = Math.ceil(Math.random() * 100);
          this.features[i].properties.color = color;
          this.features[i].properties.value = value;
        }
      }, 1000);
    }
  },
})