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);
            });