AntV L7的pointLayer点图层

���案例使用L7库和Mapbox GL JS创建点数据并加载进地图。

文章目录

• 1. 引入 CDN 链接
• 2. 引入组件
• 3. 创建地图
• 4. 创建场景
• 5. 创建点数据
• • 5.1. 普通 json 数据
  • 5.2. geojson 数据
  • 6. 创建点图层
  • • 6.1. 普通 json 数据
    • 6.2. geojson 数据
    • 7. 演示效果
    • 8. 代码实现

      1. 引入 CDN 链接

      2. 引入组件

      引入 L7-JS 库中的Scene、Mapbox和PointLayer组件。

      const { Scene, Mapbox, PointLayer } = L7;

      3. 创建地图

      我们创建了一个Mapbox GL JS地图实例，设置了地图的容器、默认的地图风格、中心点坐标、地图级别以及默认的地图投影模式。

      const map = new mapboxgl.Map({  container: "map",  style: "mapbox://styles/mapbox/streets-v12",  center: [108.280717, 23.157163],  zoom: 12,  projection: "globe",});

      4. 创建场景

      Scene组件负责显示地图和其他图层。

      const scene = new L7.Scene({  id: "map",  map: new Mapbox({    mapInstance: map,  }),});

      5. 创建点数据

      5.1. 普通 json 数据

      在这里我们创建了两个坐标点的数据。

      const data = [  {    lng: 108.280717,    lat: 23.157163,    name: "武鸣区",  },  {    lng: 108.290717,    lat: 23.167163,    name: "南宁师范大学",  },];

      5.2. geojson 数据

      在这里，我们创建一个表示地理数据的 JSON 格式。它包含了一个名为data的变量，该变量是一个包含类型为FeatureCollection的地理数据对象。FeatureCollection是一个包含多个Feature对象的集合，每个Feature对象表示一个地理要素（如点、线或面）。

      在这个例子中，data对象包含了两个Feature对象。第一个Feature对象的类型是Point，表示一个点，其坐标是108.280717, 23.157163。第二个Feature对象的类型是Point，表示一个点，其坐标是108.290717, 23.167163。这两个点的坐标分别位于武鸣区和南宁师范大学附近。

      const data = {  type: "FeatureCollection",  features: [    {      type: "Feature",      properties: {        name: "武鸣区",      },      geometry: {        type: "Point",        coordinates: [108.280717, 23.157163],      },    },    {      type: "Feature",      properties: {        name: "南宁师范大学",      },      geometry: {        type: "Point",        coordinates: [108.290717, 23.167163],      },    },  ],};

      6. 创建点图层

      6.1. 普通 json 数据

      我们可以使用L7.PointLayer创建一个点云图层，设置点图层的样式。

              // 6.创建点图层        // source默认可以解析geojson        // PointLayer点图层，在L7中引入        const pointLayer = new PointLayer({})          // source添加数据源          .source(data, {            parser: {              type: "json",              x: "lng",              y: "lat",            },          })          // shape指定点图层的样式          .shape("circle")          // size指定大小          .size("name", [10, 20])          // color指定颜色          .color("name", ["#e53e31", "#24adf3"])          .style({            opacity: 0.8,            strokeWidth: 1,          });        // 最后将图层放到scene中        scene.addLayer(pointLayer);

      6.2. geojson 数据

      source默认可以解析geojson。

              // PointLayer点图层，在L7中引入        const pointLayer = new PointLayer({})          // source添加数据源          .source(data)          // shape指定点图层的样式          .shape("circle")          // size指定大小          .size("name", [10, 20])          // color指定颜色          .color("name", ["#e53e31", "#24adf3"])          .style({            opacity: 0.8,            strokeWidth: 1,          });        scene.addLayer(pointLayer);

      7. 演示效果

      在这里，我们创建了一个蓝色和一个红色不同大小的点。

      8. 代码实现

                    L7的pointLayer                          * {        padding: 0;        margin: 0;      }      body {        overflow: hidden;      }      #map {        width: 100vw;        height: 100vh;      }                      // 2.引入组件      const { Scene, Mapbox, PointLayer } = L7;      mapboxgl.accessToken =        "pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA";      // 3.创建地图      const map = new mapboxgl.Map({        container: "map",        style: "mapbox://styles/mapbox/streets-v12",        center: [108.280717, 23.157163],        zoom: 12,        projection: "globe",      });      // 4.创建场景      const scene = new L7.Scene({        id: "map",        map: new Mapbox({          mapInstance: map,        }),      });      scene.on("load", () => {        // 5.创建点数据        const data = [          {            lng: 108.280717,            lat: 23.157163,            name: "武鸣区",          },          {            lng: 108.290717,            lat: 23.167163,            name: "南宁师范大学",          },        ];        // 6.创建点图层        // source默认可以解析geojson        // PointLayer点图层，在L7中引入        const pointLayer = new PointLayer({})          // source添加数据源          .source(data, {            parser: {              type: "json",              x: "lng",              y: "lat",            },          })          // shape指定点图层的样式          .shape("circle")          // size指定大小          .size("name", [10, 20])          // color指定颜色          .color("name", ["#e53e31", "#24adf3"])          .style({            opacity: 0.8,            strokeWidth: 1,          });        // 最后将图层放到scene中        scene.addLayer(pointLayer);      });