рендеринг полигонов на карте яндекса - PullRequest
Новая
       26

рендеринг полигонов на карте яндекса

0 голосов
/ 22 апреля 2020

У меня есть VUE шаблон, где я рисую несколько полигонов с картой Яндекса. Есть 2 полигона с 123 и 124 id. 123 Polygon берет данные о цвете из markerFill. Для теста я попытался взять информацию из postgres в 124 Polygon с 

 :markerFill="{color: polygon[0].color}"

Все варианты работают, но во втором варианте у меня ошибка в консоли

vue. runtime.esm. js? 2b0e: 619 [Vue warn]: ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство 'color' of undefined"

найдено в

- -> в src / App. vue

Я думаю, что моя асинхронная / ожидающая функция beforeCreate не работает хорошо. 

   <template>
    <div id="app">
        <yandex-map
            :coords="coords"
            :map-type="maptype">
            <ymap-marker
                marker-id="123"
                :marker-type="markerType"
                :coords="coordsPolygon"
                :markerFill="{color: markerFill}"
                @click="onClick"
                @contextmenu="contextMenu"
            ></ymap-marker>
            <ymap-marker
                marker-id="124"
                :marker-type="markerType"
                :coords="coordsPolygon2"
                :markerFill="{color: polygon[0].color}"
                @click="onClick"
                @contextmenu="contextMenu"
            ></ymap-marker>
        </yandex-map>
    </div>
</template>

<script>

import PolygonService from '../services/PolygonService'

export default {
  data: () => ({
    coords: [55.82934, 50.47381],
    coordsPolygon: [[[55.82934834500297, 50.473813972428545], [55.82502132761555, 50.48726256842927], [55.82543502707805, 50.48785265441253], [55.829752940206475, 50.474248490289035], [55.82934834500297, 50.473813972428545]]],
    coordsPolygon2: [[[55.82534666416819, 50.467352396297905], [55.825687888175935, 50.46737921838804], [55.82064169383499, 50.484153753567064], [55.82024304365505, 50.48365486269041], [55.8251956791464, 50.46728265886356], [55.82534666416819, 50.467352396297905]]],
    maptype: 'satellite',
    markerFill: 'ffffff',
    markerType: 'Polygon',
    polygon: []
  }),
  async beforeCreate () {
    this.polygon = (await PolygonService.get()).data
  },
  methods: {
    onClick (e) {
      var eMap = e.get('target')
      eMap.editor.startEditing()
    },
    contextMenu (e) {
      var eMap = e.get('target')
      console.log(11)
      eMap.editor.stopEditing()
    }
  }
}
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
    .ymap-container {
        height: 776px;
    }
    .red {
        color: red;
    }
</style>

Ответы [ 2 ]

0 голосов
/ 23 апреля 2020

в первый раз полигон пуст

и я использовал эту строку 

        <yandex-map
        v-if="polygons.length"
0 голосов
/ 23 апреля 2020

В жизненном цикле Vue хук beforeCreate запускается при самой инициализации вашего компонента. данные не стали реагирующими, а события еще не настроены.

Я предлагаю использовать created для извлечения данных для вашего компонента?

...