Hello. I put the code of the plugin I mentioned in the title in my code where I showed gejson assets, but none of the plugin features came. Maybe it is because of Cesium version differency. How do I get to use the drawing feature of this plugin?
plugin: GitHub - leforthomas/cesium-drawhelper: A shape editor for Cesium.
// My Codee ////////////////////////////
Asset Management @import url(/static/Cesium/Build/Cesium/Widgets/widgets.css); @import url(/static/Cesium/drawhelper/DrawHelper.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } /////////////////////////////////////////////////////////////////////////////////////////////////////////// var viewer = new Cesium.Viewer("cesiumContainer", {
navigationInstructionsInitiallyVisible: false,
sceneMode: Cesium.SceneMode.SCENE3D,
timeline: false,
animation: false,
});
var dataSource = Cesium.GeoJsonDataSource.load(
"/assets"
);
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);
// Added plugin code part but not working ///////////////////////////////////////////////////////////////////////////////////////
function start() {
// create the almighty cesium widget
var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer', {scene3DOnly: true});
var scene = cesiumWidget.scene;
// add terrain elevation
var cesiumTerrainProviderHeightmaps = new Cesium.CesiumTerrainProvider({
url : 'https://cesiumjs.org/tilesets/terrain/smallterrain',
credit : 'Terrain data courtesy Analytical Graphics, Inc.'
});
scene.terrainProvider = cesiumTerrainProviderHeightmaps;
// start the draw helper to enable shape creation and editing
var drawHelper = new DrawHelper(cesiumWidget);
var toolbar = drawHelper.addToolbar(document.getElementById("toolbar"), {
buttons: ['marker', 'polyline', 'polygon', 'circle', 'extent']
});
toolbar.addListener('markerCreated', function(event) {
loggingMessage('Marker created at ' + event.position.toString());
// create one common billboard collection for all billboards
var b = new Cesium.BillboardCollection();
scene.primitives.add(b);
var billboard = b.add({
show : true,
position : event.position,
pixelOffset : new Cesium.Cartesian2(0, 0),
eyeOffset : new Cesium.Cartesian3(0.0, 0.0, 0.0),
horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
verticalOrigin : Cesium.VerticalOrigin.CENTER,
scale : 1.0,
image: '/static/Cesium/drawhelper/img/glyphicons_242_google_maps.png',
color : new Cesium.Color(1.0, 1.0, 1.0, 1.0)
});
billboard.setEditable();
});
toolbar.addListener('polylineCreated', function(event) {
loggingMessage('Polyline created with ' + event.positions.length + ' points');
var polyline = new DrawHelper.PolylinePrimitive({
positions: event.positions,
width: 5,
geodesic: true
});
scene.primitives.add(polyline);
polyline.setEditable();
polyline.addListener('onEdited', function(event) {
loggingMessage('Polyline edited, ' + event.positions.length + ' points');
});
});
toolbar.addListener('polygonCreated', function(event) {
loggingMessage('Polygon created with ' + event.positions.length + ' points');
var polygon = new DrawHelper.PolygonPrimitive({
positions: event.positions,
material : Cesium.Material.fromType('Checkerboard')
});
scene.primitives.add(polygon);
polygon.setEditable();
polygon.addListener('onEdited', function(event) {
loggingMessage('Polygon edited, ' + event.positions.length + ' points');
});
});
toolbar.addListener('circleCreated', function(event) {
loggingMessage('Circle created: center is ' + event.center.toString() + ' and radius is ' + event.radius.toFixed(1) + ' meters');
var circle = new DrawHelper.CirclePrimitive({
center: event.center,
radius: event.radius,
material: Cesium.Material.fromType(Cesium.Material.RimLightingType)
});
scene.primitives.add(circle);
circle.setEditable();
circle.addListener('onEdited', function(event) {
loggingMessage('Circle edited: radius is ' + event.radius.toFixed(1) + ' meters');
});
});
toolbar.addListener('extentCreated', function(event) {
var extent = event.extent;
loggingMessage('Extent created (N: ' + extent.north.toFixed(3) + ', E: ' + extent.east.toFixed(3) + ', S: ' + extent.south.toFixed(3) + ', W: ' + extent.west.toFixed(3) + ')');
var extentPrimitive = new DrawHelper.ExtentPrimitive({
extent: extent,
material: Cesium.Material.fromType(Cesium.Material.StripeType)
});
scene.primitives.add(extentPrimitive);
extentPrimitive.setEditable();
extentPrimitive.addListener('onEdited', function(event) {
loggingMessage('Extent edited: extent is (N: ' + event.extent.north.toFixed(3) + ', E: ' + event.extent.east.toFixed(3) + ', S: ' + event.extent.south.toFixed(3) + ', W: ' + event.extent.west.toFixed(3) + ')');
});
});
var logging = document.getElementById('logging');
function loggingMessage(message) {
logging.innerHTML = message;
}
}
</script>