html - how to draw minimum rectangle boundary with javascript -
minimum rectangle boundary, point in polygon test.html , js included, leaflet code gives error:
addlayer not defined (i want work on dataset need calculate bounds.i new in javascript. couldn't find sample code. if can me kind of way should follow,i happy.)
function project (longitude, latitude) { return { x: longitude, // transform “longitude” in way y: latitude // transform “latitude” in way } } var bounds; function getboundingbox (data) { bounds = {}, coords, point, latitude, longitude; data = data.features; (var = 0; < data.length; i++) { coords = data[i].geometry.coordinates[0]; (var j = 0; j < coords.length; j++) { longitude = coords[j][0]; latitude = coords[j][1]; bounds.xmin = bounds.xmin < longitude ? bounds.xmin : longitude; bounds.xmax = bounds.xmax > longitude ? bounds.xmax : longitude; bounds.ymin = bounds.ymin < latitude ? bounds.ymin : latitude; bounds.ymax = bounds.ymax > latitude ? bounds.ymax : latitude; } } return bounds; } function drawbound() { debugger; var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]]; // create orange rectangle l.rectangle(bounds, {color: "#ff7800", weight: 1}).addto(map); // zoom map rectangle bounds map.fitbounds(bounds); }
<!doctype html> <html lang="en"> <head> <title>leaflet filelayer </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css"> <link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.7/dist/leaflet.css"> <link rel="stylesheet" href="style.css"> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script> <script src="https://unpkg.com/togeojson@0.14.2"></script> <script src="https://unpkg.com/leaflet-filelayer@0.6.0"></script> <script src="bounds.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="menu.js"></script> <script src="index.js"></script> </head> <body> <header> <h1>a visual isarithmic mapping tool online maps</h1> <div id="controls" class="bar"></div> <button class="menu-toggle"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> <div class="menu closed"> <a class="sources" href="http://github.com/makinacorpus/leaflet.filelayer/">sources</a> <a href="javascript:drawbound()">can </a> </div> </header> <main> <div id="map" style="width: 100%; height: 100%; display: block;"></div> </main> </body> </html>
wiki
Comments
Post a Comment