जावास्क्रिप्ट में पॉलीलाइन के चारों ओर बहुभुज कैसे आकर्षित करें?

मैं एक पॉलीलाइन के चारों ओर एक बहुभुज आकर्षित करना चाहता हूं। मेरे मामले में पॉलीलाइन एक Google मानचित्र दिशा है और मुझे Google मानचित्र कैनवास के भीतर इसके चारों ओर एक बहुभुज दिखाना होगा।जावास्क्रिप्ट में पॉलीलाइन के चारों ओर बहुभुज कैसे आकर्षित करें?

पहले:

मैं offsetting के लिए जावास्क्रिप्ट क्लिपर लाइब्रेरी का उपयोग करें। मेरे पास निम्न पॉलीलाइन (मार्ग) है: मैं क्लिपर का उपयोग करके नीचे ऑफसेट पॉलीगॉन बना देता हूं:

मेरे पास JS Bin example काम कर रहा है।

कोड है:

<html> 
    <head> 
    <title>Javascript Clipper Library/Offset polyline</title> 
    <script src="clipper.js"></script> 
    <script> 
    function draw() { 
     var polygons = [[{"X":72,"Y":59.45},{"X":136,"Y":66},{"X":170,"Y":99},{"X":171,"Y":114},{"X":183,"Y":125},{"X":218,"Y":144},{"X":218,"Y":165},{"X":226,"Y":193},{"X":254,"Y":195},{"X":283,"Y":195},{"X":292,"Y":202},{"X":325,"Y":213},{"X":341,"Y":234},{"X":397,"Y":245},{"X":417,"Y":248}]]; 
     var scale = 100; 
     reverse_copy(polygons); 
     polygons = scaleup(polygons, scale); 
     var cpr = new ClipperLib.Clipper(); 
     var delta = 25; 
     var joinType = ClipperLib.JoinType.jtRound; 
     var miterLimit = 2; 
     var AutoFix = true; 
     var svg, offsetted_polygon, 
     cont = document.getElementById('svgcontainer'); 
     offsetted_polygon = cpr.OffsetPolygons(polygons, delta * scale, joinType, miterLimit, AutoFix); 
     //console.log(JSON.stringify(offsetted_polygon)); 

     // Draw red offset polygon 
     svg = '<svg style="margin-top:10px;margin-right:10px;margin-bottom:10px;background-color:#dddddd" width="540" height="340">'; 
     svg += '<path stroke="red" fill="red" stroke-width="2" stroke-opacity="0.6" fill-opacity="0.2" d="' + polys2path(offsetted_polygon, scale) + '"/>'; 

     //Draw blue polyline 
     svg += '<path stroke="blue" stroke-width="3" d="' + polys2path(polygons, scale) + '"/>'; 
     svg += '</svg>'; 

     cont.innerHTML += svg; 
    } 

    // helper function to scale up polygon coordinates 
    function scaleup(poly, scale) { 
     var i, j; 

     if (!scale) 
     scale = 1; 

     for(i = 0; i < poly.length; i++) { 
     for(j = 0; j < poly[i].length; j++) { 
      poly[i][j].X *= scale; 
      poly[i][j].Y *= scale; 
     } 
     } 

     return poly; 
    } 

    // converts polygons to SVG path string 
    function polys2path (poly, scale) { 
     var path = "", i, j; 

     if (!scale) 
     scale = 1; 

     for(i = 0; i < poly.length; i++) { 
     for(j = 0; j < poly[i].length; j++) { 
      if (!j) 
      path += "M"; 
      else 
      path += "L"; 
      path += (poly[i][j].X/scale) + ", " + (poly[i][j].Y/scale); 
     } 
     path += "Z"; 
     } 

     return path; 
    } 

    function reverse_copy(poly) { 
     // Make reverse copy of polygons = convert polyline to a 'flat' polygon ... 
     var k, klen = poly.length, len, j; 

     for (k = 0; k < klen; k++) { 
     len = poly[k].length; 
     poly[k].length = len * 2 - 2; 

     for (j = 1; j <= len - 2; j++) { 
      poly[k][len - 1 + j] = { 
      X: poly[k][len - 1 - j].X, 
      Y: poly[k][len - 1 - j].Y 
      } 
     } 
     } 
    } 
    </script> 
    </head> 
    <body onload="draw()"> 
    <h2>Javascript Clipper Library/Offset polyline</h2> 
    This page shows an example of offsetting polyline and drawing it using SVG. 
    <div id="svgcontainer"></div> 
    </body> 
</html>

और यह सब अच्छा है, लेकिन अब मैं गूगल मैप्स दिशाओं से अंकों के साथ बहुभुज चर बदलना होगा, तो मैं इस परिवर्तन कार्य करें:

directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
    directionsDisplay.setDirections(response); 

    function draw() { 
     var polygons = response.routes[0].overview_path; 

     //REST OF CODE 
    } 
    } 
}

मेरे पास है पॉलीलाइन के चारों ओर बहुभुज को ऑफसेट करने के लिए इस कोड के साथ JS Bin example।

लेकिन कुछ समस्या है, जिसे मैं regonize नहीं कर सकता और मुझे दिशाओं के चारों ओर बहुभुज नहीं मिल सकता है।

क्या इस समस्या को हल करने का कोई तरीका है?

स्रोत

2013-10-14 dr Code

क्यों - इस प्रश्न के लिए शून्य से, क्या गलत है? –

