AntV L7的控件

满分观察网友z

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

阅读量1.1k

点赞数 33

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

于 2024-03-09 09:48:18 首次发布

本文链接：https://blog.csdn.net/dongxiaod1/article/details/136577754

版权

AntV L7 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本案例使用L7库和Mapbox GL JS创建 L7 的控件，包括 Logo 控件、比例尺控件、图层显隐控件、全屏控件、地图主题以及鼠标位置控件。

文章目录

1. 引入 CDN 链接
2. 引入组件
3. 创建地图
4. 创建场景
5. 创建点数据
6. 创建点图层
7. Logo 控件
8. 比例尺控件
9. 构造中地大楼
10. 图层显隐控件
11. 全屏控件
12. 地图主题
13. 鼠标位置控件

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 库中的多个组件，如 Scene、Mapbox、Logo、Scale、LayerSwitch、PointLayer、PolygonLayer、Fullscreen、MapTheme 和 MouseLocation。这些组件分别用于实现地图的展示、图层、缩放、图层切换、点图层、多边形图层、全屏、主题和鼠标位置提示等功能。

const {
  Scene,
  Mapbox,
  Logo,
  Scale,
  LayerSwitch,
  PointLayer,
  PolygonLayer,
  Fullscreen,
  MapTheme,
  MouseLocation,
} = L7;

3. 创建地图

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

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

4. 创建场景

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

// 初始化L7场景，并将mapbox对象传入
const scene = new Scene({
  id: "map",
  map: new Mapbox({
    mapInstance: map,
  }),
});

5. 创建点数据

在这个数据集中，我们创建了四个点的坐标（x、y）、名称（name）、大小（size）。这些数据将用于在地图上绘制点图层。

// 5.创建点数据
// 添加pointLayer
const data = [
  {
    x: 114.3,
    y: 30.5,
    name: "黄鹤楼",
    size: 10,
  },
  {
    x: 114.34,
    y: 30.55,
    name: "户部巷",
    size: 10,
  },
  {
    x: 114.36,
    y: 30.57,
    name: "粮道街",
    size: 10,
  },
  {
    x: 114.32,
    y: 30.65,
    name: "汉正街",
    size: 10,
  },
];

6. 创建点图层

在这里，我们创建了radar的点图层形状，它会将数据点显示为雷达图。

首先，我们创建了一个名为pointLayer的新点图层。我们通过传递一个对象{ name: "点图层" }来指定图层的名称。
接下来，我们从 JSON 数据源的data的变量中解析出数据，指定了x和y属性。
然后，我们设置了点图层的样式。我们使用了shape属性来指定点图层的形状，例如"radar"。我们还设置了点的大小size（默认为 10），以及生长动画animate。当点图层的形状从cylinder变为circle时，动画会从圆形变为水波圆。
接着，我们设置了点的颜色。我们使用color属性来指定颜色，并根据点的名称（例如"黄鹤楼"或"户部巷"）动态地选择颜色。如果没有找到匹配的颜色，默认颜色为红色#f00。
最后，我们将图层添加到了地图的场景中。

// 6.创建点图层
// PointLayer点图层，在L7中引入
const pointLayer = new PointLayer({ name: "点图层" })
  // source添加数据源
  .source(data, {
    parser: {
      type: "json",
      x: "x",
      y: "y",
    },
  })
  // shape指定点图层的样式
  .shape("radar")
  .size(50)
  // animate 生长动画 当shape为cylinder的时候，生长 为circle的时候，变为水波圆
  .animate({
    enable: true,
  })
  .active(true)
  // color指定颜色
  .color("name", (value) => {
    switch (value) {
      case "黄鹤楼":
        return "#f00";
        break;
      case "户部巷":
        return "#5af07e";
        break;
      default:
        return "#f00";
        break;
    }
  })
  .style({
    opacity: 0.6,
    strokeWidth: 1,
  });
// 最后将图层放到scene中
scene.addLayer(pointLayer);

QQ录屏20240229095516_-original-original

