cesium实现点聚合

最新推荐文章于 2024-08-02 15:56:04 发布

hundred83

最新推荐文章于 2024-08-02 15:56:04 发布

阅读量901

点赞数 8

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_62186125/article/details/135531226

版权

文章详细描述了如何使用Cesium库加载并处理GeoJSON数据，实现点位的动态聚合，并根据聚集的点数调整聚类点的显示样式，包括使用不同的图片和尺寸。

摘要由CSDN通过智能技术生成

initPoints(item) {
      // 加载点位
      this.$axios
        .get(
          httpGeoserver +
            "/points/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=points%3Apoints&maxFeatures=10000&outputFormat=application%2Fjson"
        )
        .then((res) => {
          // console.log("res", res.data.features);
          // const features = res.data.features;
          let datasource = Cesium.GeoJsonDataSource.load(res.data, {
            clampToGround: false, // 将数据贴在地面上
          }).then((dataSource) => {
            // 启用点聚合
            dataSource.clustering.enabled = true;
            dataSource.clustering.pixelRange = 80;
            dataSource.clustering.minimumClusterSize = 8;
            // 设置聚合点的样式
            dataSource.clustering.clusterEvent.addEventListener(function (
              clusteredEntities,
              cluster
            ) {
              cluster.billboard.show = true;
              cluster.label.show = true;
              cluster.label.font = "14px sans-serif";
              cluster.label.verticalOrigin = Cesium.VerticalOrigin.CENTER;
              cluster.label.horizontalOrigin = Cesium.HorizontalOrigin.CENTER;
              cluster.label.eyeOffset = new Cesium.Cartesian3(0, 0, -8);
              // 根据聚合数量的多少设置不同层级的图片以及大小
              if (clusteredEntities.length >= 64) {
                cluster.billboard.image = require("@/static/img/m4.png");
                cluster.billboard.width = 72;
                cluster.billboard.height = 72;
              } else if (clusteredEntities.length >= 32) {
                cluster.billboard.image = require("@/static/img/m3.png");
                cluster.billboard.width = 56;
                cluster.billboard.height = 56;
              } else if (clusteredEntities.length >= 16) {
                cluster.billboard.image = require("@/static/img/m2.png");
                cluster.billboard.width = 48;
                cluster.billboard.height = 48;
              } else {
                cluster.billboard.image = require("@/static/img/m1.png");
                cluster.billboard.width = 40;
                cluster.billboard.height = 40;
              }
            });
            this.viewer.dataSources.add(dataSource);
          });
        });
    },