mirror of
https://github.com/ethan-zf/cesium-plot-js.git
synced 2025-06-23 19:17:29 +00:00
show,hide,remove
This commit is contained in:
ethan
parent
f944d2e68e
commit
9497a08cbd
@ -3,10 +3,10 @@ import CesiumPlot from '../src';
|
||||
import * as Cesium from './cesium/index';
|
||||
|
||||
// let raster = new Cesium.ArcGisMapServerImageryProvider({
|
||||
// url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
|
||||
// url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
|
||||
// });
|
||||
|
||||
let keda = new Cesium.UrlTemplateImageryProvider({
|
||||
let raster = new Cesium.UrlTemplateImageryProvider({
|
||||
url: 'https://10.68.8.41:9043/kmap-server/gridMap/tile/{z}/{y}/{x}',
|
||||
// url: 'http://10.68.8.58:8080/3d/dom2/{z}/{x}/{y}.png'
|
||||
});
|
||||
@ -22,8 +22,8 @@ const viewer = new Cesium.Viewer('cesiumContainer', {
|
||||
timeline: false,
|
||||
navigationHelpButton: false,
|
||||
baseLayerPicker: false,
|
||||
imageryProvider: raster,
|
||||
// imageryProvider: raster,
|
||||
imageryProvider: keda,
|
||||
contextOptions: {
|
||||
requestWebgl2: true,
|
||||
},
|
||||
@ -35,56 +35,81 @@ viewer.scene.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(107.857, 35.594498, 7000000),
|
||||
});
|
||||
|
||||
const getCameraInfo = () => {
|
||||
var position = viewer.camera.position;
|
||||
var ellipsoid = viewer.scene.globe.ellipsoid;
|
||||
var cartographic = ellipsoid.cartesianToCartographic(position);
|
||||
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
||||
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
||||
console.error('camera position:', longitude, latitude);
|
||||
var position = viewer.camera.position;
|
||||
var ellipsoid = viewer.scene.globe.ellipsoid;
|
||||
var cartographic = ellipsoid.cartesianToCartographic(position);
|
||||
var height = cartographic.height;
|
||||
console.error('camera height:', height);
|
||||
};
|
||||
|
||||
let geometry: any;
|
||||
const buttonGroup = document.getElementById('button-group') as HTMLElement;
|
||||
buttonGroup.onclick = (evt) => {
|
||||
const targetElement = evt.target as HTMLElement;
|
||||
switch (targetElement.id) {
|
||||
case 'drawFineArrow':
|
||||
new CesiumPlot.FineArrow(Cesium, viewer, {
|
||||
geometry = new CesiumPlot.FineArrow(Cesium, viewer, {
|
||||
fillColor: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.5)'),
|
||||
});
|
||||
break;
|
||||
case 'drawAttackArrow':
|
||||
new CesiumPlot.AttackArrow(Cesium, viewer, {
|
||||
geometry = new CesiumPlot.AttackArrow(Cesium, viewer, {
|
||||
outlineColor: Cesium.Color.RED,
|
||||
});
|
||||
break;
|
||||
case 'drawSwallowtailAttackArrow':
|
||||
new CesiumPlot.SwallowtailAttackArrow(Cesium, viewer, {
|
||||
geometry = new CesiumPlot.SwallowtailAttackArrow(Cesium, viewer, {
|
||||
outlineColor: Cesium.Color.BLUE,
|
||||
});
|
||||
break;
|
||||
case 'drawSquadCombat':
|
||||
new CesiumPlot.SquadCombat(Cesium, viewer);
|
||||
geometry = new CesiumPlot.SquadCombat(Cesium, viewer);
|
||||
break;
|
||||
case 'drawSwallowtailSquadCombat':
|
||||
new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer);
|
||||
geometry = new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer);
|
||||
break;
|
||||
case 'drawStraightArrow':
|
||||
new CesiumPlot.StraightArrow(Cesium, viewer, {
|
||||
geometry = new CesiumPlot.StraightArrow(Cesium, viewer, {
|
||||
lineColor: Cesium.Color.RED,
|
||||
});
|
||||
break;
|
||||
case 'drawAssaultDirection':
|
||||
new CesiumPlot.AssaultDirection(Cesium, viewer);
|
||||
geometry = new CesiumPlot.AssaultDirection(Cesium, viewer);
|
||||
break;
|
||||
case 'drawCurvedArrow':
|
||||
new CesiumPlot.CurvedArrow(Cesium, viewer, {
|
||||
geometry = new CesiumPlot.CurvedArrow(Cesium, viewer, {
|
||||
lineColor: Cesium.Color.BLUE,
|
||||
});
|
||||
break;
|
||||
case 'drawDoubleArrow':
|
||||
new CesiumPlot.DoubleArrow(Cesium, viewer, {
|
||||
geometry = new CesiumPlot.DoubleArrow(Cesium, viewer, {
|
||||
outlineColor: Cesium.Color.GREEN,
|
||||
});
|
||||
break;
|
||||
case 'drawFreehandLine':
|
||||
new CesiumPlot.FreehandLine(Cesium, viewer);
|
||||
geometry = new CesiumPlot.FreehandLine(Cesium, viewer);
|
||||
break;
|
||||
case 'drawFreehandPolygon':
|
||||
new CesiumPlot.FreehandPolygon(Cesium, viewer);
|
||||
geometry = new CesiumPlot.FreehandPolygon(Cesium, viewer);
|
||||
break;
|
||||
case 'hide':
|
||||
geometry && geometry.hide();
|
||||
// setTimeout(getCameraInfo, 2000);
|
||||
break;
|
||||
case 'show':
|
||||
geometry && geometry.show();
|
||||
break;
|
||||
case 'remove':
|
||||
geometry && geometry.remove();
|
||||
geometry = null;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
@ -50,6 +50,9 @@
|
||||
<button id="drawDoubleArrow" class="button">双箭头</button>
|
||||
<button id="drawFreehandLine" class="button">自由线</button>
|
||||
<button id="drawFreehandPolygon" class="button">自由面</button>
|
||||
<button id="hide" class="button">隐藏</button>
|
||||
<button id="show" class="button">显示</button>
|
||||
<button id="remove" class="button">删除</button>
|
||||
</div>
|
||||
<script>
|
||||
window.CESIUM_BASE_URL = './examples/cesium';
|
||||
|
||||
@ -52,8 +52,8 @@ export default class CurvedArrow extends Base {
|
||||
|
||||
createStraightArrow(positions: Cartesian3[]) {
|
||||
const [pnt1, pnt2] = positions.map(this.cartesianToLnglat);
|
||||
let len = 1.5;
|
||||
|
||||
const distance = Utils.MathDistance(pnt1, pnt2);
|
||||
let len = distance / this.arrowLengthScale;
|
||||
len = len > this.maxArrowLength ? this.maxArrowLength : len;
|
||||
const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, false);
|
||||
const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, true);
|
||||
@ -83,10 +83,8 @@ export default class CurvedArrow extends Base {
|
||||
const pnt1 = lnglatPoints[lnglatPoints.length - 2];
|
||||
const pnt2 = lnglatPoints[lnglatPoints.length - 1];
|
||||
|
||||
// const distance = Utils.MathDistance(pnt1, pnt2);
|
||||
// const distance = Utils.wholeDistance(lnglatPoints);
|
||||
// let len = distance / this.arrowLengthScale;
|
||||
let len = 1.5;
|
||||
const distance = Utils.wholeDistance(lnglatPoints);
|
||||
let len = distance / this.arrowLengthScale;
|
||||
len = len > this.maxArrowLength ? this.maxArrowLength : len;
|
||||
const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, false);
|
||||
const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, true);
|
||||
|
||||
32
src/base.ts
32
src/base.ts
@ -124,7 +124,6 @@ export default class Base {
|
||||
}
|
||||
|
||||
onDoubleClick() {
|
||||
// this.eventHandler = new this.cesium.ScreenSpaceEventHandler(this.viewer.canvas);
|
||||
this.eventHandler.setInputAction((evt: any) => {
|
||||
this.finishDrawing();
|
||||
}, this.cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
||||
@ -169,7 +168,7 @@ export default class Base {
|
||||
polygon: new this.cesium.PolygonGraphics({
|
||||
hierarchy: new this.cesium.CallbackProperty(callback, false),
|
||||
show: true,
|
||||
material: style.fillColor, // || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.2)'),
|
||||
material: style.fillColor,
|
||||
}),
|
||||
});
|
||||
|
||||
@ -179,8 +178,8 @@ export default class Base {
|
||||
positions: new this.cesium.CallbackProperty(() => {
|
||||
return [...this.geometryPoints, this.geometryPoints[0]];
|
||||
}, false),
|
||||
width: style.outlineWidth, // || 2,
|
||||
material: style.outlineColor, // || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
|
||||
width: style.outlineWidth,
|
||||
material: style.outlineColor,
|
||||
clampToGround: true,
|
||||
},
|
||||
});
|
||||
@ -210,8 +209,8 @@ export default class Base {
|
||||
const entity = this.viewer.entities.add({
|
||||
polyline: {
|
||||
positions: new this.cesium.CallbackProperty(() => this.geometryPoints, false),
|
||||
width: style.lineWidth, // || 2,
|
||||
material: style.lineColor, // || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
|
||||
width: style.lineWidth,
|
||||
material: style.lineColor,
|
||||
clampToGround: true,
|
||||
},
|
||||
});
|
||||
@ -306,11 +305,21 @@ export default class Base {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Uncertain whether it's a Cesium bug, but the lines do not render properly when 'clampToGround'
|
||||
* is not set (display irregularities). After drawing, the camera adjusts its view based on the shape,
|
||||
* which is not desired. Setting 'clampToGround' to true results in proper rendering and no change in
|
||||
* the camera's perspective. However, when hiding this entity, the camera strangely moves towards the Earth's
|
||||
* center at a precision-less position. Thus, when toggling the visibility state, adjust the 'clampToGround'
|
||||
* status first to avoid this issue.
|
||||
*/
|
||||
show() {
|
||||
if (this.type === 'polygon') {
|
||||
this.polygonEntity.show = true;
|
||||
this.outlineEntity.polyline.clampToGround = true;
|
||||
this.outlineEntity.show = true;
|
||||
} else if (this.type === 'line') {
|
||||
this.lineEntity.polyline.clampToGround = true;
|
||||
this.lineEntity.show = true;
|
||||
}
|
||||
}
|
||||
@ -318,12 +327,23 @@ export default class Base {
|
||||
hide() {
|
||||
if (this.type === 'polygon') {
|
||||
this.polygonEntity.show = false;
|
||||
this.outlineEntity.polyline.clampToGround = false;
|
||||
this.outlineEntity.show = false;
|
||||
} else if (this.type === 'line') {
|
||||
this.lineEntity.polyline.clampToGround = false;
|
||||
this.lineEntity.show = false;
|
||||
}
|
||||
}
|
||||
|
||||
remove() {
|
||||
if (this.type === 'polygon') {
|
||||
this.viewer.entities.remove(this.polygonEntity);
|
||||
this.viewer.entities.remove(this.outlineEntity);
|
||||
} else if (this.type === 'line') {
|
||||
this.viewer.entities.remove(this.lineEntity);
|
||||
}
|
||||
}
|
||||
|
||||
addPoint(cartesian: CesiumTypeOnly.Cartesian3) {
|
||||
//Abstract method that must be implemented by subclasses.
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user