7. Logo 控件

Logo 控件通常用于在 Three.js 应用程序中显示应用程序的标识或网站链接。它可以放在场景中的顶部、顶部左侧或右侧。在这里，我们把 Logo 放到右上角。

const logo = new Logo({
  img: "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GRb1TKp4HcMAAAAAAAAAAAAAARQnAQ",
  href: "https://l7.antv.antgroup.com/",
  position: "topright",
});
scene.addControl(logo);

8. 比例尺控件

通过观察，有时候发现 L7 的比例尺控件会非常长，我们可以通过设置样式解决。

const scale = new Scale({
  zoomInTitle: "放大",
  zoomOutTitle: "缩小",
  position: "bottomleft",
});
scene.addControl(scale);

比例尺样式：

.l7-control-scale-line {
  max-width: 150px !important;
}

9. 构造中地大楼

9.1. 获取数据

使用 fetch 函数从服务器获取数据：

fetch("http://39.103.151.139:8000/gis/zhongdi")
  .then((res) => res.json())
  .then((data) => {
    // ...
  });

9.2. 创建多边形图层

// 4.2 创建一个多边形图层
const zhongdiLayer = new PolygonLayer({})
  .source(data)
  .color("#21a1f1")
  .size(100)
  .shape("extrude");
// 将图层添加到场景中
scene.addLayer(zhongdiLayer);

9.3. 添加弹窗

当我们点击地图上的某个位置时，会触发这个事件，并显示一个弹出框（Popup）来显示点击位置的属性（名称和工作人员数量）。

// 4.3添加弹窗
// 通过on添加点击事件
zhongdiLayer.on("click", (e) => {
  // console.log(e);
  // 从回调中的数据，我们可以获取属性以及坐标
  const {
    feature: {
      properties: { name, people },
    },
    lngLat,
  } = e;
  // setLnglat需要传入一个经纬度数组
  const popup = new Popup({
    offsets: [0, 50],
    closeButton: false,
  })
    .setLnglat([lngLat.lng, lngLat.lat])
    .setHTML(`<span>名称: ${name}</span><br><span>工作人数: ${people}</span>`);
  // 将弹出框添加到场景中
  scene.addPopup(popup);
});

9.4. 演示效果

10. 图层显隐控件

图层显隐控件是一种用于控制地图上图层显示和隐藏的控件。我们创建了一个名为LayerSwitch对象，该对象包含了两个图层（pointLayer和zhongdiLayer），然后将这个控件添加到地图场景scene中。

const layerSwitch = new LayerSwitch({
  layers: [pointLayer, zhongdiLayer],
});
scene.addControl(layerSwitch);

11. 全屏控件

Fullscreen 是一个创建全屏模式的工具库，它可以帮助我们轻松地实现全屏模式的功能。

            const fullscreen = new Fullscreen({
              btnText: "全屏",
              exitBtnText: "退出全屏",
            });
            scene.addControl(fullscreen);
          });

12. 地图主题

在地图应用中，通常需要根据不同的应用场景来设置地图的样式，例如普通地图、地形图、卫星地图等。这段代码我们使用了MapTheme类来设置地图的主题。

const mapTheme = new MapTheme({});
scene.addControl(mapTheme);

13. 鼠标位置控件

在这里，我们添加一个鼠标位置控制。

首先，我们导入了MouseLocation类，它是一个 Three.js 的组件，用于显示鼠标的位置。
然后，我们创建了一个MouseLocation实例，并为其transform属性提供了一个函数。这个函数接收一个坐标值，并将其格式化为一个包含小数点后四位数的字符串。这样，鼠标的位置将显示为四个小数位的浮点数。
接下来，我们将这个MouseLocation实例添加到场景中，通过调用scene.addControl(mouseLocation)方法。这将使得鼠标位置控件在场景中显示。

const mouseLocation = new MouseLocation({
  transform: (position) => {
    return position.map((item) => item.toFixed(4));
  },
});
scene.addControl(mouseLocation);