var viewer = new Cesium.Viewer('cesiumContainer',{sceneMode:Cesium.SceneMode.SCENE2D}); var scene=viewer.scene; var primitives=scene.primitives; var shapes={}; function drawPolyline(id, points, color) { var polylines = new Cesium.PolylineCollection(); var p = { id: id, positions: points, material: Cesium.Material.fromType('Color', { color: color }), width:2 }; polylines.add(p); var result=primitives.add(polylines); return result; } function drawPolygon(id, points, color) { var polygon = new Cesium.Polygon({ id: id, positions: points, material: Cesium.Material.fromType('Color', { color: color }) }); var result=primitives.add(polygon); return result; } function drawShape(id, polygonPoints, polylinePoints, polygonColor,polylineColor){ var polygon=drawPolygon(id,polygonPoints,polygonColor); var polyline=drawPolyline(id,polylinePoints,polylineColor); return {polygon:polygon, polyline:polyline}; } function raiseToTop(shape){ var polygon=shape.polygon; var polyline=shape.polyline; primitives.lowerToBottom(polygon); primitives.raiseToTop(polyline); } /// var id1='shape1'; var polygonPoints1=[Cesium.Cartesian3.fromDegrees(-100,50), Cesium.Cartesian3.fromDegrees(-90,50), Cesium.Cartesian3.fromDegrees(-90,45), Cesium.Cartesian3.fromDegrees(-100,45), Cesium.Cartesian3.fromDegrees(-100,50)]; var polylinePoints1=[Cesium.Cartesian3.fromDegrees(-99.9,49.9), Cesium.Cartesian3.fromDegrees(-90.1,49.9), Cesium.Cartesian3.fromDegrees(-90.1,45.1), Cesium.Cartesian3.fromDegrees(-99.9,45.1), Cesium.Cartesian3.fromDegrees(-99.9,49.9)]; var polygonColor1=Cesium.Color.RED; var polylineColor1=Cesium.Color.GOLD; var shape1=drawShape(id1,polygonPoints1, polylinePoints1, polygonColor1,polylineColor1); shapes[id1]=shape1; var id2='shape2'; var polygonPoints2=[Cesium.Cartesian3.fromDegrees(-95,48), Cesium.Cartesian3.fromDegrees(-85,48), Cesium.Cartesian3.fromDegrees(-85,43), Cesium.Cartesian3.fromDegrees(-95,43), Cesium.Cartesian3.fromDegrees(-95,48)]; var polylinePoints2=[Cesium.Cartesian3.fromDegrees(-94.9,47.9), Cesium.Cartesian3.fromDegrees(-85.1,47.9), Cesium.Cartesian3.fromDegrees(-85.1,43.1), Cesium.Cartesian3.fromDegrees(-94.9,43.1), Cesium.Cartesian3.fromDegrees(-94.9,47.9)]; var polygonColor2=Cesium.Color.LIME; var polylineColor2=Cesium.Color.CYAN; var shape2=drawShape(id2,polygonPoints2, polylinePoints2, polygonColor2,polylineColor2); shapes[id2]=shape2; var id3='shape3'; var polygonPoints3=[Cesium.Cartesian3.fromDegrees(-93,47), Cesium.Cartesian3.fromDegrees(-88,47), Cesium.Cartesian3.fromDegrees(-88,40), Cesium.Cartesian3.fromDegrees(-93,40), Cesium.Cartesian3.fromDegrees(-93,47)]; var polylinePoints3=[Cesium.Cartesian3.fromDegrees(-92.9,46.9), Cesium.Cartesian3.fromDegrees(-88.1,46.9), Cesium.Cartesian3.fromDegrees(-88.1,40.1), Cesium.Cartesian3.fromDegrees(-92.9,40.1), Cesium.Cartesian3.fromDegrees(-92.9,46.9)]; var polygonColor3=Cesium.Color.DARKORANGE; var polylineColor3=Cesium.Color.FUSCHIA; var shape3=drawShape(id3,polygonPoints3, polylinePoints3, polygonColor3,polylineColor3); shapes[id3]=shape3; /// var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function(movement) { var p = scene.pick(movement.position); if (Cesium.defined(p) && primitives.contains(p.primitive)) { console.log('picking shape id='+p.id); var id=p.id; var shape=shapes[id]; raiseToTop(shape); } }, Cesium.ScreenSpaceEventType.LEFT_DOWN); Sandcastle.addToolbarButton('raise shape1 to top', function() { raiseToTop(shape1); }); Sandcastle.addToolbarButton('raise shape2 to top', function() { raiseToTop(shape2); }); Sandcastle.addToolbarButton('raise shape3 to top', function() { raiseToTop(shape3); });