I'm attemping to buffer a polyline that the user has drawn on a map (Google maps and OSM map). The user specifies a distance in metres and a polygon should be drawn around the polyline representing this buffer zone.
I'm currently doing this by making an AJAX call passing the Wkt string of the polyline down to the server and buffering server-side and then passing the new polygon back to the front end and adding it to the map. (The Wkt string sent to the server contains the LatLng values of the points along the polyline).
However, the resulting polygon appears incorrect (I think technically its correct, but displayed wrong/differently to the polyline). The polygon follows the curvature of the Earth, where as the drawn polyline does not and so they don't match up. I'm buffering the polyline in WGS84.
For example, the black line is the drawn polyline, the red polygon is the buffer:
How would I have to buffer the polyline so the resulting polygon matches up?
Server-side code that creates the buffer zone:
public GenericResponse AddBufferZone(AddBufferZoneRequest request){ if (request == null) throw new ArgumentNullException("request"); if (request.Identification == null) throw new InvalidOperationException("request.Identification"); try { SqlGeography shape = null; SqlGeography bufferZone = null; List bufferZones = new List(); shape = SqlGeography.STGeomFromText(new SqlChars(new SqlString(request.TargetShapeWkt)), 4326); if (!shape.STIsValid()) { throw new OpenFoundationException(String.Format("Shape is invalid - IsValidDetailed ({0}).", shape.IsValidDetailed())); } foreach (var distance in request.BufferSize) { bufferZone = shape.STBuffer(distance); if (!bufferZone.STIsValid()) { throw new OpenFoundationException(String.Format("Buffer Zone is invalid - IsValidDetailed ({0}).", bufferZone.IsValidDetailed())); } bufferZones.Add(bufferZone.ToString()); } Newtonsoft.Json.JsonSerializerSettings settings = Common.Utilities.JSONHelpers.DefaultServerSerialiserSettings(false,null); var json = Newtonsoft.Json.JsonConvert.SerializeObject(bufferZones, settings); GenericResponse response = new GenericResponse(true, json, null); return response; } catch (Exception) { throw new OpenFoundationException("Failed to create Buffer Zone(s)."); ; }}Client-side code adding the polygon to the map:
addBufferZone: function (shape, layer, bufferZoneOptions, index) {/// /// Adds a buffer zone to the map/// var that = this, wkt, object; // Shape should be in Wkt formatwkt = new Wkt.Wkt();that._registerWktLibrary();wkt.read(shape);// Create the google object and setMapobject = wkt.toObject(); // Add the key and distanceobject.bufferZoneKey = bufferZoneOptions.bufferZoneKey;object.distance = bufferZoneOptions.distance;object.setOptions({ fillColor: bufferZoneOptions.fillColor || "black", strokeOpacity: 0, fillOpacity: layer._customOpacity != null ? layer._customOpacity : 0.5}); object.setMap(that._map);that._addPopupToShape(object);if (index != null) { layer.shape.bufferZones.splice(index, 0, object);} else { // Add to the bufferZone collection layer.shape.bufferZones.push(object); }},I can't seem to figure out a way around this. If I create SqlGeometries instead of Geographies I can buffer them correctly, however I can't buffer them in metres, only in degree's, which is something I don't want to do. I've used some basic formula to convert metres to degree's but the resulting polygon is too inaccurate.
أكثر...
I'm currently doing this by making an AJAX call passing the Wkt string of the polyline down to the server and buffering server-side and then passing the new polygon back to the front end and adding it to the map. (The Wkt string sent to the server contains the LatLng values of the points along the polyline).
However, the resulting polygon appears incorrect (I think technically its correct, but displayed wrong/differently to the polyline). The polygon follows the curvature of the Earth, where as the drawn polyline does not and so they don't match up. I'm buffering the polyline in WGS84.
For example, the black line is the drawn polyline, the red polygon is the buffer:
How would I have to buffer the polyline so the resulting polygon matches up?
Server-side code that creates the buffer zone:
public GenericResponse AddBufferZone(AddBufferZoneRequest request){ if (request == null) throw new ArgumentNullException("request"); if (request.Identification == null) throw new InvalidOperationException("request.Identification"); try { SqlGeography shape = null; SqlGeography bufferZone = null; List bufferZones = new List(); shape = SqlGeography.STGeomFromText(new SqlChars(new SqlString(request.TargetShapeWkt)), 4326); if (!shape.STIsValid()) { throw new OpenFoundationException(String.Format("Shape is invalid - IsValidDetailed ({0}).", shape.IsValidDetailed())); } foreach (var distance in request.BufferSize) { bufferZone = shape.STBuffer(distance); if (!bufferZone.STIsValid()) { throw new OpenFoundationException(String.Format("Buffer Zone is invalid - IsValidDetailed ({0}).", bufferZone.IsValidDetailed())); } bufferZones.Add(bufferZone.ToString()); } Newtonsoft.Json.JsonSerializerSettings settings = Common.Utilities.JSONHelpers.DefaultServerSerialiserSettings(false,null); var json = Newtonsoft.Json.JsonConvert.SerializeObject(bufferZones, settings); GenericResponse response = new GenericResponse(true, json, null); return response; } catch (Exception) { throw new OpenFoundationException("Failed to create Buffer Zone(s)."); ; }}Client-side code adding the polygon to the map:
addBufferZone: function (shape, layer, bufferZoneOptions, index) {/// /// Adds a buffer zone to the map/// var that = this, wkt, object; // Shape should be in Wkt formatwkt = new Wkt.Wkt();that._registerWktLibrary();wkt.read(shape);// Create the google object and setMapobject = wkt.toObject(); // Add the key and distanceobject.bufferZoneKey = bufferZoneOptions.bufferZoneKey;object.distance = bufferZoneOptions.distance;object.setOptions({ fillColor: bufferZoneOptions.fillColor || "black", strokeOpacity: 0, fillOpacity: layer._customOpacity != null ? layer._customOpacity : 0.5}); object.setMap(that._map);that._addPopupToShape(object);if (index != null) { layer.shape.bufferZones.splice(index, 0, object);} else { // Add to the bufferZone collection layer.shape.bufferZones.push(object); }},I can't seem to figure out a way around this. If I create SqlGeometries instead of Geographies I can buffer them correctly, however I can't buffer them in metres, only in degree's, which is something I don't want to do. I've used some basic formula to convert metres to degree's but the resulting polygon is too inaccurate.
أكثر...