mars3d 和 turf结合使用——线相关分析

最新推荐文章于 2023-07-26 18:17:51 发布

今日无事勾栏听曲

最新推荐文章于 2023-07-26 18:17:51 发布

阅读量539

点赞数

分类专栏： mars3d技术文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_44806249/article/details/127481505

版权

mars3d技术专栏收录该内容

36 篇文章 5 订阅

订阅专栏

turf简介：
1、turf官网http://turfjs.org/
2、用于地理空间分析的js库，处理各种地图算法。

使用：
1、使用mars3d画一条简单的线

  lineLayer.startDraw({
    type: "polyline",
    style: {
      color: "#55ff33",
      width: 3,
      clampToGround: false
    }
  })

2、使用turf计算曲线


  let line = lineLayer.getGraphics() //获取地图上的线矢量数据
  if (line.length === 0) {
    globalMsg("请绘制线！")
    return
  }
  line = line[0].toGeoJSON()

  const curved = turf.bezierSpline(line)
  const positions = curved.geometry.coordinates

  const graphic = new mars3d.graphic.PolylineEntity({
    positions: positions,
    style: {
      width: 4,
      color: "#00ffff"
    }
  })
  graphicLayer.addGraphic(graphic)

3、计算平行线

let line = lineLayer.getGraphics()
  if (line.length === 0) {
    globalMsg("请绘制线！")
    return
  }
  line = line[0].toGeoJSON()

  graphicLayer.clear()

  const offsetLine = turf.lineOffset(line, distance, { units: "miles" })

  const positions = offsetLine.geometry.coordinates

  const graphic = new mars3d.graphic.PolylineEntity({
    positions: positions,
    style: {
      width: 4,
      color: "#ff0000"
    }
  })
  graphicLayer.addGraphic(graphic)