Labo288

プログラミングのこと、GISのこと、パソコンのこと、趣味のこと

JavaScript

OpenLayersでバイナリベクトルタイルをstyle.jsonでスタイリング表示する

OpenLayersで地理院タイルをスタイリングしつつ表示する例 はじめに OpenLayersは基本機能だけでバイナリベクトルタイルをソースとしたレイヤーを表示する事が出来ます。 qiita.com でも基本機能ではMapbox Style形式のいわゆるstyle.jsonを読み込む事は出来…

Mapbox GL JS用のラッパーライブラリを作ってみた話

はじめに ベクタータイルやWebGLによる高速描画など、WebGISで今最もアツいのはMapbox GL JSに違いありませんが、私はLeaflet.jsが好きです。 なぜならAPIが非常にシンプルだからです。例えばGeoJSONレイヤーを追加したければ、Leaflet.jsでは以下のように書…

MapboxにGeoJsonファイルをドラッグドロップで読み込むサンプル

はじめに www.labo288.site 以前紹介したLeafletによるWebGISでは、GeoJSONファイルとシェープファイル(zip圧縮されたもの)の読み込みに対応していました。 ドラッグドロップすると、POSTリクエストが飛び、(シェープファイルなら変換されて)GeoJSON形式…

静的なGeoJSONファイルを読み込んでLeafletにレイヤーを追加する

概要 GeoJSONファイルとは、以下のとおり、ある程度データの構造が予め規定されたJSON形式のファイルです。 { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [102.0, 0.5]}, "properties"…

シンプルなWebGIS「VanillaGIS」の紹介

はじめに オープンソースのGISにはQGISというド定番・大正義が存在しますが、インストールの手間、投影法など、若干敷居が高くなっています。ウェブ上で公開されている多数のGISデータ(国土数値情報等)の内容をすぐに確認出来る、シンプルなWebGISがあれば…

Leafletのパフォーマンス改善について

はじめに Leafletは実装が簡単でカスタマイズ性も高く、非常に使いやすいWeb地図ライブラリですが、デフォルトの設定だと、多数の地物で構成されるベクターレイヤーの描画に、パフォーマンス上の問題がありました。要はポリゴンが多くなると途端に動作が重く…

FlaskとJavaScriptのFetch通信でダウンロードさせる方法

はじめに Flaskのレスポンスによってファイルをダウンロードさせる方法は以下のリンクのとおり3つあるようです。 qiita.comしかしながら、Fetch通信によるPOSTに対するresponseにはこれらの方法だけでは対応出来ませんでした。解決した方法を以下に載せてお…

Leaflet.jsでオーバーレイを追加する

はじめに 路線バスのShapefile(zip圧縮)を読み込んで表示する動画 なおGeoJSONエクスポート機能も実装済み 保存機能も実装はしているもののまだまだ完成は遠い それなりに大きいデータでもそこそこの速度で動作しているのがうれしい #GIS #Leaflet pic.twitt…

LeafletでGeoJsonを読み込む

はじめに オープンソースのWeb地図なら、Leafletが使いやすくてよいです。たとえばOpenStreetMapのタイル地図を実装する場合、以下のとおりです。 //地図を表示するdiv要素のidを設定 var map = L.map('map_container'); //地図の中心とズームレベルを指定 m…