Как правильно работать с библиотекой реагировать-листовки в приложении-реактиве, созданном с помощью приложения-создания-реагирования? - PullRequest
Новая
       24

Как правильно работать с библиотекой реагировать-листовки в приложении-реактиве, созданном с помощью приложения-создания-реагирования?

0 голосов
/ 05 июля 2018

У меня возникают проблемы с библиотекой response-leaflet , когда я пытаюсь создать простой компонент карты внутри приложения реагирования, созданного с помощью библиотеки 'create-Reaction-app' , без машинописи и потока.

следующий код - это простой компонент карты, использующий 'response-leaflet' с обычными html и node_modules, я не могу скопировать его внутри 'create-реагировать-приложение' проект. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React-Leaflet UMD example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
    <script src="/node_modules/react-leaflet/dist/react-leaflet.min.js"></script>
    <style>
      body {
        padding: 20px;
      }
      .leaflet-container {
        height: 400px;
        width: 80%;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/babel" data-presets="es2015,react">
    const React = window.React
const { Map: LeafletMap, TileLayer, Marker, Popup } = window.ReactLeaflet
const position = [51.505, -0.09]
const Example = () => (
  <LeafletMap center={position} zoom={13}>
    <TileLayer
      attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={position}>
      <Popup>
        <span>
          A pretty CSS3 popup. <br /> Easily customizable.
        </span>
      </Popup>
    </Marker>
  </LeafletMap>
)
window.ReactDOM.render(<Example />, document.getElementById('container'))
</script>
  </body>
</html>

Заранее спасибо.

1 Ответ

0 голосов
/ 05 июля 2018

Это (возможно) должно быть правильным способом показать компонент карты реактивных листовок в модульном и структурированном проекте, подобном этому. 

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';

class App extends Component {

  render() {

    return (

      <div className="map">
        <Map center={[51.505, -0.09]} zoom={13} className="map__reactleaflet">
          <TileLayer
            url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
            attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
          />
        </Map>
      </div>

    )

  }

}

export default App;

'TileLayer' абсолютно необязателен, вам не нужен этот компонент для рендеринг карты, но необходимо показать плитки на ней, это означает, что вы можете визуализируйте холст с помощью шнуров по вашему желанию, с маркерами, линиями, многоугольниками или даже чем-нибудь, вам просто нужно импортировать этот компонент из 'Reaction-leaflet' library

Если вы найдете другое или лучшее решение, поделитесь им, спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...