Leaflet.PixiOverlay 2many-markers

18836 단어 leafletLeaflet.PixiOverlayWebGL
그 1: Leaflet.PixiOverlay 1 마커 표시 - Qiita
그 2: Leaflet.PixiOverlay 2many-markers - Qiita

소개



Leaflet과 WebGL 라이브러리인 Pixi.js의 다리를 만드는 Leaflet.PixiOverlay를 사용하여 many-markers를 시도합니다.

Leaflet.PixiOverlay


확대하면 이런 많은 마커였습니다.


many-markers



Github에있는 many-markers.html을 시도해보십시오.

관련 JS 설치


  • bezier-easing
    many-markers를 움직이려면 bezier-easing이 필요한 것 같습니다. gre/bezier-easing

    • 다음 명령으로 설치합니다.> npm i bezier-easing --save
  • MarkerContainer.js
    Github 리포지토리의 docs/js/MarkerContainer.js도 필요하므로 프로젝트에 복사하고 배치합니다.

    • index.html



    index.html을 다음 내용으로 만들었습니다.

    index.html
    <html>
<head>
    <title>Leaflet</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css" />
</head>
<body style="height: 100%; margin: 0; overflow: hidden;">
    <div id="map" style="height: 100%; width: 100%;"></div>
</body>

<script src="./node_modules/leaflet/dist/leaflet.js"></script>
<script src="./node_modules/pixi.js/dist/pixi.min.js"></script>
<script src="./node_modules/leaflet-pixi-overlay/L.PixiOverlay.min.js"></script>
<script src="./node_modules/bezier-easing/dist/bezier-easing.min.js"></script>
<script src="./js/MarkerContainer.js"></script>

<script src="./js/many-markers.js"></script>
<script src="./js/index.js"></script>

</html>

    JS 부분


    function manyMarker() {
    var map = L.map('map').setView([48.838565, 2.449264526367], 13);
    L.tileLayer('//stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
        subdomains: 'abcd',
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
        minZoom: 4,
        maxZoom: 18
    }).addTo(map);

    //マーカー最大個数
    var markersLength = 1000000;


    function getRandom(min, max) {
        return min + Math.random() * (max - min);
    }

    //Draw a marker
    var loader = new PIXI.loaders.Loader();
    loader.add('marker', '../img/marker-icon.png'); //リソースにmarkerという名で'img/marker-icon.png'を登録
    loader.load(function (loader, resources) {  //リソース(marker)をロードする
        var texture = resources.marker.texture;

        var pixiContainer = new PIXI.Container();
        var innerContainer = new PIXI.particles.ParticleContainer(markersLength, { vertices: true });
        innerContainer.texture = texture;
        innerContainer.baseTexture = texture.baseTexture;
        innerContainer.anchor = { x: 0.5, y: 1 };
        pixiContainer.addChild(innerContainer);

        var firstDraw = true;
        var prevZoom;
        var initialScale;

        var pixiOverlay = L.pixiOverlay(function (utils) { //Leafletでズームやパンを行う度にコールされます。ドラッグ中はコールされない
            var zoom = utils.getMap().getZoom(); //Leafletのズーム率  ex. 0～18
            var container = utils.getContainer();
            var renderer = utils.getRenderer();
            var project = utils.latLngToLayerPoint; //Leaflet座標系LatLngからオーバーレイの座標系に投影されたL.Pointを返す。
            var scale = utils.getScale();
            var invScale = 1 / scale;

            if (firstDraw) {
                var origin = project([(48.7 + 49) / 2, (2.2 + 2.8) / 2]);
                innerContainer.x = origin.x;
                innerContainer.y = origin.y;
                initialScale = invScale / 8;
                innerContainer.localScale = initialScale;
                for (var i = 0; i < markersLength; i++) {
                    var coords = project([getRandom(48.7, 49), getRandom(2.2, 2.8)]);
                    // our patched particleContainer accepts simple {x: ..., y: ...} objects as children:
                    innerContainer.addChild({
                        x: coords.x - origin.x,
                        y: coords.y - origin.y
                    });
                }
            }

            if (firstDraw || prevZoom !== zoom) {
                innerContainer.localScale = zoom < 8 ? 0.1 : initialScale;// 1 / scale;
            }

            firstDraw = false;
            prevZoom = zoom;
            renderer.render(container); //オーバーレイ上にあるオブジェクトの再描画する。
        }, pixiContainer);

        pixiOverlay.addTo(map);
    });
}

    코드 해설



    로더



    Loader 부분은 그 1과 그다지 바뀌지 않습니다.
    유일하게, document DOMContentLoaded 이벤트 발화 후 loader.load가 실행됩니다. (이 의도는 지금 모르겠다)
           map.attributionControl.setPosition('bottomleft');
       map.zoomControl.setPosition('bottomright');

    zoomControl과 Leaflet 표기의 위치가 변경되었습니다.

    ParticleContainer



    많은 마커를 다루기 위해 ParticleContainer를 사용하고 있습니다.

    공식 도움말 #ParticleContainer에는 다음 설명이 있습니다.

    The ParticleContainer class is a really fast version of the Container built solely for speed, so use when you need a lot of sprites or particles. The tradeoff of the ParticleContainer is that most advanced functionality will not work. ParticleContainer implements the basic , scale, rotation) and some advanced functionality like tint (as of v4.5.6). Other more advanced functionality like masking, children, filters, etc will not work on sprites in this batch.
    ParticleContainer 클래스는, 스피드 전용으로 작성된 컨테이너의 고속 버젼입니다. 스프라이트나 파티클이 많이 필요한 경우에 사용합니다. ParticleContainer의 절충점은 가장 고급 기능이 작동하지 않는다는 것입니다. ParticleContainer는 기본 객체의 변환(위치, 스케일, 회전)과 색조와 같은 고급 기능을 구현합니다(v4.5.6 이상). 마스킹, 어린이, 필터와 같은 기타 고급 기능은 이 배치의 스프라이트에서 작동하지 않습니다.

    L.pixiOverlay



    var pixiLayer = (function() {
    중략
    return L.pixiOverlay(function (utils, event) {
    }) ();

    그 1로 pixiOverlay로 작성한 레이어를 pixiOverlay에 격납하고 있었습니다만,
    이것과 쓰는 방법이 다릅니다만, 이것과 같은 일을 하고 있습니다. pixiOverlay를 pixiLayer에 할당.

    var pixiOverlay = L.pixiOverlay(function (utils) {
    중략
    }, pixiContainer);

    차이는 줌시의 미묘한 거동을 붙이고 있는 곳입니다.

    PIXI.ticker.Ticker

    Leaflet Polyline.SnakeAnim
    Leaflet 플러그인 > L.PixiOverlay를 TypeScript 환경에서 사용

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage