cesium 使用supercluster.js插件实现聚合功能

原创

已于 2024-01-19 15:50:33 修改 · 1.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #cesium #前端

于 2024-01-19 15:48:41 首次发布

本文介绍了如何在Cesium地图中集成supercluster.js脚本，实现POI数据的智能聚合和根据不同类型展示不同的图标，展示了地图可视化和地理信息系统在实际项目中的应用。

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

引入supercluster.js脚本

 <script id="cesium_sandcastle_script">

    function startup(Cesium) {

      'use strict';

      //Sandcastle_Begin

      //设置主视角，默认进入时视角范围

      SetHoumeViewerjd(118.25669445145353, 21.58050898317632, 123.91666536429605, 25.77861604625837);

 //创建cesium地球

      var viewer = new Cesium.Viewer("cesiumContainer", {

        selectionIndicator: true,

        infoBox: true,

        //需要进行可视化的数据源的集合

        animation: true, //是否显示动画控件

        shouldAnimate: true,

        homeButton: true, //是否显示Home按钮

        fullscreenButton: true, //是否显示全屏按钮

        baseLayerPicker: true, //是否显示图层选择控件

        geocoder: false, //是否显示地名查找控件

        timeline: true, //是否显示时间线控件

        sceneModePicker: true, //是否显示投影方式控件

        navigationHelpButton: true, //是否显示帮助信息控件

        requestRenderMode: true, //启用请求渲染模式

        scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存

        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode

        //加载天地图影像地图，WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口

        //tileset添加地形，本地地址

        imageryProvider: new Cesium.TileMapServiceImageryProvider({

          url: 'http://192.168.2.27:8080' + '/TMS/',

          fileExtension: 'jpg',

          layer: 'img',

          style: 'default',

          tileMatrixSetID: 'w',

          format: 'tiles',

          maximumLevel: 20,

          name: "main"

        }),

      });

      //去掉版权信息

      viewer._cesiumWidget._creditContainer.style.display = "none";

      //光照

      viewer.scene.globe.enableLighting = false;

      //地形深度

      viewer.scene.globe.depthTestAgainstTerrain = false;


      var level;//当前地图级别


      //设置相机主视角

      function SetHoumeViewerjd(west, south, east, north) {

        //参数为经纬度

        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = new Cesium.Rectangle.fromDegrees(west, south, east, north);

        if (Cesium.defined(viewer)) {

          var hw1 = viewer.camera.computeViewRectangle();

          console.log("设置后相机视角", hw1);

        }

      }



      //加载poi数据

      function LoadJsonData() {

        getJSON('../Apps/SampleData/geojson/cadshp/上海市-矢量地图_百度POI (V1.0)1.json', (geojson) => {

          console.log

最低0.47元/天解锁文章