AntV L7的pointLayer点图层

满分观察网友z

已于 2024-03-12 17:31:57 修改

阅读量1.9k

点赞数 28

CC 4.0 BY-SA版权

分类专栏： AntV L7 文章标签： swift 开发语言 ios web arcgis javascript

于 2024-03-07 08:17:26 首次发布

本文链接：https://blog.youkuaiyun.com/dongxiaod1/article/details/136522966

AntV L7 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何利用L7库和MapboxGLJS在HTML页面中创建点数据，包括普通json数据和GeoJSON格式，并展示如何在地图上渲染这些点，通过示例代码展示了整个过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1. 引入 CDN 链接

<script src="https://unpkg.com/@antv/l7"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<link
  href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
  rel="stylesheet"
/>

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. 代码实现

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>L7的pointLayer</title>
    <!-- 1.引入CDN链接 -->
    <script src="https://unpkg.com/@antv/l7"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        overflow: hidden;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // 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);
      });
    </script>
  </body>
</html>