leafletを鍛える。その５

概要

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: '&copy; ' + 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);
});

成果物

以上。