openlayers+turf.js绘制线缓冲区

2020-04-22 15:52:20 阅读：1161 来源： 互联网

标签：format EPSG js source openlayers new var turf

最近再做缓冲区的绘制，然后在网上各种查资料，最后决定用turf来实现; 刚开始这样写的，然后不出现缓冲区

      var line = turf.lineString([[8940117.74537665,5936319.233970245],[10407708.688452033,5740640.441560194],[10466412.326175049,5359066.796360594]]);
      var buffered = turf.buffer(line , val, {units: 'kilometers'});
      //创建数据geojson对象和数据源对象
      var format = new GeoJSON();
      var source = new VectorSource({ wrapX: false });
      // //读取geojson数据
      var lineFeature  = format.readFeature(line);
      var bufferFeature = format.readFeature(buffered);
      // //将数据添加数据源的
      source.addFeature(lineFeature);
      source.addFeature(bufferFeature);
      var test = new VectorLayer({ source: source })
      this.map.addLayer(test)

并且还如下得错误然后开始在网上查资料后，知道turf缓冲区不能用EPSG:3857的坐标系，需要转成EPSG:4326(关于坐标系不清楚得,可以看这里) 然后我转过后再试验

      let coordinates = '[[8940117.74537665,5936319.233970245],[10407708.688452033,5740640.441560194],[10466412.326175049,5359066.796360594]]';
      let bufferCoordinates = [],pointTransform=[];
      for (var i = 0; i < coordinates.length; i++) {
          pointTransform = transform(coordinates[i], "EPSG:3857", "EPSG:4326");
          bufferCoordinates.push(pointTransform);
        }
        var line = turf.lineString(bufferCoordinates);
        var buffered = turf.buffer(line , val, {units: 'kilometers'});
      //创建数据geojson对象和数据源对象
      var format = new GeoJSON();
      var source = new VectorSource({ wrapX: false });
      // //读取geojson数据
      var lineFeature = format.readFeature(line);
      var bufferFeature = format.readFeature(buffered);
      // //将数据添加数据源的
      source.addFeature(lineFeature);
      source.addFeature(bufferFeature);
      var test = new VectorLayer({ source: source })
      this.map.addLayer(test)

到了这里发现虽然不报错了，但是结果还是不出来，然后这样看来代码没问题，我这个时候就开始写demo，然后在demo中查看发现运行是没问题得；那就奇了怪了,到底是哪里还有问题，最后又看了一遍官方文档，然后加上了以下两行代码

lineFeature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
bufferFeature.getGeometry().transform('EPSG:4326', 'EPSG:3857');

再次运行，成功出现缓冲区：

参考：openlayers+turf.js实现缓冲区得绘制

标签：format,EPSG,js,source,openlayers,new,var,turf
来源： https://www.cnblogs.com/KoKoLi/p/12745554.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

openlayers+turf.js绘制线缓冲区