Question

我遇到了在折线周围绘制多边形的问题。我有每个折线的坐标，我想得到这条折线周围的多边形坐标。我使用MapBox的地图。有任何想法吗？我没有找到解决方案。东西，看起来像这样。我需要获得围绕线绘制多边形的坐标。

enter image description here

Answer 1

我找到了解决方案，伙计们！这真的很难：D 根据关于Turf的最后提示：）

我找到了pod“SwiftTurf”

var coordsPointer = UnsafeMutablePointer<CLLocationCoordinate2D>.allocate(capacity: Int(polyline.pointCount))
    polyline.getCoordinates(coordsPointer, range: NSMakeRange(0, Int(polyline.pointCount)))

    // save coords
    var lineCoords: [CLLocationCoordinate2D] = []
    for i in 0..<polyline.pointCount {
        lineCoords.append(coordsPointer[Int(i)])
    }

    let lineString:LineString = LineString(geometry: lineCoords)

    let bufferLineString = SwiftTurf.buffer(lineString, distance: width, units: .Meters)

    let outer = bufferLineString!.geometry![0]
    let interiors = bufferLineString?.geometry![1..<bufferLineString!.geometry.count].map({ coords in
        return MGLPolygon(coordinates: coords, count: UInt(coords.count))
    })
    // This polygon is solution
    self.currentBufferPolygon = MGLPolygon(coordinates: outer, count: UInt(outer.count), interiorPolygons: interiors)
    mapView.addAnnotation(self.currentBufferPolygon!)

你可以在pod的回购中找到更多关于github的信息:)祝你好运！

Answer 2

如果你想在浏览器中围绕折线绘制多边形，我建议使用turf.js.对于这个确切的案例，Turf的buffer method应该很好地工作。

这是Mapbox GL JS地图上的一个例子

＆＃13;

var line = {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "LineString",
    "coordinates": [
      [-122.40447521209718,
        37.79367718768535
      ],
      [-122.40803718566895,
        37.79171022624846
      ],
      [-122.40769386291502,
        37.79096412372944
      ],
      [-122.40662097930908,
        37.789641468930114
      ],
      [-122.40941047668457,
        37.789675383451495
      ],
      [-122.40992546081543,
        37.78875968591083
      ],
      [-122.40962505340575,
        37.78791180770003
      ]
    ]
  }
};

mapboxgl.accessToken = 'pk.eyJ1IjoibWFwc2FtIiwiYSI6ImNqNzI4ODR4djBkZmczMnJzZjg3eXZhcDgifQ.5xM2OR_RvuO6YvirBVeiOg';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  zoom: 15,
  center: [-122.4067, 37.7899]
});

map.on('load', function() {
  map.addLayer({
    "id": "route",
    "type": "line",
    "source": {
      "type": "geojson",
      "data": line
    }
  });

  var polygon = turf.buffer(line, 50, 'meters');

  map.addLayer({
    "id": "poly",
    "type": "fill",
    "source": {
      "type": "geojson",
      "data": polygon
    },
    "layout": {},
    "paint": {
      "fill-color": '#d9d838',
      "fill-opacity": 0.3
    }
  });
});

＆＃13;

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

＆＃13;

<html>

<head>
  <meta charset='utf-8' />
  <title></title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />

  <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
</head>

<body>
  <div id='map'></div>
</body>

</html>

＆＃13;

多边形周围的多边形与半径？

2 个答案: