Leaflet + Vue.js로 지도의 표시 위치를 전환할 수 있는 샘플 사이트를 만들어 보았다

이 기사는 North Detail Advent Calendar 2019의 넷째 날 기사입니다.

2020/04/02 추가
이 기사는 NorthDetail 블로그에도 게시되었습니다.
htps //w w. rth에서 원하는 l. 이. jp/bぉg/441/

폐사는 최근 지도를 다루는 업무가 늘어났기 때문에, 최근 몇 달 정도 학습이 엄청나게 "Leaflet" 를 사용해 보고 있습니다.
원래 "Vue.js" 에서의 사이트 구축도 많기 때문에, 양쪽을 맞추면 어떻게 될까, 라고 하는 것을 시험해 보고 싶습니다.

데모 사이트 : h tps : // / mp ぇ-ぇ 아 f ぇ t- t ck. 네 tぃfy. 코m/
소스 코드 : htps : // 기주 b. 코 m / 타크 / mp ぇ ぇ 아 f ぇ t

화면에서 보면

이런 식으로 표시됩니다.


처음에는 "위치 정보 제공 허가"가 요구되므로 "허가"를 선택하십시오.


'현재 위치' 버튼을 클릭하면 브라우저를 통해 획득한 위치 정보의 위치를 ​​지도에 표시합니다. (여기는 우리 회사)

해설

Vue.js와 Leaflet.js 각각의 자세한 취급 방법은 전용 사이트에 맡깁니다.

여기에서는 조금 궁리한 곳을.

정보 업데이트

현재 위치 취득 및 반영

Main 컴퍼넌트안에, Tab 컴퍼넌트(버튼이 있는 영역)와 Map 컴퍼넌트(지도가 있는 영역)를 가지는 형태로 하고 있습니다.
Map 컴포넌트는 Main 컴포넌트로부터 주어진 위도 경도를 중심으로 지도를 표시하는(변경이 있으면 갱신한다)만, 이라는 제작입니다.

위도 경도의 변경되는 타이밍은, 다음의 2개가 됩니다.

버튼을 누르면

버튼이 "현재 위치"일 때 브라우저에서 주어진 위치 정보가 navigator.geolocation.watchPosition()를 통해 업데이트되면

버튼을 누르면

Tab 구성 요소에는 TabButton 구성 요소가 두 개 있습니다.
TabButton 컴퍼넌트는, 클릭되면 「클릭되었어요」라고 하는 이벤트를 Tab 컴퍼넌트에 돌려줄 뿐입니다.
어느 버튼을 클릭했는지는, Tab 컴퍼넌트의 책임 범위로서, 여기로부터 한층 더 Main 컴퍼넌트에 이벤트를 던집니다.
Main 컴퍼넌트에는 "어느 버튼이 눌렸는지"를 알 수 있는 것을 인수로서 건네주고 있습니다.

Main 컴퍼넌트는, 받은 값을 사용해 위도 경도를 갱신해, Map 컴퍼넌트에 (props 경유로) 정보를 건네줍니다.

TabButton.vue

(snip)
    <b-button @click="$emit('click')" size="lg" :variant="status">
(snip)

Tab.vue

    <TabButton
      @click="clickStation"
      id="sation"
      :status="stationVariant"
      label="札幌駅"
    ></TabButton>
(snip)
    clickStation() {
      this.stationVariant = "info";
      this.hereVariant = "";

      this.$emit("changeActive", "static");
    },

Main.vue

(snip)
    <Tab @changeActive="setActive"></Tab>
(snip)
    setActive: function(location) {
      console.log("active:" + location);
      this.lat = this.geosObject[location][0];
      this.lon = this.geosObject[location][1];
    },
(snip)

지도에 반영

Map 컴퍼넌트에서는, 위도 경도의 정보가 갱신된 것 (정확하게는 props로 가지는 'lat' 의 값이 갱신된 것)을 알 수 있도록(듯이), watch 를 사용하고 있습니다.

Main.vue

(snip)
    <Map :lat="lat" :lon="lon"></Map>
(snip)

Map.vue

(snip)
  methods: {
    updateCurrentPosition: async function() {
      if (this.map) {
        this.map.panTo([this.lat, this.lon]);
      }
      if (this.currentCircle) {
        this.currentCircle.setLatLng([this.lat, this.lon]);
      }
      if (this.currentPoint) {
        this.currentPoint.setLatLng([this.lat, this.lon]);
      }
    }
  },
  watch: {
    lat: function() {
      this.updateCurrentPosition();
    }
  }
(snip)

요약

Vue.js의 구성 요소 중 하나로 Leaflet을 사용하여지도를 쉽게 사용할 수있었습니다.
Map 컴포넌트 밖에서 위치 정보를 주어지므로, 각종 서비스와 제휴해 지도 표시하는 것도 부담없이 할 수 있을 것 같습니다.