cesium 添加geojson数据，创建白模，创建label标签，并使用canvas自定义聚合背景图片

// data ：geojson数据
dbcBuliding(data = this.option.geojsonData) {let _this = this// let viewer = _this.viewer;let promise = Cesium.GeoJsonDataSource.load(data, {clampToGround: true,});promise.then(dataSource => {dataSource.name = "bdc"//dataSources添加成功，监听// _this.viewer.dataSources.dataSourceAdded.addEventListener(function (a, b) {//   console.log("addEventListener", a, b)// })viewer.dataSources.add(dataSource);_this.dataSource_dbc = dataSource_this.addEntites_Geojson(dataSource) // 创建实体,label标签_this.customStyle(dataSource) //标签聚合}).otherwise(function (error) {console.log(error);});}customStyle(dataSource) {let enabled = true;///是否聚合let pixelRange = 30;//聚合范围（单位px）let minimumClusterSize = 3;//最小聚合数值（小于等于该数值，不聚合）dataSource.clustering.enabled = enabled;//是否聚合dataSource.clustering.pixelRange = pixelRange;//聚合范围（单位px）dataSource.clustering.minimumClusterSize = minimumClusterSize;//最小屏幕聚合对象数值（小于等于该数值，不聚合）let removeListener;const pin50 = drawCircle("50+", 3)const pin40 = drawCircle("40+", 2)const pin30 = drawCircle("30+", 0)const pin20 = drawCircle("20+", 0)const pin10 = drawCircle("10+", 0)const singleDigitPins = new Array(8);for (let i = 0; i < singleDigitPins.length; ++i) {singleDigitPins[i] = drawCircle("" + (i + 2), 0, 16)}let clustermStyle = () => {if (Cesium.defined(removeListener)) {removeListener();removeListener = undefined;} else {removeListener = dataSource.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {cluster.label.show = false;cluster.billboard.show = true;cluster.billboard.id = cluster.label.id;cluster.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 10000.0),cluster.billboard.verticalOrigin =Cesium.VerticalOrigin.BOTTOM;if (clusteredEntities.length >= 50) {cluster.billboard.image = pin50;} else if (clusteredEntities.length >= 40) {cluster.billboard.image = pin40;} else if (clusteredEntities.length >= 30) {cluster.billboard.image = pin30;} else if (clusteredEntities.length >= 20) {cluster.billboard.image = pin20;} else if (clusteredEntities.length >= 10) {cluster.billboard.image = pin10;}else {cluster.billboard.image =singleDigitPins[clusteredEntities.length - 2];}});}// force a re-cluster with the new stylingconst pixelRange = dataSource.clustering.pixelRange;dataSource.clustering.pixelRange = 0;dataSource.clustering.pixelRange = pixelRange;}clustermStyle()}
// text 文本，key判断颜色，centerx让文本居中1位数6/2位数16
/ drawCircle(text, key, centerx = 6) {const canvas_option = ["rgba(0,191,255,0.8)", // 深蓝色"rgba(0,128,0,0.8)", //纯绿"rgba(255,165,0,0.8)", // 橙色 "rgba(220,20,60,0.8)", // 红色]var canvas = document.createElement('canvas')canvas.width = 42canvas.height = 42let context2D = canvas.getContext('2d')context2D.save();context2D.beginPath();context2D.arc(21, 21, 20, 0, 2 * Math.PI);context2D.fillStyle = canvas_option[key]//设置图形的填充颜色context2D.fill()context2D.closePath();context2D.restore();context2D.stroke();context2D.save(); //save和restore可以保证样式属性只运用于该段canvas元素// context2D.strokeStyle = canvas_option[key]; //设置描边样式context2D.font = "20px Arial"; //设置字体大小和字体context2D.fillText(text, centerx, 28); //填充线context2D.stroke(); //执行绘制context2D.restore();context2D.closePath()context2D.restore()let a = canvas.toDataURL()return a
}

cesium 添加geojson数据，创建白模，创建label标签，并使用canvas自定义聚合背景图片相关推荐

Cesium添加geojson数据及WMS在线图层服务
地图初始化及geojson数据 html部分 <div id="GlobeView"></div>css #GlobeView{position: abso ...
第六章 Cesium学习入门之添加Geojson数据（dataSource）
从0开始的Cesium 第一章 Cesium学习入门之搭建Vite+Vue3+Cesium开发环境第二章 Cesium学习入门之搭建Cesium界面预览和小控件隐藏第三章 Cesium学习入门之地 ...
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决一. 页面显示空白二. 背景图片不显示一. 页面显示空白解决方法: config > index.js ...
WebGL，Cesium以及GeoJSON数据的简单介绍
目录一.WebGL 二.Cesium (1)Cesium:一个用于显示三维地球和地图的开源js库. (2)Cesium的基本功能: (3)cesium的依赖性与技术标准 (4)Cesium与周边产品 ...
【Cesium】智慧城市建筑白模泛光特效
今天我们来做下智慧城市建筑群泛光的效果.效果如下图所示: 1.素材准备 (1)白模的3dtiles数据.这个可以通过cesiumlab来生成,一般情况下,有shapefile面数据,即可通过cesiu ...
cesium中geoJSON数据的生成
0.推荐工具 1.首先推荐一个生成geoJSON文件的工具,你可以在地图上随意画图形,然后会给你生成对应的geoJSON文件,特别好用. https://geojson.io/#map=2/0/20 ...
Cesium加载GeoJson数据（shp转化的json数据）
1.shp转换成json格式此处整理了两种shp转为json格式的方式:一是使用工具:二是使用ArcGIS进行转换. 1.1.ArcGIS转换 1.使用ArcGIS将shp文件的地理坐标设置为WGS ...
cesium创建、添加json数据
一.shp转换成json格式第一步:使用ArcGIS将shp文件的地理坐标设置为WGS_1984并导出为shp数据. 1.打开ArcGIS的Toolbox工具箱,选择"定义投影" ...
mysql创建数据库时候同时创建表空间_mysql::创建多个表空间添加记录数据会添加到哪个表空间中?...
问题:创建多个表空间添加记录数据会添加到哪个表空间中答:后一个 drwx------ 2 mysql mysql 4.0K Apr 26 08:04 demo -rw-rw---- 1 mysql ...

cesium 添加geojson数据，创建白模，创建label标签，并使用canvas自定义聚合背景图片

cesium 添加geojson数据，创建白模，创建label标签，并使用canvas自定义聚合背景图片相关推荐

最新文章

热门文章