यह मैं नहीं था जो डाउनवॉटेड था, लेकिन मैं कल्पना कर सकता हूं कि ऐसा इसलिए था क्योंकि आपका प्रश्न बहुत व्यापक था। इसलिए। अपने कार्यक्रमों को डीबग करने के लिए यहां नहीं है।आपको यह दिखाने की ज़रूरत है कि समस्या को हल करने के लिए आपने क्या कदम उठाए हैं। उदाहरण के लिए, पहला कदम आपके कोड को व्यवस्थित करना होगा और कंसोल में दिखाए जा रहे जावास्क्रिप्ट त्रुटियों से छुटकारा पाना होगा। तो क्या आप इसे मार्ग (बहुभुज के बिना) प्रदर्शित कर सकते हैं? फिर बहुभुज कोड जोड़ने का प्रयास करें। –

हाँ, मैं var polygon = response.routes [0] .overview_path के साथ अपनी समस्या को हल करने का प्रयास करता हूं; –

यह कामकाजी समाधान है। आप JSTS files at coderwall.com पा सकते हैं।

var overviewPath = response.routes[0].overview_path, 
overviewPathGeo = []; 
for (var i = 0; i < overviewPath.length; i++) { 
    overviewPathGeo.push(
     [overviewPath[i].lng(), overviewPath[i].lat()] 
    ); 
} 

var distance = value/10000, // Roughly 10km 
geoInput = { 
type: "LineString", 
    coordinates: overviewPathGeo 
}; 
var geoReader = new jsts.io.GeoJSONReader(), 
    geoWriter = new jsts.io.GeoJSONWriter(); 
var geometry = geoReader.read(geoInput).buffer(distance); 
var polygon = geoWriter.write(geometry); 

var oLanLng = []; 
var oCoordinates; 
oCoordinates = polygon.coordinates[0]; 
for (i = 0; i < oCoordinates.length; i++) { 
    var oItem; 
    oItem = oCoordinates[i]; 
    oLanLng.push(new google.maps.LatLng(oItem[1], oItem[0])); 
} 

var polygone = new google.maps.Polygon({ 
    paths: oLanLng, 
    map:map 
});

स्रोत

2014-07-30 07:41:36

मेरे काम कर समाधान: working example (Manolis Xountasis के जवाब के आधार पर) और इन से संबंधित प्रश्नों से टुकड़े:

शामिल JSTS library
वस्तुओं JSTS को google.maps.Polyline रास्तों अनुवाद करने के लिए दिनचर्या जोड़ें:

function googleMaps2JTS(boundaries) { 
    var coordinates = []; 
    var length = 0; 
    if (boundaries && boundaries.getLength) length = boundaries.getLength(); 
    else if (boundaries && boundaries.length) length = boundaries.length; 
    for (var i = 0; i < length; i++) { 
     if (boundaries.getLength) coordinates.push(new jsts.geom.Coordinate(
     boundaries.getAt(i).lat(), boundaries.getAt(i).lng())); 
     else if (boundaries.length) coordinates.push(new jsts.geom.Coordinate(
     boundaries[i].lat(), boundaries[i].lng())); 
    } 
    return coordinates; 
};

और वापस google.maps.LatLng सरणियों को

var jsts2googleMaps = function (geometry) { 
    var coordArray = geometry.getCoordinates(); 
    GMcoords = []; 
    for (var i = 0; i < coordArray.length; i++) { 
    GMcoords.push(new google.maps.LatLng(coordArray[i].x, coordArray[i].y)); 
    } 
    return GMcoords; 
}

DirectionsService से निर्देश पॉलीलाइन हो और बफ़र यह

directionsService.route(request, function (response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     var overviewPath = response.routes[0].overview_path, 
      overviewPathGeo = []; 
     for (var i = 0; i < overviewPath.length; i++) { 
      overviewPathGeo.push(
      [overviewPath[i].lng(), overviewPath[i].lat()]); 
     } 

     var distance = 10/111.12, // Roughly 10km 
      geoInput = { 
       type: "LineString", 
       coordinates: overviewPathGeo 
      }; 
     var geoInput = googleMaps2JTS(overviewPath); 
     var geometryFactory = new jsts.geom.GeometryFactory(); 
     var shell = geometryFactory.createLineString(geoInput); 
     var polygon = shell.buffer(distance); 

     var oLanLng = []; 
     var oCoordinates; 
     oCoordinates = polygon.shell.points[0]; 
     for (i = 0; i < oCoordinates.length; i++) { 
      var oItem; 
      oItem = oCoordinates[i]; 
      oLanLng.push(new google.maps.LatLng(oItem[1], oItem[0])); 
     } 
     if (routePolygon && routePolygon.setMap) routePolygon.setMap(null); 
     routePolygon = new google.maps.Polygon({ 
      paths: jsts2googleMaps(polygon), 
      map: map 
     }); 
    } 
});

स्रोत

2014-11-27 05:30:35 geocodezip

दूरी इकाई क्या है जो 'shell.buffer (दूरी)' की अपेक्षा कर रही है? इसकी गणना कैसे की जाती है? @geocodezip – jbgarr

यह समझना अच्छा होगा कि आप यहां दूरी की गणना कैसे कर रहे हैं? आप 10/111.12 क्यों कर रहे हैं? –

कोड में टिप्पणी के अनुसार लगभग 10 किमी (https://www.google.com/#q=km%20per%20degree%20longitude%20km) है ('var distance = 10/111.12, // लगभग 10 किमी ') – geocodezip

जावास्क्रिप्ट में पॉलीलाइन के चारों ओर बहुभुज कैसे आकर्षित करें?

उत्तर

संबंधित मुद्दे