cesium draw点线面

1.直接引入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: '起点',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) {debuggerswitch (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;}/*角度*/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;}/*方向*/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) {//以点为原点建立局部坐标系（东方向为x轴,北方向为y轴,垂直于地面为z轴），得到一个局部坐标到世界坐标转换的变换矩阵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.页面

<template><div id="result"><div style="display: inline-block"><buttonv-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><buttonstyle="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">标绘</span></button><!--            <i title="放大收缩" 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"><buttonv-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><buttonstyle="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">测量</span></button></div><div style="display: inline-block"><buttonstyle="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">清除</span></button></div></div>
</template><script>
export default {name: "measureTool",data() {return {menuShou: true,menuShouBH: true,menuD: [{ title: "标注", img: "fa-map-marker", type: "marker" },{title: "线",img: "fa-arrows-h",type: "polyline",},{ title: "多边形", img: "fa-connectdevelop", type: "polygon" },{ title: "圆", img: "fa-plus-circle", type: "circle" },{title: "矩形",img: "fa-square-o",type: "rectangle",},{ title: "测距", img: "fa-arrows-h", type: "ruler" },{ title: "测面", img: "fa-retweet", type: "measure" },],};},methods: {clearAll() {this.$entitiesRemove();this.$primitivesRemove({ id: "rdryxxk" });$("#trackPopUp").hide();},},mounted() {var self = this;//取消默认的点击事件// 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) {//添加右键退出绘制模式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;'>添加标记</div>" +"<div style='padding: 6px 10px;margin-top: 20px;'><span>名称：</span><input style='width: 168px;' id='InputName' /></div>" +"<div style='padding: 0px 10px;'><span>备注：</span><textarea  type='text' id='InputBeiZhu' ></textarea></div>" +"<div class='quedingD' style='padding: 10px;text-align: right;'><button>确定</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: "标注1",bz: "标注的备注信息等",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, //方法一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: "线状数据",polyline: {width: 4,clampToGround: true,positions: Cesium.Cartesian3.fromDegreesArray(detail.positions),material: options.material,},});break;case "polygon":var entities = self.$viewer.entities.add({name: "面状数据",Type:'polygon',//要去编辑的需要Typepolygon: {//heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,hierarchy: Cesium.Cartesian3.fromDegreesArray(detail.positions),material: options.material,},});break;case "circle":self.$viewer.entities.add({name: "圆形数据",description: "<div>类型：圆</div>", //方法一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: "矩形数据",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>

cesium draw点线面相关推荐

Cesium.js点线面绘制
Cesium.js在三维GIS中十分的流行,点.线.面的绘制也是GIS开发中经常用到的基础操作.最近在Ceisum.js三维开发时,也是遇到了点.线.面的绘制功能开发,正好这里记录分享一下. 效果核 ...
Cesium 实战记录（四）绘制点线面的工具封装
老样子先看效果: 画点: (tips:我的代码里手动将点的高度提高了50m) 画线: 画面: 看下封装的类结构吧: 看下调用的操作页面: vue页面: 引入工具类: js:初始化工具,然后激活点线面 ...
Cesium点线面绘制
Cesium点线面绘制前言效果图关键代码前言 Cesium点线面绘制是很基本的功能,数据采集类型的系统必须具备此功能.但是Cesium并没有提供相关可以直接使用的绘制方法,只能自己进行封装,虽 ...
cesium点线面，测量详细代码
效果可跳转 http://123.57.53.47/cesiumWeb/#/cesiumTools/measure 前往效果图如下因为要绘制点线面,分别要与cesium的左点击事件和鼠标移动事件左 ...
cesium模型不遮挡点线面_cesium点线面测试数据
//初始化cesium var viewer = new Cesium.Viewer('cesiumContainer',{ imageryProvider:new Cesium.SingleTile ...
cesium模型不遮挡点线面_cesium 学习(八) 基础绘制（点线面）
一.前言对于一个地图GIS场景,绘制点.线.面属于是基础功能,无论是二维地图还是三维地图场景均是如此,尤其对于三维场景来说比二维应该是更加困难了些. 但是基础的简单绘制不用考虑太多,下面我们开始学习 ...
cesium模型不遮挡点线面_cesium绘制点线面
这个问题的解决,是通过设置的一个新的按钮,这个按钮用来保存之前绘制的点,因为鼠标点击事件每次点击必须要执行viewer.entities.removeAll();这句话,但是将每次鼠标左键点击的位置坐 ...
Cesium原理篇：6 Render模块(6: Instance实例化)
最近研究Cesium的实例化,尽管该技术需要在WebGL2.0,也就是OpenGL ES3.0才支持.调试源码的时候眼前一亮,发现VAO和glDrawBuffers都不是WebGL1.0的标准函数,都 ...
开源GIS（五）——openlayers中interaction的select、draw与modify
目录一.引言二.interaction中select选取feature 三.interaction中draw与modify修改feature 四.总结一.引言 gis中最基础的就是空间查询,鼠标 ...

cesium draw点线面

1.直接引入js

2.页面

cesium draw点线面相关推荐

最新文章

热门文章