Preact JS 中的传单用法

Question

如何将leaflet Map嵌入到Preact组件中。我正在使用 webpack 创建一个地图小部件。在下面，我向您展示了我实现的代码。

import registerCustomElement from 'preact-custom-element';
import { h , Component } from 'preact';
import {map as createMap, tileLayer} from '../../node_modules/leaflet/dist/leaflet-src.esm.js';

class mapView extends Component {

    componentDidMount() {
        let map2 = L.map('mapid').setView([51.505, -0.09], 13);
        map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}));
        const mapEl = this.shadowRoot.querySelector('#mapid');
        let map = createMap(mapEl).setView([51.505, -0.09], 13);
    }

    render (){
        return (
            <div>
                <div id="mapid" style="height: 100%"></div>
            </div>
        )
    }
  }
  
registerCustomElement(mapView, "map-view");

我们可以在 Preact 中使用 React Leaflet 吗？可以使用吗？或者是否有任何库或包可以在 Preact 中创建地图？

Answer 1

这很简单。我发现了一个与 .

有关的 Stack Overflow 问题

我的答案与此类似，但需要做一些更改，因为我正在创建一个网络组件（小部件）。

import registerCustomElement from 'preact-custom-element';
import { Component } from 'preact';
import {map as createMap, tileLayer , icon, marker} from '../../node_modules/leaflet/dist/leaflet-src.esm.js';
import markerIcon from '../../node_modules/leaflet/dist/images/marker-icon.png';
import '../../node_modules/leaflet/dist/leaflet.css';
import "../Assets/CSS/file.css";
import 'bootstrap/dist/css/bootstrap.css';
 
class mapView extends Component {

    componentDidMount()  {

         var locations = [
             ["LOCATION_1", 11.8166, 122.0942],
             ["LOCATION_2", 11.9804, 121.9189],
             ["LOCATION_3", 10.7202, 122.5621],
             ["LOCATION_4", 11.3889, 122.6277],
             ["LOCATION_5", 10.5929, 122.6325]
           ];

        map = createMap('mapid').setView([51.505, -0.09], 13);

        let urlll = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?';
        map.addLayer(tileLayer(
            urlll, 
            {attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            tileSize: 512,
            zoomOffset: -1,
        })
        );

        let marketIcon = icon({
            iconUrl: markerIcon,
            iconRetinaUrl: markerIcon,
            iconAnchor: [5, 25],
            popupAnchor: [10, -44],
            iconSize: [25, 35],
        });

         for (var i = 0; i < locations.length; i++) {
             marker([locations[i][1], locations[i][2]], {
                 icon: marketIcon,
                 draggable: true,    
             }).addTo(map);
         }
    }

    render (){
        return (
            <div>
                <div id="mapid"></div>
            </div>
        )
    }
}
  
registerCustomElement(mapView, "map-view");

您需要使用文件加载器更新您的webpack.config。 https://v4.webpack.js.org/loaders/file-loader/

这是我的脚本文件代码

<script defer="" src="http://HOST_URL/MapCom.js" type="text/javascript"></script>
<map-view name="map"></map-view>

Preact JS 中的传单用法

leaflet usage in Preact JS

javascript

leaflet

preact