이것은 벡터 타일 Advent Calendar 2017의 기사입니다.

소개

Leaflet 에서 GeoJSON 타일을 다루는 방법으로는 L.TileLayer.GeoJSON 플러그인 가 정평으로, 국토 지리원 벡터 타일 제공 실험 에서도 이 플러그인을 사용한 데모를 소개하고 있습니다.
다만, 이 플러그인은 1세대전의 Leaflet0.7계를 대상으로 하고 있어, 현행판인 Leaflet1.0계에서는 동작하지 않습니다. 저자도 바쁘다고 한다 그래서 앞으로도 대응의 전망은 얇을 것 같습니다.

이 항목에서는 플러그인이나 자전 클래스를 사용하지 않고 즉시 Leaflet1.0 계에서 GeoJSON 타일을 표시하는 TIPS를 소개합니다.

데모

출처

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
  <title>Leaflet1.2 GeoJSON Tile Tips</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <script src="https://unpkg.com/[email protected]/leaflet-hash.js"></script>
</head>

<body>
  <div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
  <script>
    // Initalize map
    var map = L.map("map", L.extend({
      minZoom: 17,
      zoom: 18,
      maxZoom: 22,
      center: [35.64430, 139.67124]
    }, L.Hash.parseHash(location.hash)));
    map.zoomControl.setPosition("bottomright");
    L.hash(map);

    // Add background layer
    L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg", {
      attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>GSI</a>",
      maxZoom: 22,
      maxNativeZoom: 18
    }).addTo(map);

    // Create tilelayer with empty image
    L.tileLayer(L.Util.emptyImageUrl, {
      attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>GSI</a>",
      maxZoom: 22,
      maxNativeZoom: 18,
      minNativeZoom: 18
    }).on("tileload", function(event) {
      // Add tileload event handler to load geojson and add geojson layer
      var url = "https://cyberjapandata.gsi.go.jp/xyz/experimental_fgd/{z}/{x}/{y}.geojson";
      fetch(L.Util.template(url, event.coords)).then(a => a.ok ? a.json() : null).then(geojson => {
        if (!geojson || !this._map) return;
        event.tile.geojson = L.geoJSON(geojson, {
          style: function(geojson) {
            return {
              weight: 1.5,
              color: "#ffffff"
            };
          }
        }).addTo(this._map);
      });
    }).on("tileunload", function(event) {
      // Add tileunload event handler to remove geojson layer
      if (event.tile.geojson && this._map)
        this._map.removeLayer(event.tile.geojson);
    }).addTo(map);
  </script>
</body>

</html>

메모

이런 구조입니다.

투명한 이미지를 표시하는 L.TileLayer 만들기

L.TileLayer 타일 추가 이벤트를 선택하여 GeoJSON 얻기/L.GeoJSON 추가

L.TileLayer 타일 삭제 이벤트를 선택하여 L.GeoJSON 삭제

L.tileLayer(L.Util.emptyImageUrl,{
  // レイヤーが表示される最大ズームレベル。デフォルトが18なので大きくしておく
  maxZoom: 22, 

  // ベクトルタイルの提供ズームレベル上限を指定
  maxNativeZoom: 18, 

  // ベクトルタイルの提供ズームレベル下限を指定
  minNativeZoom: 18 

}).on("tileload",function(event){

  // タイルをロードするときの処理を記述

}).on("tileunload",function(event){

  // タイルが消去されるときの処理を記述

}).addTo(map);

L.Util.emptyImageUrl은 내장 투명 GIF입니다.

tileload event은 타일을 읽을 때 발행되는 이벤트입니다.

마찬가지로 tileunload 이벤트은 타일이 더 이상 필요하지 않을 때 발행되는 이벤트입니다

maxNativeZoom/minNativeZoom은 벡터 타일 제공 줌 레벨의 상하한을 지정합니다.

Leaflet1.0은 기존의 maxNativeZoom 이외에 minNativeZoom에도 대응하고 있으므로, 위와 같은 설정으로 마음대로 오버 줌도 해 줍니다. 단, minNativeZoom 을 설정한 상태로 축소하면 매우 많은 타일을 취득하러 가게 되므로 주의합시다.

Reference

이 문제에 관하여(Leaflet1.0계에서 GeoJSON 타일을 다루는 TIPS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/frogcat/items/97ab41c6675213b1a3f4

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Leaflet1.0계에서 GeoJSON 타일을 다루는 TIPS

소개

데모

출처

메모

Reference

좋은 웹페이지 즐겨찾기