标签: leaflet

在下图中，您可以看到从一个点（黑色圆圈）到其 3 个相关点 () 绘制了 3 条线。

图片

题

如何使用两点之间距离的百分比计算每条线上点之间的纬度和经度点？

例如，如果我想让位置能够沿着每条线绘制额外的圆圈，差异为 20%？

我现在有什么代码

var data = [
  { "coords" : [ 53.409045, -2.985406 ]},
  { "coords" : [ 53.408747, -2.982862 ]},
  { "coords" : [ 53.407630, -2.984136 ]},
  { "coords" : [ 53.407142, -2.986931 ]}
];


var pointA = new L.LatLng(53.409045, -2.985406);
var pointB; 

data.forEach(function(d) {
  pointB = new L.LatLng(d.coords[0], d.coords[1]);
  L.polyline([pointA, pointB]).addTo(map);
  L.circle([d.coords[0], d.coords[1]], 10).addTo(map);
});

上面的代码唯一要做的就是为每个点画一个圆，并从主圆（点A）到其他圆（点B）画一条线

我非常需要知道如何按距离百分比计算点 A 及其相关点之间的多个坐标。

我需要确保所有绿色圆圈与中心圆圈的距离相同

用于测试的 CODEP

代码笔链接

编辑 - 到目前为止我使用以下正确答案的图像

我正在使用leaflet api，用户可以在其中绘制形状以映射（图像）...

最初使用 imageoverlay 为底图添加图层控件（处理 1 个图层）......

我在页面上添加了一个 id 'newLyer' 的按钮，点击事件处理新图层的创建......即用户可以创建新图层并更新图层控件（现在正在处理 2 个图层）......

我使用了几种方法来创建图层并添加到控件但失败了....

将新图层添加到 layerGroup

var layerGroup = new L.LayerGroup(),
                    imageOverlayUrl = 'aa.jpg',
                    // New imageoverlay added to the layergroup
                    imageOverlay = new L.ImageOverlay(imageOverlayUrl, bounds).addTo(layerGroup),
                    // New featuregroup added to the layergroup
                    featureGroup = new L.FeatureGroup().addTo(layerGroup);

我需要添加控件的 LayerControl（如果我是正确的）

        var layerControl = new L.control.layers({
            'Main': layerGroup,
            //here i need to add new layer control
            }, null, { collapsed: false }).addTo(map);

