Как нарисовать маркеры SVG на PixiOverlay? - PullRequest
Новая
       11

Как нарисовать маркеры SVG на PixiOverlay?

0 голосов
/ 08 апреля 2020

Я пытаюсь нарисовать маркеры svg на PixiOverlay. js (наложение при рисовании с использованием Pixi. js). Полностью новичок в Pixi, думаю, я собрал что-то, что д-р aws имеет форму ромба, см. Первый фрагмент кода (если он неправильный или нуждается в улучшении, дайте мне знать)

На странице pixiOverlay github есть хорошая демонстрация , которая отображает много полигонов на карте. Я сократил это демо до минимума (см. Второй фрагмент кода ниже). В этом коде есть функция drawPoly, которая, как следует из названия, dr aws полигонов.

Я хочу заменить это другой функцией, которая просто dr aws маркер svg в форме ромба в некоторая предопределенная точка (может быть, например, первая точка в координатах многоугольника или просто случайная)

Как мне это сделать, пожалуйста?

В реальной жизни у меня довольно много все эти маркеры имеют некоторую геометрию c в форме треугольников, звезд, квадратов, кругов и т. д. c, и всего их будет несколько тысяч (например, 100 КБ или даже больше, в зависимости от уровня масштабирования курса. При увеличении = 0 может быть близко к миллиону) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<script src='https://d157l7jdn8e5sf.cloudfront.net/dev/pixi.js'></script>
<!--<script src="https://cdn.rawgit.com/manubb/Leaflet.PixiOverlay/master/docs/js/example.min.js">--></script>

<script id="rendered-js">
    var renderer;
    renderer = PIXI.autoDetectRenderer();
    document.body.appendChild(renderer.view);

    var graphics = new PIXI.Graphics();
    graphics.lineStyle(5, 0x00FF00, 1);
    graphics.moveTo(0, 75);
    graphics.lineTo(50, 0);
    graphics.lineTo(100, 75);
    graphics.lineTo(50, 150);
    graphics.lineTo(0, 75);
    graphics.cacheAsBitmap = true;

    renderer.render(graphics);



</script>
</body>
</html>

<!DOCTYPE html>
<html style="height: 100%; margin: 0;">
<head>
    <title>Leaflet.PixiOverlay example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <!--jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

    <!--d3 -->
    <script src='https://d3js.org/d3.v4.min.js'></script>

    <!-- leaflet v 1.0.3 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>

    <!--  I think this Pixi.js and PixiOverlay.js in one file?? -->
    <script src="https://cdn.rawgit.com/manubb/Leaflet.PixiOverlay/master/docs/js/example.min.js"></script>


</head>
<body style="height: 100%; margin: 0; overflow: hidden;">
<div id="mymap" style="height: 100%; width: 100%;" >
</div>
<script>
    var countries =
        {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {"name": "UK"},
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [-4.965, 58.58], [-5.97, 57.58], [-6.459, 56.31], [-5.05, 54.72],[-3.47, 54.36], [-4.08, 53.27],[-5.22, 51.78],[-3.38, 51.37],[-5.58, 50.12], [1.31, 51.09],[0.61, 51.42], [1.66, 52.69],[0.04, 52.88], [0.39, 53.40],[-2.32, 55.97], [-1.80, 57.53],[-3.95, 57.58], [-3.03, 58.60], [-4.96, 58.58],
                            ]
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": {"name": "France"},
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [2.54, 51.09],[-4.65, 48.37],[-1.23, 46.01],[-1.49, 43.61],[3.03, 42.45],[3.64, 43.45],[7.69, 43.77], [5.97, 46.37],[8.04, 48.98],[2.54, 51.09],
                            ]
                        ]
                    }
                }
            ]
        };

    function drawPoly(color, alpha, project, container) {
        return function (poly) {
            var shape = new PIXI.Polygon(poly[0].map(function (point) {
                var proj = project([point[1], point[0]]);
                return new PIXI.Point(proj.x, proj.y);
            }));
            container.beginFill(color, alpha);
            container.drawShape(shape);
        };
    }

    function renderChart() {
        var map = L.map('mymap').setView(new L.LatLng(50, 1.0), 5);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            minZoom: 0,
            maxZoom: 9
        }).addTo(map);
        map.zoomControl.setPosition('bottomright');

        var firstDraw = true;
        var pixiContainer = new PIXI.Graphics();
        var doubleBuffering = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

        var pixiOverlay = L.pixiOverlay(function (utils) {
            var container = utils.getContainer();
            var renderer = utils.getRenderer();
            var project = utils.latLngToLayerPoint;
            var bounds;
            if (firstDraw) {
                countries.features.forEach(function (feature, index) {
                    var color = 0xFF0000,
                        alpha = 0.8;
                    if (feature.geometry === null) return;
                    if (feature.geometry.type === 'Polygon') {
                        bounds = L.bounds(feature.geometry.coordinates[0]);
                        drawPoly(color, alpha, project, container)(feature.geometry.coordinates);
                    }
                });
            }
            firstDraw = false;
            renderer.render(container);
        }, pixiContainer, {
            doubleBuffering: doubleBuffering,
            destroyInteractionManager: true
        });

        pixiOverlay.addTo(map);

    };

    renderChart()


</script>
</body>
</html>
...