Hello everyone,
I encountered a weird graphical artifact. The label of entities is surrounded by small black dots. The issue first occured when I was building the project using webpack (according to https://cesium.com/docs/tutorials/cesium-and-webpack/ and https://github.com/CesiumGS/cesium-webpack-example). The issue itself is not reproducable in cesium sandcastle and must somehow be caused by webpack / the webpack config. I don’t get any errors while building the project or viewing it in the browser.
The issue persists in chrome and firefox, im using windows and the latest recommended node.js version and the latest node.js dependencies:
"dependencies": {
"cesium": "^1.80.0",
"express": "^4.17.1"
},
"devDependencies": {
"copy-webpack-plugin": "^8.1.0",
"css-loader": "^5.2.0",
"source-map-loader": "^2.0.1",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0"
}
(snippet from package.json).
Here are some pictures of the artifact:
.
I’m gonna share a simplified code example where the issue still persists, since it might be useful to find the error:
webpack.config.js:
const webpack = require("webpack");
const CopywebpackPlugin = require("copy-webpack-plugin");
const cesiumBuild = "./node_modules/cesium/Build/Cesium/";
module.exports = {
entry: "./src/cesiumtest.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "cesiumtest.js",
library: {
type: "umd",
name: "cesiumtest"
},
// Needed to compile multiline strings in Cesium
sourcePrefix: ""
},
amd: {
// Enable webpack-friendly use of require in Cesium
toUrlUndefined: true
},
module: {
rules: [{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}, {
test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: ["url-loader"]
}]
},
plugins: [
// Copy Cesium Assets, Widgets, and Workers to a static directory
new CopywebpackPlugin({
patterns: [
{ from: path.join(cesiumBuild, "Workers"), to: "Workers" },
{ from: path.join(cesiumBuild, "Assets"), to: "Assets" },
{ from: path.join(cesiumBuild, "Widgets"), to: "Widgets" }
]
}),
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify("/dist/"),
})
]
};
/src/cesiumTest.js:
import * as Cesium from "../node_modules/cesium/Source/Cesium";
import "../node_modules/cesium/Build/Cesium/Widgets/widgets.css";
Cesium.Ion.defaultAccessToken = "........................................................."; //removed for obvious reasons
export class cesiumTest {
constructor() {
var options = {
animation: false,
baseLayerPicker: false,
fullscreenButton: false,
vrButton: false,
geocoder: false,
homeButton: false,
timeline: false,
infoBox: true,
sceneModePicker: false,
selectionIndicator: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
sceneMode: Cesium.SceneMode.SCENE3D
};
var viewer = new Cesium.Viewer("cesiumContainer", options);
if (viewer.scene.highDynamicRangeSupported) {
viewer.scene.highDynamicRange = true;
}
viewer.scene.postProcessStages.fxaa.enabled = true;
var coordinates = [
5,
10,
10000
];
var entity = viewer.entities.add({
name: "Testlabel",
description: "\
Longitude: "+ coordinates[0] + " °<br>\
latitude: "+ coordinates[1] + " °",
position: Cesium.Cartesian3.fromDegreesArrayHeights(coordinates)[0],
point: {
pixelSize: 6,
color: Cesium.Color.RED,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2
},
label: {
text: "TestLabel",
font: "14pt arial",
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -9)
},
viewFrom: new Cesium.Cartesian3(0, 0, 40000000)
});
}
}
index.html:
<head>
<script src="./dist/cesiumtest.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
let cesiumTest = new cesiumtest.cesiumTest();
</script>
</body>
</html>
Thanks for helping me in advance,
Andreas.