当前位置：网站首页>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>
边栏推荐
- Comment TCP gère - t - il les exceptions lors de trois poignées de main et de quatre vagues?
- Spark runs wordcount (case 2)
- Arrays. asList()
- GC
- Is it safe to open a stock account on your mobile phone? Who can I open an account with?
- CFCA安心签接入
- 依概率收敛
- CMU puts forward a new NLP paradigm - reconstructing pre training, and achieving 134 high scores in college entrance examination English
- PHP如何提取字符串中的图片地址
- How terrible is it not to use error handling in VFP?
猜你喜欢
Source code analysis of AQS & reentrantlock
Leetcode 1249. Remove invalid brackets (awesome, finally made)
Idea uses the fast request interface for debugging
Develop two modes of BS mode verification code with VFP to make your website more secure
Thingspanel releases Internet of things mobile client (multiple pictures)
Geographic location system based on openstreetmap+postgis paper documents + reference papers + project source code and database files
Data Lake survey
RPC typical framework
redis的dict的扩容机制(rehash)
Flink deeply understands the graph generation process (source code interpretation)
随机推荐
try-catch-finally
Spark history server performance improvement (I) -- Application List
基于SSH的高校实验室物品管理信息系统的设计与实现 论文文档+项目源码及数据库文件
分享7个神仙壁纸网站，让新的壁纸，给自己小小的雀跃，不陷入年年日日的重复。
Introduction to JVM principle
SQL injection vulnerability (bypass)
What is the development history, specific uses and structure of the chip
Presto Web UI introduction
Causes and solutions of over fitting
文献之有效阅读
Eureka accesses the console and reports an error: whitelabel error page
Windows11 MySQL service is missing
Countdownlatch source code analysis
Thingspanel releases Internet of things mobile client (multiple pictures)
SQL注入漏洞（类型篇）
2022 mathematical modeling competition time and registration fee
Idea local launch Flink task
JVM 原理简介
Spark Tuning common configuration parameters
CFCA Anxin sign access