标签: leaflet

我在地图容器中有一个弹出窗口。弹出窗口的位置根据其所附加的标记的位置而变化。应用的CSS是：

#popup{
 opacity:1,
 bottom:100px,
 left:200px
}

这里，bottom 和 left 的值是通过 javascript 动态变化的，而且变化很快。当位置改变时弹窗直接跳转到该位置，不滑动。需要做什么才能让它滑动而不是直接跳到该位置。

我正在尝试在我的 Angular 7 项目中实现 Leaflet，我尝试用 google 搜索解决方案，但没有任何结果是针对 AngularJS 或 Vanilla JavaScript 的。

这是我的 ts 文件：

 ngAfterViewInit(): void {
    //Init map & add tile
    this.map = new Map('map').setView([25.1220946, 56.3342466], 13);
    tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(this.map);
    //onClick
    this.map.on("click", function(e){
    //Add marker
    this.myMarker = marker([e.latlng.lat, e.latlng.lng]).addTo(this.map);
    // console.log();
      console.log(`Your lat is : ${e.latlng.lat} and your lang :  ${e.latlng.lng}`);
    });
  }

仅供参考，这不是重复的，同样的问题已经有 5 年了，现在一切都不同了。

我必须在 Leaflet 应用程序上加载 KML 图层。经过一番浏览后，我发现一个名为 leaflet-kml 的库可以执行此操作。我可以通过两种方式加载 KML 图层：通过 KML 图层的 URI 或 KML 字符串。KML 存储在服务器中，我有后端代码可以检索 URI 和字符串表示形式。

这是使用 URI 的方法。

function LoadKML(containerName, name)
{
     let kmlURL = GetKmlURI(containerName, name);  
     let kmlLayer = new L.KML(kmlURL);
     map.addLayer(kmlLayer);
}

这是使用 kml 字符串的方法。

function LoadKML(containerName, name)
{
     let kmlString = GetKmlString(containerName, name);  
     let kmlLayer = new L.KML.parseKML(kmlString);
     map.addLayer(kmlLayer);
}

由于 CORS 限制，我无法使用第一种方法获取 URL。第二种方法返回一个字符串，但无法正确解析。

KML.js:77 Uncaught TypeError: this.parseStyles is not a function
    at new parseKML (KML.js:77)
    at LoadKML (Account:470)
    at Account:461

我应该如何调用leaflet-kml中的函数？有没有可以轻松将 KML 加载到传单中的库？

是否可以将 Leaflet 与 Angular/Universal 一起使用？如何避免在服务器内构建Leaflet？

npm run build:prod生成dist文件夹后。但是当我运行时node server.js出现以下错误：

var requestFn = window.requestAnimationFrame || getPrefixed('RequestAnimationFrame') || 超时延迟；窗口未定义。

我已经开始使用 Folium 在 GUI 中发布一些地图。用户可以输入开始和结束坐标，它们显示为Folium Markers。我知道 Folium 库只是 Leaflet 的包装器，那么我们可以使用父库来实现 Folium 中不存在的方法吗？

例如，我想使用Leaflet.LatLng.distanceTo已实现的余弦球面定律来计算起始坐标和结束坐标之间的距离。我如何在我的.py文件中使用它们？

我附加了这个示例代码来表示我陷入困境的地方：

       .
       ..
       ...
       self.map = QtWebEngineWidgets.QWebEngineView(self.centralwidget)
       ..
       ..
        self.m = folium.Map(
            location=[32.5236, 54], tiles="Stamen terrain", zoom_start=5, control_scale= True,
            box_zoom= True)

        # adds the markers
        self.marker1 =  folium.Marker((lat_1, lng_1)).add_to(self.m)
        self.marker2 =  folium.Marker((lat_2, lng_2)).add_to(self.m)

        #add above to the map
        self.data = io.BytesIO()
        self.m.save(self.data, close_file=False)
        self.map.setHtml(self.data.getvalue().decode())
        self.m.add_child(folium.LatLngPopup())

        """ 
        Enter the JavaScript Leaflet
        {
         Here I want "Leaflet.distanceTo((lat_1, lng_1), (lat_2, lng_2))" method
         }
        """ …

