GEOJSON画线时需要的二维数组坐标怎么转换

  • Z时代
  • 2024-02-19
  • 分类：IT

GEOJSON画线时需要的二维数组坐标怎么转换

使用的是思极地图 文档地址https://lbs.sgmap.cn/products...
其中创建线段用到GEOJSON，对这个不太熟
数据如下（无视坐标相同...事实是不同的）

      tableData: [
         {
          markerX: 116.409197,
          markerY: 39.912869,
          lineId: "51515616151A",
        },
        {
          markerX: 116.409197,
          markerY: 39.912869,
          lineId: "51515616151B",
        },
        {
          markerX: 116.409197,
          markerY: 39.912869,
          lineId: "51515616151C",
        },
        {
          markerX: 116.409197,
          markerY: 39.912869,
          lineId: "51515616151D",
        }
      ]

创建地图后需要画线段和圆点，每两个圆点有一条线段相连

画线的代码

    getLine(map, id, lineWidth, lineOpacity, lineOffset, coordinates, _this) {
      let currentLine = null;
      map.on("load", function (e) {
        //画线
        let polyline = map.addLayer({
          id: id,
          type: "line",
          source: {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: [],
            },
          },
          paint: {
            "line-color": "#00896C",
            "line-width": lineWidth,
            "line-opacity": lineOpacity,
            "line-offset": lineOffset,
            //'line-dasharray':[4,4]
          },
        });
        map.getSource(id).setData({
          type: "FeatureCollection",
          features: [
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                coordinates: coordinates, //二维数组[[0,0],[0,0]]
              },
            },
          ],
        });
        map.on("click", String(id), function (e) {
          if (!currentLine) {
            map.setPaintProperty(String(id), "line-color", "#6AD6C0");
            currentLine = polyline;
          } else {
            map.setPaintProperty(String(id), "line-color", "#00896C");
            currentLine = null
          }
        });
      });
    },

关键就在coordinates。

然后开始循环画线

data() {
  return {
    linePath: []
  }
}
computed: {
  dataDeal() {
   for (let [index, elem] of new Map(_this.tableData.map((item, i) => [i,item]))) {
      this.drawMarker(elem, index);
      }
    }
  }
mthods: {
  drawMarker(elem, index) {
     let _this = this
     if (elem.markerX && elem.markerY) {
        _this.linePath.push([elem.markerX, elem.markerY]);
        _this.getLine(
          map,
          String(elem.sectionNumber), //线id
          4, //线宽
          0.8, //透明度
          0, //偏移量
          _this.linePath, //线坐标，一个二维数组
          _this
        );
      }
  }
}

这样是可以正常显示出线段的，问题就是，我想要点击线段，然后点击的会有个高亮效果，
理想效果是：点击两个圆点之间的线段，只有这个线段高亮，其他圆点的连线不变。
事实效果是：点击两个圆点之间的线段，整条线段都高亮了。。。

排查问题发现是传入的coordinates，用push的方式之后，把所有数据都push到一个数组了，就相当于只创建了一条线段。

有没有什么办法，用现有的数据，创建成三个不同的二维数组，比如：[Arr0, Arr1] [Arr1, Arr2] [Arr2, Arr3]

回答：

理想效果是：点击两个圆点之间的线段，只有这个线段高亮，其他圆点的连线不变。
事实效果是：点击两个圆点之间的线段，整条线段都高亮了。。。
我猜想是你生成一个layer图层，理论上你需要生成点数-1个图层。
理论上你需要把geojson分成一个数组，数组内每个元素都是两个点
比如：

tableData: [
         {
          markerX: 116.409197,
          markerY: 39.912869,
          lineId: "51515616151A",
        },
        {
          markerX: 116.409197,
          markerY: 39.912869,
          lineId: "51515616151B",
        },
        {
          markerX: 116.409197,
          markerY: 39.912869,
          lineId: "51515616151C",
        },
        {
          markerX: 116.409197,
          markerY: 39.912869,
          lineId: "51515616151D",
        }
      ]

变成

tableData: [
 [
    {
      markerX: 116.409197,
      markerY: 39.912869,
      lineId: "51515616151A",
    },
    {
      markerX: 116.409197,
      markerY: 39.912869,
      lineId: "51515616151B",
    }
],
 [
  {
  markerX: 116.409197,
  markerY: 39.912869,
  lineId: "51515616151B",
},
{
  markerX: 116.409197,
  markerY: 39.912869,
  lineId: "51515616151C",
}
 ],
 [
  {
  markerX: 116.409197,
  markerY: 39.912869,
  lineId: "51515616151C",
},
{
  markerX: 116.409197,
  markerY: 39.912869,
  lineId: "51515616151D",
}
 ]
]

这样一个geojson变成三个再去创建线图层，就会生成多个layer
大概的数据处理方法?

let a = [1,2,3,4,5,6,7,8,9,10]
let b = []
for(var i=0;i<a.length;i++){
    let c = a.shift()    
    b.push([c,a[0]])
}

以上是 GEOJSON画线时需要的二维数组坐标怎么转换 的全部内容， 来源链接： utcz.com/p/935730.html

回到顶部