this.datasource = new Cesium.CustomDataSource("peopleNumLayer");
this.viewer.dataSources.add(this.datasource);
代码调用
let promise = this.createRectangle(
ctr.name,
i,
{
color: "white",
size: "300px",
width: "1000",
height: "500",
stroke: "transparent",
fill: "transparent",
strokeW: "1",
},
50,
{
longitude: ctr.coord[0],
latitude: ctr.coord[1],
}
);
promise.then((en) => {
this.entities.push(en);
});
//计算svg偏移量
getCoordinateOffset(width, height, pos) {
//暂定1px=>0.0002度
const ratio = 0.00001;
return {
w: width * ratio,
h: height * ratio * Math.cos((pos.latitude * Math.PI) / 180),
};
},
//svg贴图加载
createRectangle(name, conId, attr, value, pos) {
let $this = this;
return new Promise(function(resolve) {
let svgStr = `<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="${attr.width}" height="${
attr.height
}" viewBox=" 0 0 ${attr.width} ${
attr.height
}" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>
</defs>
<rect width="${attr.width}" height="${
attr.height
}" stroke="${attr.stroke}" stroke-width="${attr.strokeW}" fill="${
attr.fill
}" filter="url(#f1)" />
<text x="${attr.width / 2}" y="${attr.height /
1.5}" text-anchor="middle" style="fill:${attr.color};font-size:${
attr.size
};font-weight:bold;">${value}</text>
</svg>`;
const textImage = new Image();
textImage.src =
"data:image/svg+xml;base64," +
window.btoa(unescape(encodeURIComponent(svgStr)));
textImage.onload = function() {
let imgRange = $this.getCoordinateOffset(
textImage.width,
textImage.height,
pos
);
let wOffset = imgRange.w / 2;
let hOffset = imgRange.h / 2;
let en = $this.datasource.entities.add({
name: name,
conId: conId,
pos: pos,
offsetWidth: textImage.width,
offsetHeight: textImage.height,
fixWidth: wOffset,
fixHeight: hOffset,
rectangle: {
material: this.src,
granularity: Cesium.Math.PI_OVER_FOUR,
coordinates: Cesium.Rectangle.fromDegrees(
+pos.longitude - wOffset,
+pos.latitude - hOffset,
+pos.longitude + wOffset,
+pos.latitude + hOffset
),
},
});
resolve(en);
};
});
},