leafletを鍛える。その5
概要
leafletを鍛えてみた。
pixiを、使ってみた。
写真
サンプルコード
var map = L.map('map').setView([37.9, 140.1], 12);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var loader = new PIXI.loaders.Loader();
loader.add('marker', 'http://jsrun.it/assets/I/S/D/k/ISDkX.png');
loader.load(function(loader, resources) {
var markerTexture = resources.marker.texture;
var markerLatLng = [37.9, 140.1];
var marker = new PIXI.Sprite(markerTexture);
marker.anchor.set(0.5, 1);
var pixiContainer = new PIXI.Container();
pixiContainer.addChild(marker);
var firstDraw = true;
var prevZoom;
var pixiOverlay = L.pixiOverlay(function(utils) {
var zoom = utils.getMap().getZoom();
var container = utils.getContainer();
var renderer = utils.getRenderer();
var project = utils.latLngToLayerPoint;
var scale = utils.getScale();
if (firstDraw)
{
var markerCoords = project(markerLatLng);
marker.x = markerCoords.x;
marker.y = markerCoords.y;
}
if (firstDraw || prevZoom !== zoom)
{
marker.scale.set(1 / scale);
}
firstDraw = false;
prevZoom = zoom;
renderer.render(container);
}, pixiContainer);
pixiOverlay.addTo(map);
});
成果物
var map = L.map('map').setView([37.9, 140.1], 12);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var loader = new PIXI.loaders.Loader();
loader.add('marker', 'http://jsrun.it/assets/I/S/D/k/ISDkX.png');
loader.load(function(loader, resources) {
var markerTexture = resources.marker.texture;
var markerLatLng = [37.9, 140.1];
var marker = new PIXI.Sprite(markerTexture);
marker.anchor.set(0.5, 1);
var pixiContainer = new PIXI.Container();
pixiContainer.addChild(marker);
var firstDraw = true;
var prevZoom;
var pixiOverlay = L.pixiOverlay(function(utils) {
var zoom = utils.getMap().getZoom();
var container = utils.getContainer();
var renderer = utils.getRenderer();
var project = utils.latLngToLayerPoint;
var scale = utils.getScale();
if (firstDraw)
{
var markerCoords = project(markerLatLng);
marker.x = markerCoords.x;
marker.y = markerCoords.y;
}
if (firstDraw || prevZoom !== zoom)
{
marker.scale.set(1 / scale);
}
firstDraw = false;
prevZoom = zoom;
renderer.render(container);
}, pixiContainer);
pixiOverlay.addTo(map);
});
以上。
Author And Source
この問題について(leafletを鍛える。その5), 我々は、より多くの情報をここで見つけました https://qiita.com/ohisama@github/items/081268503f42b492c90f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .