Установить границы карты на основе нескольких маркеров Lng, Lat - PullRequest
Новая
       9

Установить границы карты на основе нескольких маркеров Lng, Lat

0 голосов
/ 16 ноября 2018

Я использую vue и установил компонент vue-mapbox, расположенный здесь: https://soal.github.io/vue-mapbox/#/quickstart

Я обновил js и css до последних версий, которые также добавляются в index.html: 

<!-- Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css" rel="stylesheet" />
<!-- Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js"></script>

Я пытаюсь использовать этот компонент для установки вида карты по умолчанию, используя либо center, либо bounds, либо fitBounds для списка координат Lng, Lat. Итак, в основном, как подключить lng, lat координаты и по умолчанию на карте центрировать эти координаты внутри контейнера?

Вот созданный мною Компонент с именем Map для вывода карты с использованием компонента vue-mapbox, указанного выше: 

<template>
  <b-row id="map" class="d-flex justify-content-center align-items-center my-2">
    <b-col cols="24" id="map-holder" v-bind:class="getMapType">
        <mgl-map
          id="map-obj"
          :accessToken="accessToken"
          :mapStyle.sync="mapStyle"
          :zoom="zoom"
          :center="center"
          container="map-holder"
          :interactive="interactive"
          @load="loadMap" 
          ref="mapbox" />
    </b-col>
  </b-row>
</template>

<script>
import { MglMap } from 'vue-mapbox'
export default {
  components: {
    MglMap
  },
  data () {
    return {
      accessToken: 'pk.eyJ1Ijoic29sb2dob3N0IiwiYSI6ImNqb2htbmpwNjA0aG8zcWxjc3IzOGI1ejcifQ.nGL4NwbJYffJpjOiBL-Zpg',
      mapStyle: 'mapbox://styles/mapbox/streets-v9', // options:  basic-v9, streets-v9, bright-v9, light-v9, dark-v9, satellite-v9
      zoom: 9,
      map: {}, // Holds the Map...
      fitBounds: [[-79, 43], [-73, 45]]
    }
  },
  props: {
    interactive: {
      default: true
    },
    resizeMap: {
      default: false
    },
    mapType: {
      default: ''
    },
    center: {
      type: Array,
      default: function () { return [4.899, 52.372] }
    }
  },
  computed: {
    getMapType () {
      let classes = 'inner-map'
      if (this.mapType !== '') {
        classes += ' map-' + this.mapType
      }
      return classes
    }
  },
  watch: {
    resizeMap (val) {
      if (val) {
        this.$nextTick(() => this.$refs.mapbox.resize())
      }
    },
    fitBounds (val) {
      if (this.fitBounds.length) {
        this.MoveMapCoords()
      }
    }
  },
  methods: {
    loadMap () {
      if (this.map === null) {
        this.map = event.map // store the map object in here...
      }
    },
    MoveMapCoords () {
      this.$refs.mapbox.fitBounds(this.fitBounds)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../styles/custom.scss';

  #map {
    #map-obj {
      text-align: justify;
      width: 100%;
    }
    #map-holder {
      &.map-modal {
        #map-obj {
          height: 340px;
        }
      }
      &.map-large {
        #map-obj {
          height: 500px;
        }
      }
    }
    .mapboxgl-map {
      border: 2px solid lightgray;
    }
  }
</style>

Итак, я пытаюсь использовать метод fitBounds здесь, чтобы инициализировать карту с центром в 2 Lng, координаты Lat здесь: [[-79, 43], [-73, 45]]

Как это сделать точно? Хорошо, я думаю, что у меня может быть ошибка в моем коде, поэтому я думаю, что fitBounds должен выглядеть примерно так: 

fitBounds: () => {
  return { bounds: [[-79, 43], [-73, 45]] }
}

В любом случае, в самое трудное время установить начальное местоположение карты, чтобы оно было центрировано по 2 или более координатам. Кто-нибудь еще делает это успешно?

Хорошо, поэтому я создал фильтр для добавления пространства в bbox следующим образом: 

Vue.filter('addSpaceToBBoxBounds', function (value) {
  if (value && value.length) {
    var boxArea = []
    for (var b = 0, len = value.length; b < len; b++) {
      boxArea.push(b > 1 ? value[b] + 2 : value[b] - 2)
    }
    return boxArea
  }
  return value
})

На данный момент это выглядит достаточно хорошо. Чем просто использовать его так: 

let line = turf.lineString(this.markers)
mapOptions['bounds'] = this.$options.filters.addSpaceToBBoxBounds(turf.bbox(line))
return mapOptions

1 Ответ

0 голосов
/ 16 ноября 2018

установка начального местоположения карты по центру 2 или больше координат

Вы можете использовать Turf.js , чтобы рассчитать ограничивающий прямоугольник для всех точечных объектов и инициализировать карту с помощью этого bbox, используя параметр карты bounds:

http://turfjs.org/docs#bbox

https://www.mapbox.com/mapbox-gl-js/api/#map

...