如何在地图的查看区域中创建网格

How to create a Grid in the viewing area of a map

本文关键字：区域 创建 网格 地图      更新时间：2023-09-26

我需要在地图上放置一个网格，其中网格框是1/4分钟x 1/4分钟。它是一个梯形。我正在使用JavaScript的Delphi和TWebBrowser杠杆。

现在我正在响应点击事件来测试绘制单个gridBox，但我将不得不在Bounds changed事件上绘制并使用网格填充地图。

由于1/4分钟的网格是相当小的，它是不实际的有一个预先保存在KML或融合，所以我决定动态地绘制它，在视图中的地图。

我的网格框将始终落在qtrMinute边界上。我想确定的是如何创建这些框来填充地图。

我需要从左上角开始画，直到左下角，每当边界改变时重新画。

我会限制我的用户的缩放，这样就不会强加过多的绘图时间。

有谁能帮我用网格框填充屏幕的逻辑吗? 

<html> 
<head> 
   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=geometry&amp;sensor=false"></script>
   <title>Find your Qtr minute locator</title>
   </head>
    <body style="height:100%;margin:0"> 
         <!-- Declare the div, make it take up the full document body -->
        <div id="map-canvas" style="width: 100%; height: 95%;"></div> 
        <script type="text/javascript"> 
            var map; 
            var qtrArray = []; 
            var linesArray = []; 
            var Startlatlng; 
            var drawGridBox = false; 
            var gridline; 
            function initialize() { 

              map = new google.maps.Map(document.getElementById('map-canvas'), { 
                    center: new google.maps.LatLng(33.00, -100.00), 
                    zoom: 10, 
                    streetViewControl: true, 
                    mapTypeId: google.maps.MapTypeId.ROADMAP, 
                    scaleControl: true  
                });

                var llOffset = 0.0666666666666667; 
                var oLat = 34.00;  
                var oLon = -100.00; 
                var gridlocator = [ new google.maps.LatLng(oLat, oLon)];
                 google.maps.event.addListener(map, 'click', function (event) { 

/*                  google.maps.event.addListener(map, 'bounds_changed', DrawLine); */

                      // Square limits
                     var bottomLeftLat = Math.floor(event.latLng.lat() / llOffset) * llOffset; 
                     var bottomLeftLong = Math.floor(event.latLng.lng() / llOffset) * llOffset; 
                     var bounds = new google.maps.LatLngBounds();  
                     var i;  
                     var gridLineSquare = [ 
                     new google.maps.LatLng(bottomLeftLat, bottomLeftLong),  //lwr left
                     new google.maps.LatLng(bottomLeftLat, bottomLeftLong + llOffset),  //lwr right
                     new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong + llOffset),  //upr right
                     new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong), 
                     new google.maps.LatLng(bottomLeftLat, bottomLeftLong)]; 

                     for (i = 0; i < gridLineSquare.length; i++) { 
                        bounds.extend(gridLineSquare[i]); 
                    } 
                    external.getData(event.latLng);       
                    if (drawGridBox == true) {            
                    polyline = new google.maps.Polyline({ 
                        path: polylinesquare,             
                        geodesic: true,                   
                        strokeColor: '#0000FF', 
                        strokeOpacity: 0.5,       
                        strokeWeight: 1           
                     });                          
                    polyline.setMap(map);         
                    qtrArray.push(polyline);}     
                });
            }


   google.maps.event.addDomListener(window, 'load', initialize); 
  function DrawGridOn()  {drawGridBox = true}
  function DrawGridOff() {drawGridBox = false}

  function ClearLastGrid(){polyline.setMap(null); } 

        </script> 
    </body> 
</html>

将网格绘制成完整的折线而不是方框会更有效:

