реагировать - js и CRS. Простой только серый - PullRequest
Новая
       28

реагировать - js и CRS. Простой только серый

0 голосов
/ 04 марта 2020

Мне трудно создать карту-листовки с провайдером нестандартных карт

Карта-div показана, но она пустая (серая). При увеличении масштаба я вижу, что значки масштабирования меняются, и запрос новых плиток карты отправляется на сервер

При использовании плиток из openstreetmap и системы "crs" по умолчанию карта

У кого-нибудь есть идеи для меня? ;)

С уважением 

import React, {Component, Fragment} from "react";
import {Link} from "react-router-dom";
import axios from "axios";

import { MAPSHOW_URL} from "../../../crud/map.crud";

import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

const MyPopupMarker = ({ content, position }) => (
    <Marker position={position} >
        <Popup>{content}</Popup>
    </Marker>
)

const MyMarkersList = ({ markers }) => {
    const items = markers.map(({ key, ...props }) => (
        <MyPopupMarker key={key} {...props} />
    ))
    return <Fragment>{items}</Fragment>
}

const markers = [
]

export default class ShowMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Map: undefined
        }
    }
    loadMap() {
        axios.get(MAPSHOW_URL, { params: { mapId: this.props.match.params.mapId }})
            .then(res => {
                console.log("res", res.data);
                const m = res.data;
                const map = (
                    <>
                        <div>
                            <h1>{m.mapName}</h1>
                                <Map
                                    center={[128, 128]}
                                    zoom={0}
                                    maxZoom={19}
                                    minZoom={10}
                                    crs={L.CRS.Simple}
                                    maxBounds={[[0,0],[-256,256]]}
                                    fadeAnimation={false}
                                    style={{width: '100%', height: '500px'}}
                                >
                                    <TileLayer url={"http://10.100.100.65:5001/map_data/{z}/{x}/{y}"} />
                                    <MyMarkersList markers={markers} />
                                </Map>
                            </div>
                        </div>
                    </>
                )
                this.setState({map})
            })
            .catch((error) => {
                console.log(error)
            })
    }
    componentDidMount() {
        this.loadMap()
    }
    render() {

        return (
            <>
                {this.state.map}
            </>
        )
    }
}
...