加载图标和文字标注
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]),
//通过动态改变缩放大小实现闪烁动画1
billboard: {
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 = true
datasource.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);
else
ctx.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),// 上下偏角 可以都设置为90
maximumCone : 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