如何在地图的查看区域中创建网格 [英] How to create a Grid in the viewing area of a map
本文介绍了如何在地图的查看区域中创建网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在地图上放置网格，网格框为1/4分钟x 1/4分钟。我是一个梯形。我正在使用Delphi和TWebBrowser利用的JavaScript。
I need to place a grid on a map where the grid box is 1/4 minute x 1/4 minute. IOWs a trapezoid. I am using JavaScript leveraged by Delphi and TWebBrowser.
现在我正在响应click事件以测试绘制单个gridBox但是我将不得不绘制更改的Bounds事件并用网格填充地图。
Right now I am responding to the click event to test draw a single gridBox but I will have to draw on the Bounds changed event and fill the map with the grid.
由于1/4分钟网格非常小，因此预先保存在KML或融合中是不切实际的所以我决定在地图上动态绘制它。
Since a 1/4 min grid is quite small, it is not practical to have one pre-saved in a KML or fusion so I have decided to draw it dynamically, on the map in view.
我的网格框总是落在qtrMinute边界上。我想要确定的是如何创建这些框来填充地图。
My grid boxes will always fall on a qtrMinute boundary. what I am trying to determine is how to create these boxes to fill the map.
我需要从左上方开始绘制它们直到左下角，重绘每当边界改变时它们就会出现。
I will need to start in the upper left and draw them until the lower left, redraw them whenever the boundaries are changed.
我将限制用户的缩放，以免造成过多的绘图时间。
I will limit my user's zoom, so as to not impose excessive drawing time.
有人会帮助我使用网格框填充屏幕的逻辑。
Would someone help me with the logic to fill the screen with grid boxes.
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&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>
推荐答案
将网格绘制为完整效率会更高效折线而不是方框：
It would be more efficient to draw the grid as complete polylines rather than boxes:
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"></script>
<!-- Declare the div, make it take up the full document body -->
<div id="map-canvas" style="width: 100%; height: 95%;"></div>
这篇关于如何在地图的查看区域中创建网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
