Дисплей Geo json с Vuejs и Vuelayers - PullRequest
Новая
       5

Дисплей Geo json с Vuejs и Vuelayers

0 голосов
/ 08 января 2020

Я пытаюсь отобразить Geo json с VueLayers в Vuejs Framework. Я не могу понять, что не так с моим кодом, но он не отображает карту и мои данные. Я не уверен, что понимаю разницу в синтаксисе с оригинальными vuelayers. 

<template>
  <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326" style="height: 400px">
    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>

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

    <vl-layer-tile id="wmts">
      <vl-source-wmts :attributions="attribution" :url="url" :layer-name="layerName" :matrix-set="matrixSet" :format="format" 
                      :style-name="styleName"></vl-source-wmts>
    </vl-layer-tile>
  </vl-map>
</template>

<script>
  export default {
    data () {
      return { 
        zoom: 2,
        center: [-90, 50],
        rotation: 0,
            id: 'countries',
            title: 'Countries',
            cmp: 'vl-layer-vector',
            visible: false,
            source: {
              cmp: 'vl-source-vector',
              url: 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson',
            },
            style: [
              {
                cmp: 'vl-style-box',
                styles: {
                  'vl-style-fill': {
                    color: [255, 255, 255, 0.5],
                  },
                  'vl-style-stroke': {
                    color: '#219e46',
                    width: 2,
                  },
                  'vl-style-text': {
                    text: '\uf041',
                    font: '24px FontAwesome',
                    fill: {
                      color: '#2355af',
                    },
                    stroke: {
                      color: 'white',
                    },
                  },
                },
              },
            ],
          }
</script>

Что не так с моим скриптом?

...