标签: leaflet

我正在 Angular 6 项目中使用 ngx-leaflet，我在我的地图中绘制了多个标记，我想在多个标记上居中和缩放传单地图

在官方文档中，您可以使用 [L.latlngBounds] 来完成，并使用其他解决方案 L.featureGroup

由于我使用的是 ngx-leaflet，我没有L变量，所以我找不到latlngBounds和featureGroup

这是我的组件：

import {latLng, tileLayer, polygon, marker, Icon, LatLngBounds} from 'leaflet';

export class CustomComponent implements OnInit {

  options = {
    layers: [
      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18})
    ],
    zoom: 5,
    center: latLng(46.879966, -121.726909)
  };

  layers = [];
  fitBounds: LatLngBounds;
}

ngOnInit() {
    for (let i = 0; i < this.locations.length; i++) {
        this.layers.push(this.locations[i].y, this.locations[i].x].setIcon(
            new Icon({
                iconSize: [25, 41],
                iconAnchor: [13, 41],
                iconUrl: 'assets/icons/marker-icon.png',
                shadowUrl: 'assets/icons/marker-shadow.png'
        }))); …

我想使用一个名为 Leaflet-geotiff ( https://github.com/stuartmatthews/leaflet-geotiff )的传单插件，但我使用的是传单反应。我可以将此插件转换为传单反应版本吗？谢谢你们。

我正在使用传单渲染 GEOJSON，包括各种线串。无论出于何种原因，我很少能让触摸事件起作用。就像，很难让手指真正瞄准屏幕上的正确位置。

这是我的地图：

return (
        <Map
            style={{
                height: '100%',
                width: '100%',
                margin: '0 auto'
            }}
            onClick={this.closeAllMapPopups}
            ref={(el) => {
                this.leafletMap = el;
            }}
            center={position}
            zoom={9}>
            <TileLayer url='https://api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiYawefawelbnMyNCIsImawefbDRtMzcwMDNmMzJydHdvcjF6ODA5In0.xdZi4pmkhj1zb9Krr64CXw' attribution='&copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a>' />
            <GeoJSON data={locations} ref="geojson" style={this.getStyle} onEachFeature={this.onEachFeature} 

            />{' '}
        </Map>

这是我的 onEachFeature：

onEachFeature = (feature, layer) => {
        //console.log(layer);

        layer.on({
            mouseover: (e) => this.MouseOverFeature(e, feature),
            click: (e) => this.clickFeature(e, feature),
            mouseout: (e) => this.resetHighlight(e, feature),


        });
    };

触摸事件（点击 = 点击）似乎只有在我幸运的时候才起作用。如何使传单折线更易于点击？

探索了插件选项，但大多数已经过时：https : //github.com/geoloep/Leaflet.ClickTolerance https://github.com/perliedman/leaflet-touch-helper/

我使用某个具有自己主题的 JS 框架。不知道这是否影响 LeafletJS。

我该如何解决？我想要一个正常工作的 LeafletJS 地图。

临时解决方案：

我注意到当你最小化浏览器然后再次最大化它时，这个 LeafletJS Maps 显示正确。

什么可能导致这种情况？

我想在 ngx-leaflet 地图上放置一个热图（使用 angular），如下图所示。

我怎样才能做到这一点？

这是示例的演示。

现在我正在 Ionic v4 中开发基于位置的应用程序。现在我希望能够将地图视图重置回我的位置。我想我需要setView再次使用来实现这一点，但我不知道这样做的语法。

这是我到目前为止所有的相关代码：

主页.html

<ion-content>
  <div class="home-button" (click)="centerMap()">
    <ion-icon name="navigate"></ion-icon>
  </div>
  <div id="map"></div>
</ion-content>

主页.ts

centerMap() {
    this.mapService.backToCenter();
}

地图服务.ts

loadmap(map) {
    this.map = map;
    this.map.locate({
        setView: true,
        maxZoom: 22,
        minZoom: 12
    })
    .on('locationfound', e => {
        const markerGroup = leaflet.featureGroup();
        const marker: any = leaflet
            .marker([e.latitude, e.longitude], {
                icon: positionIcon,
                zIndexOffset: -1000
            })
            .on('click', () => {
                console.log('Position marker clicked');
            });
        markerGroup.addLayer(marker);
        this.map.addLayer(markerGroup);
        this.loadMarkers(this.dropService.getDrops());
    });
    return this.map;
}
backToCenter() {
    console.log('Center Map');
}

有没有办法setView …

在寻找在Leaflet.js 中旋转标记的方法时，我找到了模块Leaflet-rotatedmarker。我是通过 npm 安装的，但现在我不知道如何实际使用它。

根据自述文件，它只扩展了现有的Marker类。据我了解，我现在应该可以调用Marker.setRotationAngle()，但该函数不存在。Marker从导入leaflet-rotatedmarker也不起作用。

如何正确导入扩展类或如何使用模块中的功能/属性扩展现有的传单类？谢谢。

我说的是import { XYZ } from 'leaflet-rotatedmarker'声明。

编辑：

如果我尝试rotationAngle在构造函数中设置它，它也不起作用：

const marker = L.marker([tmpAgv.Pos.X, tmpAgv.Pos.Y], { alt: tmpAgv.Id }, {rotationAngle: 180}).addTo(this.mapObject);

标记仍未旋转。

我在我的反应代码中使用了传单，我没有使用反应传单。我想将反应组件或 jsx 代码传递给 binbPopup 函数到每个工具提示。

let marker = new L.marker(...).bindPopup(<div>Hi</div>)

bindPopup 获取字符串作为输入，所以我不能使用 jsx。我也尝试使用反应门户，但仍然无法正常工作。这个问题的解决方案是什么？

我已经制作了一个非常简单的 React / Leaflet 演示，但是标记图标根本没有显示。完整的运行代码在这里。

这是我的componentDidMount方法中的内容：

componentDidMount() {
this.map = L.map("map-id", {
  center: [37.98, 23.72],
  zoom: 12,
  zoomControl: true
});

const mapboxAccessToken =
  "pk.eyJ1IjoibXBlcmRpa2VhcyIsImEiOiJjazZpMjZjMW4wOXJzM2ttc2hrcTJrNG9nIn0.naHhlYnc4czWUjX0-icY7Q";
L.tileLayer(
  "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
  {
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 25,
    id: "mapbox/streets-v11",
    accessToken: mapboxAccessToken
  }
).addTo(this.map);

L.marker([37.98, 23.72])
  .addTo(this.map)
  .bindPopup("a marker")
  .openPopup();
}

基本上，弹出窗口是可见的，但不是标记图标本身。即，这是我所看到的：

我有一个非常简单的用例：我想在更改传单地图视口时通过抓取来测试数据获取。但是，我无法弄清楚如何编写测试。这是代码：

      cy.visit("/map");
      // wait for data
      cy.get(".leaflet-interactive.multilinestring");
      // simulate map moving
      cy.get(".leaflet-container")
        .trigger("mousedown", "center")
        .trigger("mousemove", 30, 30);
        .trigger("mouseup");
      // map should be loading
      cy.get(".leaflet-container.leaflet-loading");

它似乎没有移动地图。

我试图在触发器调用之间添加等待，因为我认为可能会有关于事件触发速度的警卫，但没有运气。

知道我如何测试这个。