For over a decade, Stamen has been exploring cartography with our clients and in research. These maps are presented here for your enjoyment and use wherever you display OpenStreetMap data.
十年以上、Stamen はクライアントと共に研究の中で地図製作を探究しています。これらの地図は、OpenStreetMap データを表示するところはどこでも、楽しみ使うためにここで提供されます。
十年以上、Stamen はクライアントと共に研究の中で地図製作を探究しています。これらの地図は、OpenStreetMap データを表示するところはどこでも、楽しみ使うためにここで提供されます。
説明に次のようにあります。
Two layers are composed: the watercolor base layer with the terrain labels.
２つのレイヤ- terrain labels（地域ラベル）付きの watercolor（水彩画法）ベースレイヤ-で構成されています。
２つのレイヤ- terrain labels（地域ラベル）付きの watercolor（水彩画法）ベースレイヤ-で構成されています。
次の内容で index.js を作成します。
user@deb9-vmw:~/new-project$ vim index.js
次に index.html を作成します。
import 'ol/ol.css';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import {fromLonLat} from 'ol/proj.js';
import Stamen from 'ol/source/Stamen.js';
var map = new Map({
layers: [
/** layers [Map(options)]
* Layers. If this is not defined, a map with no layers
* will be rendered. Note that layers are rendered in the
* order supplied, so if you want, for example, a vector
* layer to appear on top of a tile layer, it must come
* after the tile layer.
* レイヤ（layers）。これが定義されていない場合、レイヤのない
* マップが描画されます。レイヤは提供された順番に描画されるの
* で、例えば、ベクタレイヤがタイルレイヤの上に表示するよう望
* むなら、タイルレイヤの後に来なければならないことに注意して
* ください。（ol5 API）
*/
new TileLayer({
/** ol/layer/Tile~TileLayer
* For layer sources that provide pre-rendered, tiled
* images in grids that are organized by zoom levels for
* specific resolutions.
* プリレンダリング（事前描画）を提供するレイヤソースのため
* の、特定の解像度でのズームレベルによって編成されているグ
* リッドのタイルイメージ。（ol5 API）
*/
source: new Stamen({
/** source [TileLayer（option）]
* Source for this layer.
* レイヤのソース。（ol5 API）
*/
/** ol/source/Stamen~Stamen
* Layer source for the Stamen tile server.
* Stamen タイルサーバのレイヤのソース。（ol5 API）
*/
layer: 'watercolor'
/** layer [Stamen（option）]
* Layer name.
* レイヤ名。（ol5 API）
*/
})
}),
new TileLayer({
source: new Stamen({
layer: 'terrain-labels'
})
})
],
target: 'map',
/** target [Map(options)]
* The container for the map, either the element
* itself or the id of the element. If not specified
* at construction time, module:ol/Map~Map#setTarget
* must be called for the map to be rendered.
* map のコンテナ、（HTML）エレメント自身、または、エレメ
* ントの id。構築時に指定されていない場合、描画される map
* のために module：ol/Map~Map#setTarget が呼び出されなけ
* ればなりません。
* （ol5 API）
*/
view: new View({
/** view [Map(options)]
* The map's view. No layer sources will be fetched
* unless this is specified at construction time or
* through module:ol/Map~Map#setView.
* map（マップ）の view（ビュー）。これが構築時に指定さ
* れていないか、module：ol/Map~Map#setView を介さなけ
* れば、取得されるレイヤソースはありません。
* （ol5 API）
*/
center: fromLonLat([-122.416667, 37.783333]),
/** center [View(opt_options)]
* The initial center for the view. The coordinate system
* for the center is specified with the projection option.
* Layer sources will not be fetched if this is not set,
* but the center can be set later with #setCenter.
* view（ビュー）の初期 center（中心）値。 center の座標系
* は、projection（投影法）オプションで指定されます。これが
* 設定されなければレイヤソースは取得されませんが、center
* は #setCenter で後で設定できます。
* （ol5 API）
*/
zoom: 12
/** zoom [View(opt_options)]
* Only used if resolution is not defined. Zoom level used
* to calculate the initial resolution for the view. The
* initial resolution is determined using the
* #constrainResolution method.
* resolution（解像度）が定義されていない場合のみ使用されま
* す。view の初期 resolution（解像度）を計算するために使用
* される zoom（ズーム）レベル。初期 resolution は、
* #constrainResolution メソッドを使用して決定されます。
* （ol5 API）
*/
})
});
user@deb9-vmw:~/new-project$ vim index.html
npm start を実行します。<!doctype html> <html> <head> <meta charset="utf-8"> <title>Stamen Tiles</title>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
</head> <body> <div id="map"></div> <script src="./index.js"></script> <body> </html>
user@deb9-vmw:~/new-project$ npm start
Webブラウザのアドレス欄に
http://localhost:1234
と入力して Enter キーを押します。
0 件のコメント:
コメントを投稿