Проблемы с наложением листов карт друг на друга с помощью React, D3v5, openstreetmaps? - PullRequest
1 голос
/ 23 марта 2019

Я пытаюсь создать несколько слоев карт друг над другом, используя response, d3 и openstreetmaps.Изначально я начал работать с React и библиотекой реагировать на простые карты несколько месяцев назад, и до сих пор мне удавалось воспроизвести эту настройку получения файла топойсона в d3 для генерации карты, которая гораздо более настраиваема.,Шейп-файлы, которые вы можете скачать, дают вам линии вокруг стран, штатов или округов, или даже почтовые индексы США ... довольно круто!

Открытый способ (подсказка: бесплатно!) Способ получить более детальный,просмотр на уровне улицы, наряду с другими функциями, такими как реки, озера и т. д., был бы хорошим дополнением к картам, которые я строю для своих визуализаций данных.До сих пор у меня есть карта d3, но она действительно запутана в openstreetmap, которая по какой-то причине настаивает на том, чтобы ее размещали в правом нижнем углу страницы, а не наложении директивы на d3?Я знаю, что есть много других библиотек, в том числе не столь бесплатные ресурсы, предлагаемые google, mapbox и другими крупными игроками в карточной игре, но я близок к тому, чтобы это заработало ... любые идеи, где япошло не так?Я думаю, что это как-то связано с правильной группировкой карт SVG, но я не уверен?Вот код ... любые идеи приветствуются!Заметим, что эти файлы topojson имеют большой размер и их загрузка может быть медленной, поэтому я использую axios, чтобы извлечь их из компонента контейнера выше в дереве, чтобы передать их в качестве реквизита.Вот пример того, где у вас есть хорошо расположенная карта и упрямая openstreetmap, которая живет под ней.Некоторые из них удалены для краткости, мои извинения, если он не запускается?

РЕДАКТИРОВАТЬ: извините за мой WALL кода, после двух недель отсутствия ответов, вот кодекс, который показывает только openstreetmap как его собственныйкомпонент: https://stackblitz.com/edit/react-ktjlxk?embed=1&file=index.js

import React, { Component } from "react";
import "./worldMapOSM.css";
import * as d3 from "d3";
import * as d3Tile from "d3-tile";
import { geoMercator, geoPath } from "d3-geo";

//styles for map projection
const width = 960;
const height = 500;

class WorldMapOSM extends Component {

    projection() {
        return geoMercator() //geoConicConformal
            .scale(120)
            .center([6.8682168, 52.3401469])
            .translate([width / 2, height / 2])
            .clipExtent([[0, 0], [width, height]]) //????
            .precision(0.5);
    }
    componentDidMount() {
            const width = Math.max(960, window.innerWidth),
            height = Math.max(500, window.innerHeight),
            prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);
        const svg = d3.select(this.refs.anchor);
        const map = d3
            .select("body")
            .append("div")
            .attr("class", "map")
            .style("width", width + "px")
            .style("height", height + "px")
    const layer = map.append("div").attr("class", "layer");


        const tile = d3Tile
            .tile()
            .size([width, height])
            .scale(this.projection().scale() * 2 * Math.PI)
            .translate(this.projection([0, 0]))
            .zoomDelta((window.devicePixelRatio || 1) - 0.5);
        const tiles = d3Tile.tile();

        const image = layer
            .style(prefix + "transform", matrix3d(tiles.scale, tiles.translate))
            .selectAll(".tile")
            .data(tiles, function(d) {
                return d;
            })


        image.exit().remove();

        image
            .enter()
            .append("img")
            .attr("class", "tile")
            .attr("src", function(d) {
                return (
                    "http://" +
                    "abc"[d.y % 3] +
                    ".tile.openstreetmap.org/" +
                    d.z +
                    "/" +
                    d.x +
                    "/" +
                    d.y +
                    ".png"
                );
            })
            .style("left", function(d) {
                return (d[0] << 8) + "px";
            })
            .style("top", function(d) {
                return (d[1] << 8) + "px";
            });

        svg
            .append("use")
            .attr("xlink:href", "#land")
            .attr("class", "stroke");

                formatLocation(this.projection.invert(d3.mouse(this)), zoom.scale())

        function matrix3d(scale, translate) {
            var k = scale / 256,
                r = scale % 1 ? Number : Math.round;
            return (
                "matrix3d(" +
                [
                    k,0,0,0,0,k,0,0,0,0,k,0,
                    r(translate[0] * scale),
                    r(translate[1] * scale),
                    0,
                    1
                ] +
                ")"
            );
        }

        function prefixMatch(p) {
            var i = -1,
                n = p.length,
                s = document.body.style;
            while (++i < n)
                if (p[i] + "Transform" in s) return "-" + p[i].toLowerCase() + "-";
            return "";
        }

        function formatLocation(p, k) {
            var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
            return (
                (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") +
                " " +
                (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E")
            );
        }
    }

    }
    render() {

        return (
            <div className="worldMap dropShadow">
                <svg width={960} height={600} viewBox="0 0 960 600">
                    <g id="map">
                        {/* D3 map */}
                        <g className="eurCountries">
                            {this.props.Countries.map((d, i) => (
                                <path
                                    key={`path-${i}`}
                                    d={geoPath().projection(this.projection())(d)}
                                    className="state"
                                    fill={`rgba(187,218,247,${(1 / 1000) * i})`}
                                    stroke="#afafaf"
                                    strokeWidth={0.5}
                                />
                            ))}
                        </g>
                        <g ref="anchor" />{/* openstreetmap */}
                    </g>
                </svg>
            </div>
        );
    }
}
export default WorldMapOSM;
...