JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

Antv下l7图表地图描边

2022. 12. 01    

Antv下L7图表地图描边

Antv下L7图表地图覆盖掉红边

借用了阿里云地图数据库生成的国界线数据工具点击这里

Antv 实例

import { GaodeMap, Scene,LineLayer } from '@antv/l7';
import { Choropleth } from '@antv/l7plot';

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'blank',
    center: [120.19382669582967, 30.258134],
    zoom: 3,
  }),
});
/*

数据
每个对象里面的四个坐标表示俩个连接点的坐标,要保证下一个起始点是上一个结束点

格式 {"lat":118.54248,"lat1":118.632431,"lng":10.904785,"lng1":11.060495},{"lat":118.632431,"lat1":118.691483,"lng":11.060495,"lng1":11.182444}

*/
scene.on('loaded', () => {
  const layer = new LineLayer({ zIndex: 4}).source(
     [数据放到这里],
        {
          parser: {
            type: 'json',
            x: 'lat',
            y: 'lng',
            x1: 'lat1',
            y1: 'lng1',
          },
        })
        .shape('line')
        .size(2)
        .color('#000');
    scene.addLayer(layer);
})


结果

//JS 做数据处理把阿里云的数据变成L7要求的格式
  // 国界
  let arr = []
  // 争议
  arr2 = []
  // let aa0 = [arr[6],arr[3],arr[2],arr[1], arr2, arr[0],arr[4],arr[5],arr[12],arr[13],arr[19]];
  let aa0 = [arr[14]];
  aa0 = aa0.flat();
  let bnArr = [];
  let nArr = [];
  aa0.map((item, i) => {
    let sarr = []
    let obj = {}
    item.map((sitem, j) => {
      if (j == 0) {
        obj.lat = item[j]
        obj.lat1 = aa0[i + 1] && aa0[i + 1][0]
      } else {
        obj.lng = item[j]
        obj.lng1 = aa0[i + 1] && aa0[i + 1][1]
      }
      sarr.push(obj)
    })
    bnArr.push(sarr[0])
  })

  console.log(JSON.stringify(bnArr));

  console.log(arr);