当前位置：网站首页>Cesium draw point line surface
Cesium draw point line surface
2022-06-25 11:44:00 【GIS roast lamb leg is delicious】
1. Directly introducing js
<script type="text/javascript" src="./static/qunee/bm_draw.js"></script>
(function (Cesium) {
var options = {
viewer: null,
width: 3,
hasTerrain:false,
ruler: {
color: Cesium.Color.RED.withAlpha(0.7),
},
material:Cesium.Color.fromCssColorString('#00bd01').withAlpha(0.4),
};
var draw = {
click: {
prev: null,
current: null
},
entity: null,
type: null,
dom: document.createElement('div'),
clickTimer: null,
path: [],
distance: 0,
currentPosition: null,
prevPosition: null,
};
function BMDraw(o) {
for (var k in o) options[k] = o[k];
bindHandler();
}
function iniDraw() {
switch (draw.type) {
case 'polyline':
case 'ruler':
draw.draft = options.viewer.entities.add({
show: true,
polyline: {
clampToGround: true,
width: options.width,
positions: new Cesium.CallbackProperty(drawDraft, false),
material: new Cesium.PolylineDashMaterialProperty({
color:Cesium.Color.RED.withAlpha(1),
outlineWidth: 2.0,
}),
},
});
draw.entity = options.viewer.entities.add({
show: true,
polyline: {
clampToGround:true,
width: options.width,
positions: new Cesium.CallbackProperty(drawDone, false),
material: options.material,
},
});
break;
case 'polygon':
case 'measure':
draw.draft = options.viewer.entities.add({
polyline: {
clampToGround:true,
width: options.width,
positions: new Cesium.CallbackProperty(drawDraft, false),
material: options.material,
},
});
draw.entity = options.viewer.entities.add({
polygon: {
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
outlineColor:Cesium.Color.fromCssColorString('#3188ff').withAlpha(0.8),
hierarchy: new Cesium.CallbackProperty(drawDone, false),
material: options.material,
},
});
break;
case 'circle':
draw.entity = options.viewer.entities.add({
show: true,
ellipse: {
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
semiMajorAxis: new Cesium.CallbackProperty(drawDraft, false),
semiMinorAxis: new Cesium.CallbackProperty(drawDraft, false),
material: options.material,
outline: true,
},
});
break;
case 'rectangle':
draw.entity = options.viewer.entities.add({
rectangle: {
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
material: options.material,
coordinates: new Cesium.CallbackProperty(drawDraft, false)
}
});
break;
}
if (draw.type === 'ruler' || draw.type === 'measure') {
draw.labels = new Cesium.LabelCollection();
options.viewer.scene.primitives.add(draw.labels);
draw.labels.add({
text: '',
// clampToGround:true,
backgroundColor:Cesium.Color.fromCssColorString('#3188ff').withAlpha(0.8),
showBackground: true,
fillColor:Cesium.Color.WHITE,
font: '14px sans-serif',
outlineColor:Cesium.Color.WHITE,
outlineWidth: 2.0,
horizontalOrigin :Cesium.HorizontalOrigin.LEFT,
verticalOrigin :Cesium.VerticalOrigin.BOTTOM,
disableDepthTestDistance : Number.POSITIVE_INFINITY
});
}
}
function bindHandler() {
var handler = new Cesium.ScreenSpaceEventHandler(options.viewer.scene.canvas);
handler.setInputAction((movement) => {
draw.click.current = movement.position.x + '_' + movement.position.y;
if (draw.click.current == draw.click.prev) return;
draw.click.prev = draw.click.current;
var p = getCurrentPosition(movement.position);
var event, event_type = 'bm_draw_end';
switch (draw.type) {
case 'marker':
event = new window.CustomEvent('bm_draw_end', {detail: {type: draw.type, position: [p.lng, p.lat]}});
draw.dom.dispatchEvent(event);
break;
case 'circle':
if (!draw.prevPosition) {
draw.prevPosition = p, draw.entity.position =Cesium.Cartesian3.fromDegrees(p.lng, p.lat);
return;
}
BMDraw.prototype.disable();
break;
case 'rectangle':
if (!draw.prevPosition) {
draw.prevPosition = p;
return;
}
BMDraw.prototype.disable();
break;
case 'polyline':
case 'polygon':
case 'ruler':
case 'measure':
if (draw.type === 'ruler') {
if (draw.path.length === 0) {
draw.labels.add({
position: p.origin,
text: ' The starting point ',
backgroundColor: Cesium.Color.fromCssColorString('#00bd01').withAlpha(0.8),
showBackground: true,
fillColor:Cesium.Color.WHITE,
font: '14px sans-serif',
outlineColor:Cesium.Color.WHITE,
outlineWidth: 2.0,
horizontalOrigin :Cesium.HorizontalOrigin.LEFT,
verticalOrigin :Cesium.VerticalOrigin.BOTTOM,
disableDepthTestDistance : Number.POSITIVE_INFINITY
});
} else {
var c = getDistance(p, draw.prevPosition);
draw.distance += c;
draw.labels.add({
backgroundColor: Cesium.Color.fromCssColorString('#00bd01').withAlpha(0.8),
showBackground: true,
position: p.origin,
text: getReadable(draw.distance),
fillColor:Cesium.Color.WHITE,
font: '14px sans-serif',
outlineColor:Cesium.Color.WHITE,
outlineWidth: 2.0,
horizontalOrigin :Cesium.HorizontalOrigin.LEFT,
verticalOrigin :Cesium.VerticalOrigin.BOTTOM,
disableDepthTestDistance : Number.POSITIVE_INFINITY
});
}
}
draw.prevPosition = p, draw.path.push(p.lng), draw.path.push(p.lat);
break;
}
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(() => {
clearTimeout(draw.clickTimer), draw.clickTimer = null;
BMDraw.prototype.disable();
},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
handler.setInputAction(function (position) {
var p = getCurrentPosition(position.endPosition);
if (!p) return;
switch (draw.type) {
case 'polyline':
case 'polygon':
case 'circle':
case 'rectangle':
case 'ruler':
case 'measure':
if (!draw.prevPosition) return;
switch (draw.type) {
case 'ruler':
var d = getDistance(p, draw.prevPosition);
draw.labels.get(0).text = getReadable(d + draw.distance);
draw.labels.get(0).position = p.origin;
break;
case 'measure':
var area;
if (draw.path.length >= 4) {
var tmp_p = [];
for (var i = 0; i < draw.path.length; i += 2) {
tmp_p.push({lng: draw.path[i], lat: draw.path[i + 1]});
}
tmp_p.push({lng: p.lng, lat: p.lat});
// debugger;
area = getArea(tmp_p);
} else {
area = 0;
}
draw.labels.get(0).text = getReadable(area, 'area');
if (area) {
try {
var r =Cesium.Rectangle.fromCartesianArray(draw.entity.polygon.hierarchy.getValue().positions);
r =Cesium.Rectangle.center(r);
// draw.labels.get(0).position =Cesium.Cartesian3.fromRadians(r.longitude, r.latitude);
draw.labels.get(0).position =Cesium.Cartesian3.fromR(r.longitude, r.latitude,r.height);
} catch (e) {
draw.labels.get(0).position = p.origin;
}
}
break;
}
draw.currentPosition = p;
break;
case 'edit_marker':
case 'edit_polyline':
case 'edit_rectangle':
case 'edit_circle':
draw.currentPosition = p;
break;
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function (e) {
var entity = options.viewer.scene.pick(e.position);
if (!entity) return;
if (entity.collection && entity.collection.id && entity.collection.id.indexOf('ruler_') > -1) {
entity.collection.draft.labels.removeAll();
options.viewer.entities.remove(entity.collection.draft.overlay);
return;
}
var id = entity.id && entity.id.id;
if (!draw.edit) return;
if (draw.ids.indexOf(id) === -1) return;
draw.prevPosition = getCurrentPosition(e.position);
switch (draw.type) {
case 'edit_marker':
draw.edit.position = new Cesium.CallbackProperty(drawDraft, false);
break;
case 'edit_polyline':
draw.dragMarker = entity.id;
draw.dragMarker.position = new Cesium.CallbackProperty(drawDraft, false);
draw.edit.polyline.positions = new Cesium.CallbackProperty(drawDone, false);
break;
case 'edit_rectangle':
draw.dragMarker = entity.id;
draw.dragMarker.position = new Cesium.CallbackProperty(drawDraft, false);
draw.edit.rectangle.coordinates = new Cesium.CallbackProperty(drawDone, false);
break;
case 'edit_circle':
draw.dragMarker = entity.id;
draw.dragMarker.position = new Cesium.CallbackProperty(drawDraft, false);
if (id == draw.firstId) {
draw.edit.position = new Cesium.CallbackProperty(function () {
return draw.markers[0].position.getValue();
}, false);
draw.markers[1].position = new Cesium.CallbackProperty(function () {
return getNorthPointByDistance(draw.dragMarker.position.getValue(), draw.edit.ellipse.semiMajorAxis.getValue())
}, false);
} else {
draw.edit.ellipse.semiMajorAxis = new Cesium.CallbackProperty(drawDone, false);
draw.edit.ellipse.semiMinorAxis = new Cesium.CallbackProperty(drawDone, false);
}
break;
}
draw.running = true;
options.viewer.scene.screenSpaceCameraController.enableRotate = false;
},Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function (e) {
if (!draw.running) return;
switch (draw.type) {
case 'edit_marker':
draw.edit.position = draw.edit.position.getValue();
var event = new CustomEvent('bm_edit_end', {
detail: {
type: 'marker',
position: {lng: draw.currentPosition.lng, lat: draw.currentPosition.lat}
}
});
draw.dom.dispatchEvent(event);
draw.edit = null;
draw.running = false;
options.viewer.scene.screenSpaceCameraController.enableRotate = true;
break;
case 'edit_polyline':
case 'edit_rectangle':
options.viewer.scene.screenSpaceCameraController.enableRotate = true;
draw.dragMarker.position = draw.dragMarker.position.getValue();
break;
case 'edit_circle':
draw.markers.forEach(v => {
v.position = v.position.getValue();
});
draw.edit.ellipse.semiMajorAxis = draw.edit.ellipse.semiMajorAxis.getValue();
draw.edit.ellipse.semiMinorAxis = draw.edit.ellipse.semiMajorAxis.getValue();
options.viewer.scene.screenSpaceCameraController.enableRotate = true;
break;
}
},Cesium.ScreenSpaceEventType.LEFT_UP);
}
BMDraw.prototype.edit = function (entity) {
debugger
switch (true) {
case !!entity.ellipse:
draw.edit = entity, draw.type = 'edit_circle', draw.ids = [], draw.markers = [];
var tmp_id = new Date().getTime();
var path = [entity.position.getValue()];
draw.firstId = tmp_id;
path.push(getNorthPointByDistance(path[0], entity.ellipse.semiMajorAxis.getValue()));
path.forEach(v => {
draw.markers.push(
options.viewer.entities.add({
id: tmp_id,
position: v,
billboard: new Cesium.BillboardGraphics({
image: '/static/map/images/edit_squre.png',
width: 24,
height: 24
})
})
);
draw.ids.push(tmp_id);
tmp_id++;
});
break;
case !!entity.position:
draw.edit = entity;
draw.type = 'edit_marker';
draw.ids = [];
draw.ids.push(entity.id || 'edit_' + new Date().getTime());
break;
case !!entity.polyline:
draw.edit = entity, draw.type = 'edit_polyline', draw.ids = [], draw.markers = [];
for (var i = 0; i < path.length; i++) {
tmp_id++;
draw.ids.push(tmp_id);
draw.markers.push(options.viewer.entities.add({
id: tmp_id,
position: path[i],
billboard: new Cesium.BillboardGraphics({
image: '/static/map/images/edit_squre.png',
width: 24,
height: 24
})
}));
}
break;
case !!entity.rectangle:
draw.edit = entity, draw.type = 'edit_rectangle', draw.ids = [], draw.markers = [];
var tmp_id = new Date().getTime();
var path = entity.rectangle.coordinates.getValue();
[[path.west, path.south], [path.east, path.north]].forEach(v => {
tmp_id++;
draw.markers.push(
options.viewer.entities.add({
id: tmp_id,
position:Cesium.Cartesian3.fromRadians(v[0], v[1]),
billboard: new Cesium.BillboardGraphics({
image: '/static/qunee/assets/images/jizhan.png',
width: 24,
height: 24
})
})
);
draw.ids.push(tmp_id);
});
break;
}
}
BMDraw.prototype.enable = function (type) {
if (draw.type) this.disable();
draw.type = type;
iniDraw();
options.viewer.container.style.cursor = 'pointer';
};
BMDraw.prototype.disable = function () {
var event;
switch (draw.type) {
case 'polyline':
case 'polygon':
event = new window.CustomEvent('bm_draw_end', {
detail: {
type: draw.type,
positions: JSON.parse(JSON.stringify(draw.path))
}
});
draw.dom.dispatchEvent(event);
break;
case 'circle':
event = new window.CustomEvent('bm_draw_end', {
detail: {
type: draw.type,
radius: draw.entity.ellipse.semiMajorAxis.getValue(),
position: [draw.prevPosition.lng, draw.prevPosition.lat]
}
});
draw.dom.dispatchEvent(event);
break;
case 'rectangle':
var v = draw.entity.rectangle.coordinates.getValue();
var t = [v.west, v.south, v.east, v.north].map(v =>Cesium.Math.toDegrees(v));
event = new window.CustomEvent('bm_draw_end', {detail: {type: draw.type, positions: t}});
draw.dom.dispatchEvent(event);
break;
case 'edit_polyline':
var positions = draw.edit.polyline.positions.getValue();
draw.edit.polyline.positions = positions;
var path = [];
positions.forEach(v => {
var t =Cesium.Cartographic.fromCartesian(v);
path.push([Cesium.Math.toDegrees(t.longitude),Cesium.Math.toDegrees(t.latitude)]);
});
event = new window.CustomEvent('bm_edit_end', {detail: {type: draw.type, positions: path}});
draw.dom.dispatchEvent(event);
draw.ids.length = 0;
draw.markers.forEach(v => {
options.viewer.entities.remove(v);
});
draw.markers.length = 0;
break;
case 'edit_rectangle':
var v = draw.edit.rectangle.coordinates.getValue();
draw.edit.rectangle.coordinates = v;
var t = [v.west, v.south, v.east, v.north].map(v =>Cesium.Math.toDegrees(v));
event = new CustomEvent('bm_edit_end', {detail: {type: draw.type, positions: t}});
draw.dom.dispatchEvent(event);
draw.ids.length = 0;
draw.markers.forEach(v => {
options.viewer.entities.remove(v);
});
draw.markers.length = 0;
break;
case 'edit_circle':
var v = draw.edit.position.getValue(), r = draw.edit.ellipse.semiMinorAxis.getValue();
draw.edit.position = v, draw.edit.ellipse.semiMinorAxis = r, draw.edit.ellipse.semiMajorAxis = r;
var tt =Cesium.Cartographic.fromCartesian(v);
event = new CustomEvent('bm_edit_end', {
detail: {
type: draw.type,
position: {lng:Cesium.Math.toDegrees(tt.longitude), lat:Cesium.Math.toDegrees(tt.latitude)},
radius: r
}
});
draw.dom.dispatchEvent(event);
draw.ids.length = 0;
draw.markers.forEach(v => {
options.viewer.entities.remove(v);
});
draw.markers.length = 0;
break;
case 'ruler':
case 'measure':
draw.distance = 0;
var ruler_line;
if (draw.type == 'ruler') {
ruler_line = options.viewer.entities.add({
polyline: {
clampToGround:true,
positions: draw.entity.polyline.positions.getValue(),
material:Cesium.Color.fromCssColorString('#00bd01').withAlpha(0.8),
width : 4,
}
});
} else {
ruler_line = options.viewer.entities.add({
polygon: {
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
hierarchy: draw.entity.polygon.hierarchy.getValue(),
material: options.material,
}
});
}
var last_label = draw.labels.get(draw.labels.length - 1);
last_label.text = last_label.text + ' X';
draw.labels.id = 'ruler_last' + new Date().getTime();
draw.labels.draft = {
labels: draw.labels,
overlay: ruler_line,
};
break;
default:
}
options.viewer.entities.remove(draw.draft);
draw.draft = null;
options.viewer.entities.remove(draw.entity);
draw.entity = null;
draw.type = null, draw.currentPosition = null, draw.prevPosition = null, draw.path.length = 0;
options.viewer.container.style.cursor = '';
draw.dom.dispatchEvent(new Event('bm_draw_disabled'));
};
BMDraw.prototype.on = function (type, callback) {
draw.dom.addEventListener(type, callback.bind(this));
return this;
};
function getCurrentPosition(position) {
var p;
if (options.hasTerrain){
p=options.viewer.scene.globe.pick(options.viewer.camera.getPickRay(position),options.viewer.scene);
}else{
p = options.viewer.scene.camera.pickEllipsoid(position, options.viewer.scene.globe.ellipsoid);
}
if (!Cesium.defined(p)) return;
var cartographic =Cesium.Cartographic.fromCartesian(p);
return {
lng:Cesium.Math.toDegrees(cartographic.longitude),
lat:Cesium.Math.toDegrees(cartographic.latitude),
cameraHeight: options.viewer.scene.camera.positionCartographic.height,
origin:p,
};
}
function drawDraft() {
switch (draw.type) {
case 'polyline':
case 'ruler':
return draw.currentPosition ?Cesium.Cartesian3.fromDegreesArray([draw.prevPosition.lng, draw.prevPosition.lat, draw.currentPosition.lng, draw.currentPosition.lat]) :Cesium.Cartesian3.fromDegreesArray([104,30,104,30]);
case 'polygon':
case 'measure':
return draw.currentPosition ?Cesium.Cartesian3.fromDegreesArray([draw.prevPosition.lng, draw.prevPosition.lat, draw.currentPosition.lng, draw.currentPosition.lat]) :Cesium.Cartesian3.fromDegreesArray([104,30,104,30,104,30]);
case 'circle':
if (draw.currentPosition) {
return Math.floor(getDistance(draw.prevPosition, draw.currentPosition));
}
return 1;
case 'rectangle':
if (draw.currentPosition) {
var p = [draw.prevPosition.lng, draw.prevPosition.lat, draw.currentPosition.lng, draw.currentPosition.lat],
tmp;
p[0] > p[2] ? (tmp = p[0], p[0] = p[2], p[2] = tmp) : true;
p[1] > p[3] ? (tmp = p[1], p[1] = p[3], p[3] = tmp) : true;
return Cesium.Rectangle.fromDegrees(p[0], p[1], p[2], p[3]);
}
return Cesium.Rectangle.fromDegrees(0, 0, 0, 0);
case 'edit_marker':
case 'edit_polyline':
case 'edit_rectangle':
case 'edit_circle':
var p = draw.currentPosition || draw.prevPosition;
return Cesium.Cartesian3.fromDegrees(p.lng, p.lat);
default:
return Cesium.Cartesian3.fromDegreesArray([]);
}
}
function drawDone() {
switch (draw.type) {
case 'polyline':
case 'ruler':
return draw.path.length >= 4 ?Cesium.Cartesian3.fromDegreesArray(draw.path) :Cesium.Cartesian3.fromDegreesArray([104,30,104,30]);
case 'polygon':
case 'measure':
if (draw.path.length >= 4) {
var new_path = JSON.parse(JSON.stringify(draw.path));
new_path.push(draw.currentPosition.lng);
new_path.push(draw.currentPosition.lat);
return new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(new_path));
}
return new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([104,30,104,30,104,30.00001]));
case 'edit_polyline':
var path = [];
draw.markers.forEach(v => {
path.push(v.position.getValue());
});
return path;
case 'edit_rectangle':
var p = [];
draw.markers.forEach(v => {
var t = v.position.getValue();
t =Cesium.Cartographic.fromCartesian(t);
p.push(Cesium.Math.toDegrees(t.longitude),Cesium.Math.toDegrees(t.latitude));
});
var tmp;
p[0] > p[2] ? (tmp = p[0], p[0] = p[2], p[2] = tmp) : true;
p[1] > p[3] ? (tmp = p[1], p[1] = p[3], p[3] = tmp) : true;
return Cesium.Rectangle.fromDegrees(p[0], p[1], p[2], p[3]);
case 'edit_circle':
var p = [];
draw.markers.forEach(v => {
var t =Cesium.Cartographic.fromCartesian(v.position.getValue());
p.push({lng:Cesium.Math.toDegrees(t.longitude), lat:Cesium.Math.toDegrees(t.latitude)});
});
return getDistance(p[0], p[1]);
break;
default:
return Cesium.Cartesian3.fromDegreesArray([]);
}
}
function getDistance(start, end) {
return new Cesium.EllipsoidGeodesic(Cesium.Cartographic.fromDegrees(start.lng, start.lat),Cesium.Cartographic.fromDegrees(end.lng, end.lat)).surfaceDistance;
}
function getReadable(value, type) {
switch (type) {
case 'area':
return value > 1000000 ? (value / 1000000).toFixed(5) + 'km²' : value.toFixed(2) + 'm²';
default:
return value > 1000 ? (value / 1000).toFixed(2) + 'km' : value.toFixed(2) + 'm';
}
}
var earthRadiusMeters = 6371000.0;
var radiansPerDegree = Math.PI / 180.0;
var degreesPerRadian = 180.0 / Math.PI;
function getArea(points) {
var totalAngle = 0;
for (var i = 0; i < points.length; i++) {
var j = (i + 1) % points.length;
var k = (i + 2) % points.length;
totalAngle += Angle(points[i], points[j], points[k]);
}
var planarTotalAngle = (points.length - 2) * 180.0;
var sphericalExcess = totalAngle - planarTotalAngle;
if (sphericalExcess > 420.0) {
totalAngle = points.length * 360.0 - totalAngle;
sphericalExcess = totalAngle - planarTotalAngle;
} else if (sphericalExcess > 300.0 && sphericalExcess < 420.0) {
sphericalExcess = Math.abs(360.0 - sphericalExcess);
}
return sphericalExcess * radiansPerDegree * earthRadiusMeters * earthRadiusMeters;
}
/* angle */
function Angle(p1, p2, p3) {
var bearing21 = Bearing(p2, p1);
var bearing23 = Bearing(p2, p3);
var angle = bearing21 - bearing23;
if (angle < 0) {
angle += 360;
}
return angle;
}
/* Direction */
function Bearing(from, to) {
var lat1 = from.lat * radiansPerDegree;
var lon1 = from.lng * radiansPerDegree;
var lat2 = to.lat * radiansPerDegree;
var lon2 = to.lng * radiansPerDegree;
var angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
if (angle < 0) {
angle += Math.PI * 2.0;
}
angle = angle * degreesPerRadian;
return angle;
}
function getNorthPointByDistance(position, distance) {
// Establish a local coordinate system with a point as the origin （ The East is x Axis , To the north is y Axis , Perpendicular to the ground is z Axis ）, Get a transformation matrix from local coordinates to world coordinates
var localToWorld_Matrix =Cesium.Transforms.eastNorthUpToFixedFrame(position);
return Cesium.Matrix4.multiplyByPoint(localToWorld_Matrix,Cesium.Cartesian3.fromElements(distance, 0, 0), new Cesium.Cartesian3())
}
window.BMDraw = BMDraw;
})(window.Cesium);
2. page
<template>
<div id="result">
<div style="display: inline-block">
<button
v-show="!menuShouBH"
class="btn btn-info btn-xs"
data-type="marker"
href="javascript:void(0);"
:data-type="item.type"
v-for="item in menuD.slice(0, 5)"
>
<i
:data-type="item.type"
style="display: block"
class="fa"
:class="item.img"
></i>
<span :data-type="item.type" style="font-size: 14px">{
{
item.title
}}</span>
</button>
<button
style="margin: 1px"
class="btn btn-inverse btn-xs"
@click="menuShouBH = !menuShouBH"
>
<i style="display: block" class="fa fa-th-large"></i>
<span style="font-size: 14px"> Plot </span>
</button>
<!-- <i title=" Amplification and contraction " style="float: right;margin-right: 10px;cursor: pointer;margin-left: 10px;" class="fa fa-th-large fa-2x" @click="menuShou=!menuShou"></i>-->
</div>
<div style="display: inline-block">
<button
v-show="!menuShou"
class="btn btn-info btn-xs"
href="javascript:void(0);"
:data-type="item.type"
v-for="item in menuD.slice(5, 7)"
>
<i
:data-type="item.type"
style="display: block"
class="fa"
:class="item.img"
></i>
<span :data-type="item.type" style="font-size: 14px">{
{
item.title
}}</span>
</button>
<button
style="margin: 1px"
class="btn btn-inverse btn-xs"
@click="menuShou = !menuShou"
>
<i style="display: block" class="fa fa-th-large"></i>
<span style="font-size: 14px"> measurement </span>
</button>
</div>
<div style="display: inline-block">
<button
style="margin: 1px"
class="btn btn-inverse btn-xs"
data-type="clear"
href="javascript:void(0);"
>
<i data-type="clear" style="display: block" class="fa fa-trash"></i>
<span data-type="clear" style="font-size: 14px"> eliminate </span>
</button>
</div>
</div>
</template>
<script>
export default {
name: "measureTool",
data() {
return {
menuShou: true,
menuShouBH: true,
menuD: [
{ title: " mark ", img: "fa-map-marker", type: "marker" },
{
title: " Line ",
img: "fa-arrows-h",
type: "polyline",
},
{ title: " polygon ", img: "fa-connectdevelop", type: "polygon" },
{ title: " round ", img: "fa-plus-circle", type: "circle" },
{
title: " rectangular ",
img: "fa-square-o",
type: "rectangle",
},
{ title: " ranging ", img: "fa-arrows-h", type: "ruler" },
{ title: " Measuring surface ", img: "fa-retweet", type: "measure" },
],
};
},
methods: {
clearAll() {
this.$entitiesRemove();
this.$primitivesRemove({ id: "rdryxxk" });
$("#trackPopUp").hide();
},
},
mounted() {
var self = this;
// Cancel the default click event
// self.$viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
self.$viewer.scene.globe.depthTestAgainstTerrain = false;
var options = {
width: 3,
material: Cesium.Color.fromCssColorString("#00bd01").withAlpha(0.6),
};
var draw = new BMDraw({
viewer: self.$viewer,
style: options,
hasTerrain: true,
});
self.$viewer.screenSpaceEventHandler.setInputAction(function (e) {
// Right click to exit the drawing mode
draw.disable();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
document.getElementById("result").addEventListener("click", function (e) {
var dataset = e.target.dataset;
switch (dataset.type) {
case "marker":
case "polyline":
case "circle":
case "rectangle":
case "polygon":
case "measure":
case "ruler":
draw.enable(dataset.type);
break;
case "clear":
self.clearAll();
draw.disable();
break;
}
});
var index = 1;
draw.on("bm_draw_end", function (e) {
var detail = e.detail;
if (!detail) return;
switch (detail.type) {
case "marker":
draw.disable();
var html =
"<div>" +
"<div style='background: #69adde;padding: 14px;margin: -19px;color: white;'> Add tag </div>" +
"<div style='padding: 6px 10px;margin-top: 20px;'><span> name ：</span><input style='width: 168px;' id='InputName' /></div>" +
"<div style='padding: 0px 10px;'><span> remarks ：</span><textarea type='text' id='InputBeiZhu' ></textarea></div>" +
"<div class='quedingD' style='padding: 10px;text-align: right;'><button> determine </button></div>" +
"</div>";
setTimeout(function () {
var obj = {
content: html,
earthPosition: Cesium.Cartesian3.fromDegrees(
detail.position[0],
detail.position[1]
),
};
self.$PopupHtml(obj);
$(".quedingD").click(function (e) {
var attr = {
name: " mark 1",
bz: " Marked remarks, etc ",
tableType: "zhuji",
};
var html = self.$getHtml(attr);
self.$viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(
detail.position[0],
detail.position[1]
),
billboard: {
//heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
image: "static/qunee/assets/images/sign.png",
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
},
description: html, // Method 1
label: {
fillColor: Cesium.Color.BLACK.withAlpha(1),
text: $("#InputName").val(),
font: "13pt sans-serif",
style: Cesium.LabelStyle.FILL,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -20),
},
});
$("#trackPopUp").hide();
});
}, 100);
break;
case "polyline":
self.$viewer.entities.add({
name: " Linear data ",
polyline: {
width: 4,
clampToGround: true,
positions: Cesium.Cartesian3.fromDegreesArray(detail.positions),
material: options.material,
},
});
break;
case "polygon":
var entities = self.$viewer.entities.add({
name: " Planar data ",
Type:'polygon',// The need to edit Type
polygon: {
//heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
hierarchy: Cesium.Cartesian3.fromDegreesArray(detail.positions),
material: options.material,
},
});
break;
case "circle":
self.$viewer.entities.add({
name: " Circular data ",
description: "<div> type ： round </div>", // Method 1
position: Cesium.Cartesian3.fromDegrees(
detail.position[0],
detail.position[1]
),
ellipse: {
//heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
semiMajorAxis: detail.radius,
semiMinorAxis: detail.radius,
material: options.material,
},
});
break;
case "rectangle":
var entities=self.$viewer.entities.add({
name: " Rectangular data ",
rectangle: {
//heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
coordinates: Cesium.Rectangle.fromDegrees(
detail.positions[0],
detail.positions[1],
detail.positions[2],
detail.positions[3]
),
material: options.material,
},
});
draw.edit(entities)
break;
}
})
.on("bm_draw_disabled", function () {
console.log("end");
});
},
};
</script>
<style lang="scss" scoped>
#result {
position: absolute;
right: 10px;
top: 10px;
box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 6px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
background: #cbe1fc;
padding: 4px;
border-radius: 4px;
a {
display: inline-block;
cursor: pointer;
color: black;
}
i {
display: inline-block;
cursor: pointer;
}
}
</style>
边栏推荐
- Keywords serializable serialization and deserialization
- 芯片的发展史和具体用途以及结构是什么样的
- Using DBF of VFP to web salary query system
- 手机上股票开户安全吗？找谁可以开户啊？
- Why distributed IDS? What are the distributed ID generation schemes?
- VFP develops a official account to receive coupons, and users will jump to various target pages after registration, and a set of standard processes will be sent to you
- CMU puts forward a new NLP paradigm - reconstructing pre training, and achieving 134 high scores in college entrance examination English
- 建造者模式
- 如何实现移动端富文本编辑器功能
- 分享7个神仙壁纸网站，让新的壁纸，给自己小小的雀跃，不陷入年年日日的重复。
猜你喜欢
记一次给OpenHarmony提交代码的过程
Spark history server and event log details
Deeply understand Flink SQL execution process based on flink1.12
Yisheng biological sprint scientific innovation board: 25% of the revenue comes from the sales of new crown products, and it is planned to raise 1.1 billion yuan
CFCA安心签接入
TCP如何处理三次握手和四次挥手期间的异常
Windows11 MySQL service is missing
Redis6 note02 configuration file, publish and subscribe, new data type, jedis operation
Record the process of submitting code to openharmony once
SystemVerilog (XIII) - enumerate data types
随机推荐
开哪家证券公司的账户是比较好，比较安全的
Caused by: org. xml. sax. SAXParseException； lineNumber: 1； columnNumber: 10； Processing matching '[xx][mm][ll]' is not allowed
云原生数据湖以存储、计算、数据管理等能力通过信通院评测认证
Spark tuning tool -- detailed explanation of sparklens
JVM shutdown hook details
Yisheng biological sprint scientific innovation board: 25% of the revenue comes from the sales of new crown products, and it is planned to raise 1.1 billion yuan
Vulnérabilité à l'injection SQL (contournement)
牛客网：分糖果问题
JSON format processing
Ladder side tuning: the "wall ladder" of the pre training model
Builder pattern
Keywords serializable serialization and deserialization
Startups must survive
Record the process of submitting code to openharmony once
Spark runs wordcount (case 2)
Why distributed IDS? What are the distributed ID generation schemes?
Wait (), notify (), notifyAll (), sleep (), condition, await (), signal()
Use of JSP sessionscope domain
为什么要分布式 id ？分布式 id 生成方案有哪些？
How to use the markdown editor