加载图标和文字标注

addPoints(data) {if (data && data.length > 0) {let datasource = map_common_addDatasouce("point");datasource.entities.removeAll();data.forEach(item => {datasource.entities.add({position: Cesium.Cartesian3.fromDegrees(item.coordinate[0], item.coordinate[1], item.coordinate[2]),//图标位置billboard: {image: `/images/marker.png`,//图标地址horizontalOrigin: Cesium.HorizontalOrigin.LEFT,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,disableDepthTestDistance: Number.POSITIVE_INFINITY,pixelOffset: new Cesium.Cartesian2(-6, 6),scale: 0.8,},label: {scale: 1,font: "bolder 16px sans-serif",style: Cesium.LabelStyle.FILL_AND_OUTLINE,text: item.name,//图标名称fillColor: Cesium.Color.fromCssColorString("#ffffff"),pixelOffset: new Cesium.Cartesian2(0, -60)},properties: new Cesium.PropertyBag({type: "point",details: item})});})}
}

数据格式：

let data = [{id: '1',name: '摄像头1',coordinate: [116.5237896183484, 40.23425089061218, 1]},{id: '2',name: '摄像头2',coordinate: [116.52442547004496, 40.234225534772044, 1]},{id: '3',name: '摄像头3',coordinate: [116.52386941878123, 40.233503276564576, 1]}];

加载报警点动画效果

  addWarnings(data) {let datasource = map_common_addDatasouce("warning");datasource.entities.removeAll();let x = 1;let flog = true;datasource.entities.add({position: Cesium.Cartesian3.fromDegrees(data.coordinate[0], data.coordinate[1], data.coordinate[2]),//通过动态改变缩放大小实现闪烁动画1billboard: {image: `/images/bg.png`,pixelOffset: new Cesium.Cartesian2(0, -50),scale: new Cesium.CallbackProperty(function () {if (flog) {x = x - 0.03;if (x <= 0.2) {flog = false;}} else {x = x + 0.03;if (x >= 0.8) {flog = true;}}return x;}, false)},properties: new Cesium.PropertyBag({type: "warning",details: data})});datasource.entities.add({position: Cesium.Cartesian3.fromDegrees(data.location[0], data.location[1], data.location[2]),billboard: {image: `/images/marker.png`,verticalOrigin: Cesium.VerticalOrigin.BOTTOM}})}

数据格式：

let data = {id: '1',name: '报警点1',coordinate: [116.52329742014058, 40.234779669561995, 1]}

图片资源：

实现效果：

加载线

addLine(data) {if (data && data.rangerArr && data.rangerArr.length > 0) {let datasource = map_common_addDatasouce("line");datasource.entities.removeAll();let positions = Array.prototype.concat.apply([],data.rangerArr);datasource.entities.add(new Cesium.Entity({polyline: {positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),width: 5.0,//纯色/* material: Cesium.Color.fromCssColorString("#73f9f0").withAlpha(1.0),*///发光效果material: new Cesium.PolylineGlowMaterialProperty({color: Cesium.Color.fromCssColorString("#fff"),glowPower: 0.1})},properties: new Cesium.PropertyBag({type: "line",details: data})}));}
}

数据格式：

let data = {id: '1',name: '边界',rangerArr: [[116.52320712206836, 40.23406811024757, 5], [116.52321177601786, 40.23347668875855, 5], [116.52452838827061, 40.23347827970169, 5], [116.52453120516144, 40.23515431118559, 5], [116.52321855758989, 40.23407917327679, 5], [116.52320712206836, 40.23406811024757, 5]]
};

实现效果：

加载尾迹线（superMap）

/*** 加载成都市道路*/
let datasouce = map_common_addDatasouce('line');
let datasouce_1 = map_common_addDatasouce('line_1');
jsonParse("./json/home/成都市.json").then((val) => {val.forEach((t) => {if (t.properties.GB === 430501) {//加载部分道路let coor = t.geometry.coordinates;coor = coor.filter((t) => {return t.push(5);});coor = Array.prototype.concat.apply([], coor);datasouce.entities.add({polyline: {positions: Cesium.Cartesian3.fromDegreesArrayHeights(coor),material: Cesium.Color.CYAN},});datasouce_1.entities.add({polyline: {positions: Cesium.Cartesian3.fromDegreesArrayHeights(coor),width: 2,material: new Cesium.PolylineTrailMaterialProperty({ // 尾迹线材质color: Cesium.Color.CYAN,trailLength: 0.2,period: 0.5})},});}});});

实现效果：

加载面

addPoly(data) {if (data && data.rangerArr && data.rangerArr.length > 0) {let datasource = map_common_addDatasouce("poly");datasource.entities.removeAll();let positions = Array.prototype.concat.apply([],data.rangerArr);let x = 1;let flog = truedatasource.entities.add(new Cesium.Entity({polygon: {height: 2000,hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(positions),//纯色/*material: Cesium.Color.fromCssColorString('73f9f0').withAlpha(1),*///图片/*material: new Cesium.ImageMaterialProperty({image: "/images/home/北京市.png",}),*///通过动态改变透明度实现闪烁动画material: new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(function () {if (flog) {x = x - 0.03;if (x <= 0.2) {flog = false;}} else {x = x +  0.03;if (x >= 0.8) {flog = true;}}return Cesium.Color.RED.withAlpha(x);}, false)),clampToS3M: true, //面贴3dTiles模型,若为gltf模型，该参数不生效，则结合extrudedHeight和height属性拉成体    outline: true,outlineColor: Cesium.Color.fromCssColorString("#a2ffba"),outlineWidth: 1.0,//范围面数据设置outline为true时，宽度只能显示1px//控制显隐高度范围distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100000,1000000.0),},properties: new Cesium.PropertyBag({type: "poly",details: data})}));}
}

数据格式：

let data = {id: '1',name: '范围',rangerArr: [[116.52320712206836, 40.23406811024757, 5], [116.52321177601786, 40.23347668875855, 5], [116.52452838827061, 40.23347827970169, 5], [116.52453120516144, 40.23515431118559, 5], [116.52321855758989, 40.23407917327679, 5], [116.52320712206836, 40.23406811024757, 5]]
};

实现效果：

加载背景图

loadCircle() {let datasource = map_common_addDatasouce("circleImage");datasource.entities.add({position: Cesium.Cartesian3.fromDegrees(93.97039653185051, 29.950970087104018, 4000),ellipse: {height: 3000,semiMajorAxis: 220000,semiMinorAxis: 220000,material: new Cesium.ImageMaterialProperty({image: "/images/map/circle.png",transparent: true,color: new Cesium.Color(0.4, 0.4, 0.4, 0.8),}),stRotation: 0 //旋转角度},});
}

实现效果：

加载面+围栏实现立体分层效果

/*** 加载北京市区域*/
function mapView_BeiJing() {jsonParse("/json/home/北京市.json").then((val) => {if (val && val.length > 0) {let datasource = map_common_addDatasouce(datasourceName.BEIJING_DATASOURCE);val.forEach((el) => {let positions = Array.prototype.concat.apply([],el.geometry.coordinates[0]);datasource.entities.add({polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArray(positions),height: 4000,material: new Cesium.ImageMaterialProperty({image: "/imgs/home/北京市.png",}),outline: false}});let positions2 = el.geometry.coordinates[0].map(item => {item.push(initHeight);return item})let positions3 = Array.prototype.concat.apply([],positions2);datasource.entities.add({wall: {positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions3),material: new Cesium.ImageMaterialProperty({image: "/imgs/home/组.png",repeat: new Cesium.Cartesian2(1.0, 1),transparent: true,}),outline: false},});});}});
}

图片资源：

实现效果：

加载渐变色圆柱

/*** 颜色渐变*/
getColorRamp(elevationRamp, isVertical = true) {let ramp = document.createElement('canvas');ramp.width = isVertical ? 1 : 100;ramp.height = isVertical ? 100 : 1;let ctx = ramp.getContext('2d');let values = elevationRamp;let grd = isVertical ? ctx.createLinearGradient(0, 0, 0, 100) : ctx.createLinearGradient(0, 0, 100, 0);grd.addColorStop(values[0], '#0084FF');grd.addColorStop(values[1], '#00FCFF');grd.addColorStop(values[2], '#00FF7E');ctx.globalAlpha = 0.3;ctx.fillStyle = grd;if (isVertical)ctx.fillRect(0, 0, 1, 100);elsectx.fillRect(0, 0, 100, 1);return ramp;
}
addCylinder(data) {if (data && data.length > 0) {let datasource = map_common_addDatasouce("point");datasource.entities.removeAll();data.forEach(item => {let center = item.coordinates;let radius = 1;//半径let options = {steps: 64, units: 'kilometers', properties: {foo: 'bar'}};//引入turf构建范围面    //import circle from '@turf/circle';let circleData = circle(center, radius, options);let height = item.rainValue;//高度let wallPositions = circleData.geometry.coordinates[0].map(item => {return [...item, height]});let positions = Array.prototype.concat.apply([],wallPositions);//通过围墙实现渐变填充datasource.entities.add({wall: {positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),material: new Cesium.ImageMaterialProperty({image: getColorRamp([0.1, 0.5, 1.0], true, "county_border_line"),repeat: new Cesium.Cartesian2(1.0, 1),transparent: false,}),minimumHeights: wallPositions.map(() => 10500),outline: false,}});//填充纯色围墙datasource.entities.add({position: Cesium.Cartesian3.fromDegrees(item.coordinates[0], item.coordinates[1], 10500),cylinder: {length: height - 10500,heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,topRadius: 990,bottomRadius: 990,material: Cesium.Color.fromCssColorString('#0077AF'),outline: false}})})}
}

数据格式：

let data = [{id: '1',name: '雨量柱1',coordinate: [116.5237896183484, 40.23425089061218],rainValue: 14000},{id: '2',name: '雨量柱2',coordinate: [116.52442547004496, 40.234225534772044],rainValue: 11000},{id: '3',name: '雨量柱3',coordinate: [116.52386941878123, 40.233503276564576],rainValue: 8000}];

实现效果：

加载扇形图

/*** 加载扇形*/
export function drawBasePoint(viewer, data) {let datasource = map_common_addDatasouce(viewer, "point");datasource.entities.removeAll();data.forEach(item => {let color = "";if (item.color === 1) {color = "#00BFFF";} else {if (item.type == "4G") {color = "#008000";} else if (item.type == "5G") {color = "#000099";}}datasource.entities.add({name : '扇形',position : Cesium.Cartesian3.fromDegrees(item.lng, item.lat, 0),orientation : Cesium.Transforms.headingPitchRollQuaternion(Cesium.Cartesian3.fromDegrees(item.lng, item.lat, 0),//Cesium.Math.toRadians(item.aoa) item.aoa是扇形的朝向new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(item.aoa), 0, 0.0)),ellipsoid : {radii : new Cesium.Cartesian3(50.0, 50.0, 50.0),  // 扇形半径innerRadii : new Cesium.Cartesian3(1.0, 1.0, 1.0), // 内半径minimumClock : Cesium.Math.toRadians(-40), // 左右偏角maximumClock : Cesium.Math.toRadians(10),minimumCone : Cesium.Math.toRadians(75),// 上下偏角  可以都设置为90maximumCone : Cesium.Math.toRadians(90),material : Cesium.Color.fromCssColorString(color).withAlpha(0.2),outline : true,outlineColor: Cesium.Color.fromCssColorString(color)}});})
}

数据格式：

data = [{aoa: 50,cell_id: undefined,cell_name: undefined,color: null,lat: 30.62841,lng: 104.06939,name: "D-ZRH-1",type: "5G"},{aoa: 130,cell_id: undefined,cell_name: undefined,color: null,lat: 30.62841,lng: 104.06939,name: "D-ZRH-2",type: "5G",},{aoa: 270,cell_id: undefined,cell_name: undefined,color: null,lat: 30.62841,lng: 104.06939,name: "D-ZRH-3",type: "5G"}]

实现效果：

以上map_common_addDatasouce， jsonParse方法参考https://blog.csdn.net/weixin_39150852/article/details/119676613

Cesium加载entities实体，包括文字标注,图标(动态缩放效果),线(尾迹线效果)，面(动态闪烁效果)，背景图，围栏(立体分层效果)，渐变色圆柱，扇形图等相关推荐

cesium加载批量模型
cesium加载批量模型 class CreateModel {constructor() { }// 添加单条数据addEntity(item) {// 删除实体// viewer.entities ...
Cesium加载建筑物模型（shp转Geojson\3Dtiles）
本文主要介绍cesium加载Geojson和3dtile格式的建筑物模型文件,除此之外还介绍了Cesium工具栏的屏蔽方法.天地图的加载.地球初始状态设置等几个部分的内容,其中又不乏参照.优化诸如: ...
cesium加载 gltf模型
cesium加载 gltf模型首先自己配置一个iis环境 :http://www.xitongcheng.com/jiaocheng/win10_article_60912.html,其他环境比如 ...
CESIUM加载glb的模型
CESIUM加载glb的模型 1.首先有一个glb格式的模型 // 加载gltf的模型 //url模型路径可以是.glb或者gltf等,height距地高度0为贴地 function createM ...
cesium加载动图方案三：通过apng-js库实现
1.项目场景实际开发中我们经常会有动图加载的需求,而Cesium不支持纹理贴动图,怎么样基于Cesium实现动图的加载,值得我们研究一波.cesium加载gif格式的动图有些场景能够满足我们的需求, ...
QGIS离线GeoJSON数据，使用Cesium加载并根据楼层高度拉伸（weixin公众号【图说GIS】）
前言往往好多事情是需求推动的,正好一个网友在群里问到"怎么让Cesium加载GeoJSON的白膜并贴在地形上?",联系到他,要了他的数据,完成了代码并测试通过.正好出差,而且一个 ...
Cesium加载模型两种方式
Cesium加载模型两种方式代码如下 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
cesium加载GeoJSON
cesium加载GeoJSON 介绍GeoJSON GeoJson是Json数据(键值对),它是针对地理数据的一个变种具体的参考文档:GeoJSON 面要素多边形json数据 {"typ ...
Cesium加载影像、谷歌影像、地形图
一.Cesium默认加载影像 <div id="cesiumContainer"></div> <script> var viewer = ne ...

Cesium加载entities实体，包括文字标注,图标(动态缩放效果),线(尾迹线效果)，面(动态闪烁效果)，背景图，围栏(立体分层效果)，渐变色圆柱，扇形图等

加载图标和文字标注

加载报警点动画效果

加载线

加载尾迹线（superMap）

加载面

加载背景图

加载面+围栏实现立体分层效果

加载渐变色圆柱

加载扇形图

Cesium加载entities实体，包括文字标注,图标(动态缩放效果),线(尾迹线效果)，面(动态闪烁效果)，背景图，围栏(立体分层效果)，渐变色圆柱，扇形图等相关推荐

最新文章

热门文章