当前位置：网站首页>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>
边栏推荐
- Deeply understand Flink SQL execution process based on flink1.12
- Use of Presto visualization client-yanagishima20.0
- 分享7个神仙壁纸网站，让新的壁纸，给自己小小的雀跃，不陷入年年日日的重复。
- Nacos installation and use
- Golden sun education listed in the U.S.: a small cap medium cap stock with a market value of USD 360million
- Detailed explanation of Spark's support source code for Yan priority
- try-catch-finally
- ThingsPanel 發布物聯網手機客戶端（多圖）
- Is industrial securities a state-owned enterprise? Is it safe to open an account in industrial securities?
- Windows11 MySQL service is missing
猜你喜欢
What are the ways to simulate and burn programs? (including common tools and usage)
按钮多次点击造成结果
Capacity expansion mechanism of Dict Of redis (rehash)
基於Minifilter框架的雙緩沖透明加解密驅動 課程論文+項目源碼
CFCA Anxin sign access
Hangzhou / Beijing neitui Ali Dharma academy recruits academic interns in visual generation (talent plan)
Introduction to JVM principle
redis的dict的扩容机制(rehash)
SQL注入漏洞（繞過篇）
Detailed explanation of spark specification
随机推荐
Evaluating the overall situation of each class in a university based on entropy weight method (formula explanation + simple tool introduction)
Solution to the timeout scenario of Flink streaming computing (official live broadcast)
客户经理的开户二维码开户买股票安全吗？有谁知道啊
PHP如何提取字符串中的图片地址
Record the process of submitting code to openharmony once
Comparator (for arrays.sort)
如何实现移动端富文本编辑器功能
Detailed explanation of spark specification
Deeply understand Flink SQL execution process based on flink1.12
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
Real software developers will use this method to predict the future
JSON format processing
Spark runs wordcount (case 2)
Use of JSP sessionscope domain
Problems encountered using easyexcel
Nacos installation and use
记一次有趣的逻辑SRC挖掘
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
GC
.Net Core 中使用工厂模式