Movatterモバイル変換


[0]ホーム

URL:



Astro logo

dayjournal memo

Total 1041 articles!!

maplibregljs

MapLibre GL JS #032 - レイヤのズームレベル範囲設定

Yasunori Kirimoto's avatar


画像



レイヤのズームレベル範囲を設定するメモ。



画像



script.js

// MapTiler読み込みconstmap=new maplibregl.Map({    container:'map',    style:'https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=[APIキー]',    center: [139.767,35.681],    zoom:11,});// コントロール関係表示map.addControl(new maplibregl.NavigationControl());map.on('load',function () {// サークル設定    map.addSource('point_sample', {        type:'geojson',        data: {"type":"FeatureCollection","name":"sample","crs": {"type":"name","properties": {"name":"urn:ogc:def:crs:OGC:1.3:CRS84" } },"features": [                {"type":"Feature","properties": {"field01":"一","field02":"abcd","field03":5 },"geometry": {"type":"Point","coordinates": [139.766778945922852,35.68198003744061 ] } },                {"type":"Feature","properties": {"field01":"二","field02":null,"field03":7 },"geometry": {"type":"Point","coordinates": [139.762916564941406,35.674310750817348 ] } },                {"type":"Feature","properties": {"field01":"三","field02":"kojsha","field03":9 },"geometry": {"type":"Point","coordinates": [139.763603210449219,35.691391336319306 ] } }            ]        }    });// スタイル設定    map.addLayer({"id":"point_sample","type":"circle","source":"point_sample","layout": {},"paint": {'circle-color':"#FF0000",'circle-radius':10        }    });// レイヤのズームレベル範囲設定    map.setLayerZoomRange('point_sample',0,12);});



MapLibre GL JSを手軽に始めるビルド環境公開しています。
maplibregljs-starter



book

book







[8]
ページ先頭

©2009-2025 Movatter.jp