установить центрирование карты по умолчанию с помощью реквизита в vue - PullRequest
Новая
       33

установить центрирование карты по умолчанию с помощью реквизита в vue

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

Я использую vue, чтобы создать приложение, управляемое с помощью ar c, поскольку центр карты может меняться в зависимости от местоположения пользователя, я устанавливаю местоположение по умолчанию для некоторых реквизитов, а затем передаю их в компонент карты, чтобы вызывается в хуке компонентов карты mount () для рендеринга.

Я думаю, что я довольно близок к тому, чтобы сделать это правильно, но когда я регистрирую свои реквизиты в компоненте карты в консоли, он говорит, что они не определены.

Я не уверен, что мой код приложения ошибочен или код моего дочернего компонента?

, как вы можете видеть в моем приложении. vue Я даже пытаюсь передать простые целые числа проверьте значения, и они все еще не определены.

app. vue

<template>
    <div id="app">
        <web-map v-bind:centerX="-118" v-bind:centerY="34" />

        <div class="center">
          <b-button class="btn-block" @click="getLocation" variant="primary">My Location</b-button>
        </div>
    </div>


</template>

<script>
import WebMap from './components/webmap.vue';

export default {
    name: 'App',
    components: { WebMap }, 
    data(){
      return{
        lat: -118,
        long: 34
      }
    },
};
</script>

webmap. vue

<template>
  <div></div>
</template>

<script>
import { loadModules } from 'esri-loader';

export default {
  name: 'web-map',
  props:['centerX, centerY'],
  data: function(){
    return{
      X: this.centerX,
      Y: this.centerY
    }
  },
  mounted() {
    console.log(this.X,this.Y)

    // lazy load the required ArcGIS API for JavaScript modules and CSS
    loadModules(['esri/Map', 'esri/views/MapView'], { css: true })
    .then(([ArcGISMap, MapView]) => {
      const map = new ArcGISMap({
        basemap: 'topo-vector'
      });

      this.view = new MapView({
        container: this.$el,
        map: map,
        center: [this.X,this.Y],   ///USE PROPS HERE FOR NEW CENTER
        zoom: 8
      });
    });
  },
  beforeDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  }
};

</script>

1 Ответ

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

Есть опечатка. Изменить: 

props:['centerX, centerY'],

на: 

props:['centerX', 'centerY'],
...