function createGridLines(bounds) {
    // remove any existing lines from the map
    for (var i=0; i< latPolylines.length; i++) {
            latPolylines[i].setMap(null);
    }
    latPolylines = [];
    for (var i=0; i< lngPolylines.length; i++) {
            lngPolylines[i].setMap(null);
    }
    lngPolylines = [];
    // don't add the lines if the boxes are too small to be useful
    if (map.getZoom() <= 6) return; 
    var north = bounds.getNorthEast().lat();
    var east = bounds.getNorthEast().lng();
    var south = bounds.getSouthWest().lat();
    var west = bounds.getSouthWest().lng();
    // define the size of the grid
    var topLat = Math.ceil(north / llOffset) * llOffset;
    var rightLong = Math.ceil(east / llOffset) * llOffset;
    var bottomLat = Math.floor(south / llOffset) * llOffset;
    var leftLong = Math.floor(west / llOffset) * llOffset;
    for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) {
        // lines of latitude
        latPolylines.push(new google.maps.Polyline({
            path: [
            new google.maps.LatLng(latitude, leftLong),
            new google.maps.LatLng(latitude, rightLong)],
            map: map,
            geodesic: true,
            strokeColor: '#0000FF',
            strokeOpacity: 0.5,
            strokeWeight: 1
        }));
    }
    for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) {
        // lines of longitude
        lngPolylines.push(new google.maps.Polyline({
            path: [
            new google.maps.LatLng(topLat, longitude),
            new google.maps.LatLng(bottomLat, longitude)],
            map: map,
            geodesic: true,
            strokeColor: '#0000FF',
            strokeOpacity: 0.5,
            strokeWeight: 1
        }));
    }
}

概念验证

代码片段:

var map;
var qtrArray = [];
var linesArray = [];
var Startlatlng;
var llOffset = 0.0666666666666667;
var drawGridBox = false;
var gridline;
var polylinesquare;
var latPolylines = [];
var lngPolylines = [];
var bounds = new google.maps.LatLngBounds();
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(33.00, -100.00),
    zoom: 10,
    streetViewControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true
  });
  google.maps.event.addListener(map, 'bounds_changed', function() {
    createGridLines(map.getBounds());
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
function createGridLines(bounds) {
  // remove any existing lines from the map
  for (var i = 0; i < latPolylines.length; i++) {
    latPolylines[i].setMap(null);
  }
  latPolylines = [];
  for (var i = 0; i < lngPolylines.length; i++) {
    lngPolylines[i].setMap(null);
  }
  lngPolylines = [];
  // don't add the lines if the boxes are too small to be useful
  if (map.getZoom() <= 6) return;
  var north = bounds.getNorthEast().lat();
  var east = bounds.getNorthEast().lng();
  var south = bounds.getSouthWest().lat();
  var west = bounds.getSouthWest().lng();
  // define the size of the grid
  var topLat = Math.ceil(north / llOffset) * llOffset;
  var rightLong = Math.ceil(east / llOffset) * llOffset;
  var bottomLat = Math.floor(south / llOffset) * llOffset;
  var leftLong = Math.floor(west / llOffset) * llOffset;
  for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) {
    // lines of latitude
    latPolylines.push(new google.maps.Polyline({
      path: [
        new google.maps.LatLng(latitude, leftLong),
        new google.maps.LatLng(latitude, rightLong)
      ],
      map: map,
      geodesic: true,
      strokeColor: '#0000FF',
      strokeOpacity: 0.5,
      strokeWeight: 1
    }));
  }
  for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) {
    // lines of longitude
    lngPolylines.push(new google.maps.Polyline({
      path: [
        new google.maps.LatLng(topLat, longitude),
        new google.maps.LatLng(bottomLat, longitude)
      ],
      map: map,
      geodesic: true,
      strokeColor: '#0000FF',
      strokeOpacity: 0.5,
      strokeWeight: 1
    }));
  }
}
body,
html {
  height: 100%;
  margin: 0
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<!-- Declare the div, make it take up the full document body -->
<div id="map-canvas" style="width: 100%; height: 95%;"></div>

相关文章：