cesium 经纬度绘制点_Cesium 绘制点、线、面和测距

本文基于ES6，采用React+Cesium的Webgis前端开发框架，目前threejs和cesium的结合正在研究中。此段代码采用原生javascript，可能过程中用到了es6的扁平化语法，如()=>{},list.map方法。

废话不多说了，直接上代码。

import Cesium from 'cesium/Source/Cesium';

import monitor from '../style/images/monitor.jpeg';

const ECesium = {

version: '0.1',

description: '自定义cesium组件',

copyright: '2018-enbo'

};

ECesium.Tools = function (viewer, callback) {

this.viewer = viewer;

this.init();

};

ECesium.Tools.prototype.init = function (back) {

//初始化事件

const viewer = this.viewer;

const scene = viewer.scene;

this.drawingMode = null;

this.measureMode = null;

this.geodesic = new Cesium.EllipsoidGeodesic();

this.handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

this.dataSource = new Cesium.CustomDataSource('test1');

viewer.dataSources.add(this.dataSource);

console.log(viewer.dataSources.indexOf(this.dataSource));

};

ECesium.Tools.prototype.draw = function (type) {

if (!this.viewer) return console.error('this.viewer 未定义');

this.deactivate();

this.drawingMode = type;

switch (type) {

case this.DRAW_TYPE.Point:

this.DrawPoint();

break;

case this.DRAW_TYPE.PolyLine:

case this.DRAW_TYPE.Polygon:

this.DrawGraphics();

break;

default:

break;

}

};

ECesium.Tools.prototype.DrawPoint = function (callback) {

const viewer = this.viewer;

const this_ = this;

this.drawingMode = "point";

this.handler.setInputAction(function (evt) {

const ray = viewer.camera.getPickRay(evt.position);

const mapPosition = this_.getMapPoint(ray);

if (!mapPosition) return;

this_.dataSource.entities.add({

id: '云台' + Math.random(),

name: '林火监测点',

position: Cesium.Cartesian3.fromDegrees(mapPosition.x, mapPosition.y, mapPosition.z),

point: new Cesium.PointGraphics({

color: Cesium.Color.SKYBLUE,

pixelSize: 10,

outlineColor: Cesium.Color.YELLOW,

outlineWidth: 3,

heightReference: Cesium.HeightReference.CLAMP_TO_GROUND

}),

description: ``