cesium多边形描边_Cesium绘制点、线、面、圆、矩形

本文基于《基于Webpack的Cesium+Vue应用》文章，在此基础之上，进行功能的扩展。本文主要讲解如何在Cesium三维球上用鼠标绘制点、线、面、矩形。

1、搭建项目结构

image.png

2、MainViewer.vue代码

import Cesium from 'cesium/Source/Cesium.js'

import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"

import "cesium/Source/Widgets/widgets.css";

import CesiumViewer from './CesiumViewer.vue'

export default {

name: 'MainViewer',

components:{CesiumViewer},

data () {

return {

viewer:''

}

},

mounted:function(){

//设置静态资源目录

buildModuleUrl.setBaseUrl('../../static/Cesium/');

//创建viewer实例

this.viewer = new Cesium.Viewer('cesiumContainer',{

animation: false,

baseLayerPicker: false,

fullscreenButton: false,

geocoder: false,

homeButton: false,

sceneModePicker: false,

selectionIndicator: false,

timeline: false,

navigationHelpButton: false,

infoBox: false,

navigationInstructionsInitiallyVisible: false

});

this.viewer._cesiumWidget._creditContainer.style.display = "none"; //去掉logo

}

}

#mainDiv{

width:100%;

height:100%;

}

#cesiumContainer{

width:100%;

height:100%;

}

3、CesiumViewer.vue代码

import Cesium from 'cesium/Source/Cesium.js'

import $ from 'jquery'

export default {

name: 'CesiumViewer',

props:['viewer'],

data () {

return {

removeImageryLayers:[]

}

},

mounted:function(){

var _this = this;

$("#pointBtn").bind('click',function(){

_this.drawPoint(function(positions){

var wgs84_positions = [];

for(var i=0; i

var wgs84_point = _this.Cartesian3_to_WGS84({

x: positions[i].x,

y: positions[i].y,

z: positions[i].z

});

wgs84_positions.push(wgs84_point);

}

console.log(wgs84_positions);

});

});

$("#lineBtn").bind('click',function(){

_this.drawLineString(function(positions){

var wgs84_positions = [];

for(var i=0; i

var wgs84_point = _this.Cartesian3_to_WGS84({

x: positions[i].x,

y: positions[i].y,

z: positions[i].z

});

wgs84_positions.push(wgs84_point);

}

console.log(wgs84_positions);

});

});

$("#polyBtn").bind('click',function(){

_this.drawPolygon(function(positions){

var wgs84_positions = [];

for(var i=0; i

var wgs84_point = _this.Cartesian3_to_WGS84({

x: positions[i].x,

y: positions[i].y,

z: positions[i].z

});

wgs84_positions.push(wgs84_point);

}

console.log(wgs84_positions);

});

});

$("#rectBtn").bind('click',function(){

_this.drawRect(function(positions){

var wgs84_positions = [];

for(var i=0; i

var wgs84_point = _this.Cartesian3_to_WGS84({

x: positions[i].x,