Open1

Vue.jsとWebGISライブラリ

Vueで扱えるWebGISラッパー

どちらもレイヤやソースが仮想的なコンポーネントにまとめられている。
VueLayersだとこんな感じ。

<template>
  <vl-map>
      <vl-view/>
      <vl-layer-tile>
          <vl-source-osm/>
      </vl-layer-tile>
  </vl-map>
</template>

眺めていると、この書き方は地図の仕上がりが想像しやすくて、良い気がする。
Mapbox GL JSでのstyle.jsonは整飾でとても有用ではあるものの、地図の構造を表現するにはJSONよりもこういうHTMLっぽい書き方のほうが分かりやすい気がする。

例えばこんな感じ

<template>
  <map>
    <view/>
    <layer type="xyz"/>
  </map>
</template>

個人的には地図(Map)に視点(View)が従属するというより、視点に地図が従属するほうがしっくりくる。
例えば、

<template>
  <view :x="x" :y="y" :zoom="z1">
    <map class="fluid">
      <pan :x="x" :y="y"/>
      <zoom :zoom="z1"/>
      <layer type="xyz" src="a"/>
    </map>
  </view>
  <view :x="x" :y="y" :zoom="z2">
    <map class="mini right-bottom">
      <layer type="xyz" src="b" >
    </map>
  </view>
</template>

こういう風に書けるようになると、「大きな地図が一枚あって、その右下に小さい地図があるんだろう。地図の中心地点はそれぞれ同期してるけど、ズームレベルはそれぞれで異なる。大きいほうの地図だけがパン操作による移動などできるのだろう」みたいな感じでわかりやすくなる気がする。

いっそ、<template>を使ってCanvasを描画するVugelみたいに、<template>なりJSXなりに基づいて、地図の描画まで出来るライブラリがあったら面白いかもしれない(VueLayersなどで出来ているといえばできているが…)

ログインするとコメントできます