到目前为止是静态代码的 OnClick 函数，这将在点击时执行

        $('#newLayer').click(function addNewLayer() {
            // Second layergroup not …

我有一个静态地图和标记（不能缩放和移动）。我需要每个标记检查地图结束的四个点。

任何的想法？

我想画一张地图，上面画了几条路线。

我想要一个数字为 1,..,n 的保管箱

选择Dropbox中的项目时，在地图上突出显示相应的路由。

我已经开始使用“传单”。

为什么我resetStyle()的线条没有恢复到原来的风格？

这是我的代码：

document.onload = loadMap();

function loadMap() {
  var map = L.map('map').setView([37.8, -96], 4);


  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZW==========yJ9.3HqHQ4BMRvSPaYe8ToA7YQ'
  }).addTo(map);


  var marker = L.marker([51.5, -0.09]).addTo(map);


  var myLines = [{
    "type": "LineString",
    "properties": {
      "id": "1"
    }
    "coordinates": [
      [-100, 40],
      [-105, 45],
      [-110, 55]
    ]
  }, {
    "type": "LineString",
    "properties": {
      "id": "2"
    }
    "coordinates": [
      [-105, …

在我的 Web 应用程序中，我使用的是传单，我想使用层切换将传单层更改为卫星视图和其他地图视图。我该如何执行此操作。请帮忙！

我正在尝试使用带有 SSL 的服务器运行 Leaflet.js，但在获取文件时出现类似于以下内容的错误：

GET https://tile.openstreetmap.org/12/1213/1481.png net::ERR_INSECURE_RESPONSE

Github 上有一个已关闭的问题，据说可以通过更改请求来解决

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

到

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'      
}).addTo(map);

但是，即使我尝试导航到链接https://tile.openstreetmap.org/12/1213/1481.png，我也会收到一条错误消息，指出“NET::ERR_CERT_COMMON_NAME_INVALID”。

有人找到了解决方案吗？

谢谢！

我有一张传单地图，其中显示了大量标记，以及有时会在地图上添加的简单按钮控件。当用户单击它时，我想将其从地图中删除。但是当我点击它时，easybutton.js 总是有一个错误：' TypeError: this._map is null '。这个错误冻结了我在 IE 上的页面...

这是我添加控件和事件 onclick 时的代码，我想删除它。

 backButton = L.easyButton('<span class="backButton">&larrhk;</span>', function (btn, map) {

                //evenement on click button


                map.removeControl(backButton);



            },
            { position: 'bottomright' });

            map.addControl(backButton);

我在 map.removeControl() 中用 "this" 和 "btn" 而不是 backButon 进行了测试，但同样的错误。我还测试了 backButton.removeFrom(map) ..

谢谢

我正在构建一个应用程序，用户可以在其中选择一个数据集，然后该数据集将显示在 Leaflet 地图中。为了区分标记，每个标记将被赋予一种颜色，基于一个变量。数据具有匹配的图例。

目前，我只使用一个小数据集进行测试和构建，但我希望我的应用程序也能够处理更大的数据集。

我用几个静态颜色设置了一个基本数组，这对于小数据集来说很好。但是，当我添加更大的数据集时，颜色当然会“耗尽”，如下所示。我增加了正确图例中的颜色数量，以显示我希望看到的情况。

我想要的是有效地“重复”arrayKleur如果arrayMetKetens大于颜色数组的方法。

arrayMetKetens 是一个动态数组，填充了唯一值并根据选择的数据集进行更改。

颜色数组：

arrayKleur = ["#b15928", "#6a3d9a", "#ff7f00", "#e31a1c", "#33a02c", "#1f78b4", "#a6cee3", "#b2df8a", "#fb9a99", "#fdbf6f"];

生成图例代码：

function legenda(){
    var HTMLlegenda = '<h4>Legenda</h4>';

    // if arrayMetKetens is empty => default legenda text 
    if (arrayMetKetens.length == 0 ){
        HTMLlegenda += '<p>Selecteer een tabel in de "Advanced selection" tab om de legenda weer te geven</p>'

        $("#tab1").html(HTMLlegenda);
    }
    // if arrayMetKetens is filled => generate legenda
    else{

        $("#tab1").html(arrayMetKetens);

        // stuk code om van bovenstaande …

我正在尝试构建自己的缩放按钮 react-leaflet

我有以下代码：

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Map, TileLayer } from 'react-leaflet';
import Control from 'react-leaflet-control';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ZoomIn from 'material-ui/svg-icons/action/zoom-in';
import ZoomOut from 'material-ui/svg-icons/action/zoom-out';


class LeafletMap extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            animate: true,
            center: [
                -34.989610443115,
                -71.232476234436
            ],
            zoom: 13,
            zoomControl: false
        };
    }

    render() {
        return (
            <div>
                <Map
                    animate={this.state.animate} 
                    center={this.state.center} 
                    zoom={this.state.zoom} 
                    zoomControl={this.state.zoomControl}
                    >
                    <TileLayer
                        url={'http://{s}.tile.osm.org/{z}/{x}/{y}.png'}
                        attribution={'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'}
                    />
                    <Control position="topleft">
                        <MuiThemeProvider>
                            <div>
                                <div>&nbsp;</div> …

我正在使用Leaflet.VectorGrid 插件在 Leaflet 1.0 中绘制通过 geojson-vt 切片的切片。

我想在绘图时为路径添加渐变。我在stackoverflow上找到了沿路径添加渐变的代码，但它需要一个画布。

我的问题是：如何获得对画布或其上下文 ( ctx)的引用以在其上绘制？

这是我添加 tileLayer 的代码：

var tileLayer = L.vectorGrid.slicer(data, {
        rendererFactory: L.canvas.tilee,
        vectorTileLayerStyles: {
            sliced: function(properties, zoom) {                    
                var endColor=70;       

                // var grad = ctx.createLinearGradient(begin[0], begin[1], end[0], end[1]);
                // grad.addColorStop(0, begin[2]);
                // grad.addColorStop(1, end[2]);
                // ctx.strokeStyle = grad;

                return {                        
                    stroke: true,
                    fill: true,
                    color: endColor < 20? 'red' :
                            endColor < 50? 'orange' :
                            endColor < 70? 'yellow' :
                            endColor < 100? 'green' : 'blue',/ …