我想在视图中使用 python 从 PostGIS 数据库中提取多边形几何数据，并将其添加到模板中的传单地图中。最简单的方法似乎是提取数据并使用 Django 视图中的 postgis 函数 ST_AsGeoJSON 将其转换为 GeoJSON，然后将其作为 L.geoJSON(GEOJSON).addTo(map) 函数中的上下文渲染到模板。

这是行不通的。在请求地图页面时，地图现在是空白的，并且似乎无法识别 GeoJSON。我已经能够从视图传递硬编码的多边形并将其添加到地图中，但我的 postgis 数据库中的几何数据根本无效。

这是一个带有硬编码多边形的视图，已成功打印在地图上：

from django.shortcuts import render

def map_view(request, *args, **kwargs):
    geo_json={
        "type": "FeatureCollection",
          "features": [
            {
              "type": "Feature",
              "properties": {},
              "geometry": {
                "type": "Polygon",
                "coordinates": [
                  [
                    [
                      -0.10746002197265625,
                      51.505537109466715
                    ],
                    [
                      -0.11466979980468751,
                      51.498377681772325
                    ],
                    [
                      -0.0968170166015625,
                      51.493568479510415
                    ],
                    [
                      -0.09080886840820312,
                      51.502438390761164
                    ],
                    [
                      -0.10746002197265625,
                      51.505537109466715
                    ]
                  ]
                ]
              }
            }
          ]
        }

    return render(request ,'map.html', {'geo_json': geo_json})

地图模板如下所示：

<!DOCTYPE html>
<html>
<head> …

我想知道一些传单投影方法，例如 latLngToLayerPoint舍入像素坐标_setPos的方法Marker。

有什么理由吗？最好不要舍入，因为我们可以采取更好的定位和更平滑的标记动画。

我想改变 leafletjs 中地图的颜色，但我只是不知道它是哪个类。我发现

.leaflet-container {
    background-color:rgba(255,0,0,0.0);
}

然而它只会改变地图外的颜色（当地图完全缩小时你会看到它）但是哪些类负责国家颜色和水？

请参阅丝网印刷。

我在 Postgis 中运行了一个空间查询，以返回地图上的点所在的选区（区域）。该查询使用ST_within该点位于多边形内的函数。

正如您从打印中看到的，该点实际上并不在 York Outer 的多边形区域“内”，尽管从技术上讲您可能会说它在其中“内部”，或者至少 Postgis 是这么认为的。重点实际上在于约克中心。

我确信 Postgis 实际上会返回两者，但由于我只从游标中获取第一条记录，这就是我所看到的。

一个点一次只能位于一个选区，并且此查询返回了错误的选区，或者更确切地说，我向数据库提出了错误的问题。

我应该使用哪个函数来确保我始终返回正确的区域，该区域可能具有中空内部或形状奇怪？

谢谢

菲尔

当我在本地运行时，我的传单地图中的自定义图标工作得很好gatsby develop，但是当我尝试构建时，我收到与自定义标记图标相关的错误：

 WebpackError: TypeError: leaflet_src_layer_marker__WEBPACK_IMPORTED_MODULE_4__.Icon is not a constructor

相关进口：

import { Map, Marker, Popup, TileLayer, Tooltip, ZoomControl } from 'react-leaflet'
import { Icon } from 'leaflet/src/layer/marker' 

创建自定义图标：

// Init custom map icon
  const mapIcon = MapIcon();
  const markerIcon = new Icon({
    iconUrl: mapIcon,
    iconSize: [36, 36],
    iconAnchor: [18, 18],
    shadowSize: [36, 36],
    shadowUrl: 'https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png',
    shadowAnchor: [10, 18],
    popupAnchor: [0, -16],
    tooltipAnchor: [13, -4]
  });

JSX：

{ markerData.length > 0 ? markerData.map((node, index) => (
            <Marker position={[node.coords.lat, node.coords.lng]} …