【问题标题】:Drawing rectangle on leaflet by giving coordinate通过给出坐标在传单上绘制矩形
【发布时间】:2015-08-09 19:06:48
【问题描述】:

我知道通过给出坐标在传单上绘制矩形的语法。 这是示例代码,我可以通过给出坐标在传单上绘制矩形。

var map = L.map('map').setView([53.902257, 27.561640], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

var bounds = [[53.912257, 27.581640], [53.902257, 27.561640]];
var rect = L.rectangle(bounds, {color: 'blue', weight: 1}).on('click', function (e) {
    // There event is event object
    // there e.type === 'click'
    // there e.lanlng === L.LatLng on map
    // there e.target.getLatLngs() - your rectangle coordinates
    // but e.target !== rect
    console.info(e);
}).addTo(map);

我的坐标看起来像LatLng(-37.77353, 175.26882),LatLng(-37.77285, 175.26882),LatLng(-37.77285, 175.27097),LatLng(-37.77353, 175.27097)

但是如果有人在边界变量中看到上述坐标存储,那么指定了两组纬度,但我的是 4 组。

告诉我如何推动这种 latlang LatLng(-37.77353, 175.26882),LatLng(-37.77285, 175.26882),LatLng(-37.77285, 175.27097),LatLng(-37.77353, 175.27097) 在我的地图上画圈?

问题已经结束,因为我怀疑在地图上用大坐标绘制矩形,我尝试并获得了成功。这里附上小代码。

$(document).ready(function(){
    $('#btn1').click(function(){
        alert("Drawing rectabgle!");

//var bounds = [[53.912257, 27.581640], [53.902257, 27.561640]];
var bounds = [[-37.77367, 175.27043], [-37.77261, 175.27043],[-37.77261,175.27313],[-37.77367,175.27313]];        
var rect = L.rectangle(bounds, {color: 'blue', weight: 1}).on('click', function (e) {
    // There event is event object
    // there e.type === 'click'
    // there e.lanlng === L.LatLng on map
    // there e.target.getLatLngs() - your rectangle coordinates
    // but e.target !== rect
    console.info(e);
}).addTo(map);

    });
}); 

http://jsfiddle.net/tridip/yyetbb1j/1/

【问题讨论】:

  • 如何将 4 个坐标用于一个圆?在 Leaflet 中绘制圆时,您指定中心 latLng 和圆半径。
  • 我喜欢用4坐标画矩形而不是圆形。
  • 好的......在你的问题中它说“......在我的地图上画圈?”传单示例的链接是什么?
  • 查看此代码如何在地图上绘制矩形 var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]]; L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map); 但是当我尝试在用户端在地图上绘制矩形时捕获边界时,我得到了这个边界 LatLng(-37.77353, 175.26882),LatLng(-37.77285, 175.26882),LatLng(-37.77285, 175.27097),LatLng(-37.77353, 175.27097) 我的问题是如何添加大边界画矩形?

标签: leaflet


【解决方案1】:

尝试绘制一个“多边形”。见Leaflet API

【讨论】:

  • 查看此代码如何在地图上绘制矩形var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]]; L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map); ,但是当我尝试在用户端在地图上绘制矩形时捕获边界时,我得到了这个边界LatLng(-37.77353, 175.26882),LatLng(-37.77285, 175.26882),LatLng(-37.77285, 175.27097),LatLng(-37.77353, 175.27097) 我的问题是如何添加大边界画矩形?
  • 检查这个 jsfiddle jsfiddle.net/tridip/yyetbb1j 绘制矩形,看看你会得到什么坐标。假设如果我存储那个大坐标,那么以后如何通过该坐标绘制矩形?请帮忙。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-11-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-12-21
  • 2013-07-04
相关资源
最近更新 更多