<template>
|
<div id="cesiumContainer"></div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
open: Boolean,
|
mapData: Array,
|
},
|
data() {
|
return {
|
viewer: {},
|
handler: {},
|
entity: null,
|
element: {},
|
};
|
},
|
watch: {
|
open(val) {
|
// if()
|
// this.makeBill();
|
if (val) {
|
// 移除事件
|
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
this.handler.setInputAction((movement) => {
|
var position = this.viewer.scene.camera.pickEllipsoid(
|
movement.position,
|
this.viewer.scene.globe.ellipsoid
|
);
|
var cartographic = Cesium.Cartographic.fromCartesian(position);
|
let lng = Cesium.Math.toDegrees(cartographic.longitude);
|
let lat = Cesium.Math.toDegrees(cartographic.latitude);
|
this.$emit('fromChlid', { lng, lat });
|
if (this.entity !== null) {
|
this.entity.position = Cesium.Cartesian3.fromDegrees(lng, lat);
|
} else {
|
this.makeBill(lng, lat);
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
} else {
|
// 移除事件
|
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
}
|
},
|
mapData(val) {
|
let content;
|
val.forEach((e) => {
|
if (e.content !== null) {
|
content = JSON.parse(e.content);
|
}
|
});
|
// console.log(content);
|
this.redrawPlotting(content);
|
},
|
},
|
mounted() {
|
this.viewer = new Cesium.Viewer('cesiumContainer', {
|
animation: false, //是否创建动画小器件，左下角仪表
|
baseLayerPicker: false, //是否显示图层选择器
|
fullscreenButton: false, //是否显示全屏按钮
|
geocoder: false, //是否显示geocoder小器件，右上角查询按钮
|
homeButton: false, //是否显示Home按钮
|
infoBox: false, //是否显示信息框
|
sceneModePicker: false, //是否显示3D/2D选择器
|
selectionIndicator: false, //是否显示选取指示器组件
|
timeline: false, //是否显示时间轴
|
navigationHelpButton: false, //是否显示右上角的帮助按钮
|
scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
|
CreditsDisplay: false, //展示数据版权属性
|
imageryProvider: new Cesium.UrlTemplateImageryProvider({
|
url: './earth/{z}/{x}/{reverseY}.jpeg',
|
minimumLevel: 0,
|
maximumLevel: 6,
|
}),
|
// imageryProvider: new this.Cesium.SingleTileImageryProvider({
|
// // url: 'http://103.85.171.154:60080/gisserver/tmsserver/earth_tms/{z}/{x}/{reverseY}.jpeg"'
|
// // }),
|
});
|
this.viewer._cesiumWidget._creditContainer.style.display = 'none';
|
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
var urls1 = `./beijingmtg`;
|
var urls2 = `./map`;
|
// layer = this.viewer.Creator.createUrlTemplateImageryProvider(
|
// "tms服务",
|
// {
|
// url: Cesium.buildModuleUrl(urls1 + "/{z}/{x}/{y}.png"),
|
// },
|
// "0",
|
// undefined,
|
// true,
|
// ""
|
// );
|
var urlTemplateImageryProvider = new Cesium.UrlTemplateImageryProvider({
|
url: urls1 + '/{z}/{x}/{y}.png',
|
});
|
this.viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);
|
|
var layers = this.viewer.scene.imageryLayers;
|
var blackMarble = layers.addImageryProvider(
|
new Cesium.createTileMapServiceImageryProvider({
|
url: urls2, //url为文件夹地址
|
})
|
);
|
// var layers = this.viewer.scene.imageryLayers;
|
// var tmsLayer = layers.addImageryProvider(
|
// new Cesium.TileMapServiceImageryProvider({
|
// url : 'http://127.0.0.1:8020/spgisgdp/preData/BIGMAP_TMS' //url为文件夹地址
|
// })
|
// );
|
},
|
methods: {
|
/* 获取camera中心点坐标 */
|
getCenterPosition() {
|
var result = this.viewer.camera.pickEllipsoid(
|
new Cesium.Cartesian2(
|
this.viewer.canvas.clientWidth / 2,
|
this.viewer.canvas.clientHeight / 2
|
)
|
);
|
var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result);
|
var lon = (curPosition.longitude * 180) / Math.PI;
|
var lat = (curPosition.latitude * 180) / Math.PI;
|
return {
|
lon: lon,
|
lat: lat,
|
};
|
},
|
makeBill(lng, lat) {
|
this.entity = this.viewer.entities.add({
|
name: '点',
|
position: Cesium.Cartesian3.fromDegrees(lng, lat),
|
billboard: {
|
image: './img/jjd.png',
|
scale: 1,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.1),
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
|
},
|
});
|
},
|
//重新绘制对象
|
redrawPlotting(node) {
|
this.element = node;
|
if (this.element.type == 'polyline') {
|
//定义折线几何
|
var mypolyline = new Cesium.PolylineGraphics({
|
positions: Cesium.Cartesian3.fromDegreesArray(this.element.positions),
|
width: this.element.linewidth,
|
// height: 0,
|
material: new Cesium.Color(
|
this.element.fillcolor[0],
|
this.element.fillcolor[1],
|
this.element.fillcolor[2],
|
this.element.fillalpha
|
),
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
this.element.mindistance,
|
this.element.maxdistance
|
),
|
});
|
if (this.element.isborder) {
|
mypolyline = new Cesium.PolylineGraphics({
|
positions: Cesium.Cartesian3.fromDegreesArray(
|
this.element.positions
|
),
|
width: this.element.linewidth,
|
// height: 0,
|
material: new Cesium.PolylineOutlineMaterialProperty({
|
color: new Cesium.Color(
|
this.element.fillcolor[0],
|
this.element.fillcolor[1],
|
this.element.fillcolor[2],
|
this.element.fillalpha
|
),
|
outlineWidth: this.element.bordersize,
|
outlineColor: new Cesium.Color(
|
this.element.bordercolor[0],
|
this.element.bordercolor[1],
|
this.element.bordercolor[2],
|
this.element.borderalpha
|
),
|
}),
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
this.element.mindistance,
|
this.element.maxdistance
|
),
|
});
|
}
|
var polylineshow = this.viewer.entities.add({
|
name: this.element.name,
|
polyline: mypolyline,
|
});
|
// this.viewer.Creator.SimpleGraphic.SimpleGraphicObj.push(
|
// polylineshow.id
|
// );
|
this.viewer.flyTo(polylineshow, {
|
// offset: {
|
// heading: Cesium.Math.toRadians(0.0),
|
// pitch: Cesium.Math.toRadians(-25),
|
// range: alt,
|
// },
|
});
|
} else if (this.element.type == 'label') {
|
let entity = this.viewer.entities.add({
|
name: this.element.name,
|
position: Cesium.Cartesian3.fromDegrees(
|
this.element.positions[0],
|
this.element.positions[1],
|
this.element.positions[2]
|
),
|
label: {
|
text: this.element.text,
|
font: this.element.fontszie, //字体样式
|
scale: this.element.scale,
|
fillColor: new Cesium.Color(
|
this.element.fillcolor[0],
|
this.element.fillcolor[1],
|
this.element.fillcolor[2],
|
this.element.fillalpha
|
),
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
this.element.mindistance,
|
this.element.maxdistance
|
), //字体颜色
|
backgroundColor: Cesium.Color.AQUA, //背景颜色
|
// showBackground: true, //是否显示背景颜色
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
// style: Cesium.LabelStyle.FILL, //label样式
|
// outlineWidth: 2,
|
verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
|
},
|
});
|
this.viewer.flyTo(entity, {
|
// offset: {
|
// heading: Cesium.Math.toRadians(0.0),
|
// pitch: Cesium.Math.toRadians(-25),
|
// range: alt,
|
// },
|
});
|
if (this.element.isborder) {
|
entity.label.outline = this.element.isborder;
|
entity.label.outlineWidth = this.element.bordersize;
|
entity.label.outlineColor = new Cesium.Color(
|
this.element.bordercolor[0],
|
this.element.bordercolor[1],
|
this.element.bordercolor[2],
|
this.element.borderalpha
|
);
|
}
|
if (this.element.isbackground) {
|
entity.label.showBackground = this.element.isbackground;
|
entity.label.backgroundColor = new Cesium.Color(
|
this.element.backcolor[0],
|
this.element.backcolor[1],
|
this.element.backcolor[2],
|
this.element.backalpha
|
);
|
}
|
// this.viewer.Creator.SimpleGraphic.SimpleGraphicObj.push(entity.id);
|
} else if (this.element.type == 'billboard') {
|
let entity = this.viewer.entities.add({
|
name: this.element.name,
|
position: Cesium.Cartesian3.fromDegrees(
|
this.element.positions[0],
|
this.element.positions[1],
|
this.element.positions[2]
|
),
|
billboard: {
|
image: this.element.image,
|
scale: this.element.imagescale,
|
color: new Cesium.Color(
|
this.element.fillcolor[0],
|
this.element.fillcolor[1],
|
this.element.fillcolor[2],
|
this.element.fillalpha
|
),
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
this.element.mindistance,
|
this.element.maxdistance
|
),
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
|
},
|
});
|
this.viewer.flyTo(entity, {
|
// offset: {
|
// heading: Cesium.Math.toRadians(0.0),
|
// pitch: Cesium.Math.toRadians(-25),
|
// range: alt,
|
// },
|
});
|
if (this.element.width != '')
|
entity.billboard.width = this.element.width;
|
if (this.element.height != '')
|
entity.billboard.width = this.element.height;
|
if (this.element.rotate != '')
|
entity.billboard.rotation = this.element.rotate;
|
// this.viewer.Creator.SimpleGraphic.SimpleGraphicObj.push(entity.id);
|
} else if (this.element.type == 'polygon') {
|
var myPolygon1 = new Cesium.PolygonGraphics({
|
hierarchy: Cesium.Cartesian3.fromDegreesArray(this.element.positions),
|
material: new Cesium.Color(
|
this.element.fillcolor[0],
|
this.element.fillcolor[1],
|
this.element.fillcolor[2],
|
this.element.fillalpha
|
),
|
height: 0,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
this.element.mindistance,
|
this.element.maxdistance
|
),
|
});
|
var polygonshow = this.viewer.Viewer.entities.add({
|
name: this.element.name,
|
polygon: myPolygon1,
|
});
|
this.viewer.flyTo(polygonshow, {
|
// offset: {
|
// heading: Cesium.Math.toRadians(0.0),
|
// pitch: Cesium.Math.toRadians(-25),
|
// range: alt,
|
// },
|
});
|
if (this.element.isborder) {
|
polygonshow.polygon.outline = true;
|
if (this.element.bordersize == '')
|
polygonshow.polygon.outlineWidth = 1;
|
else polygonshow.polygon.outlineWidth = this.element.bordersize;
|
polygonshow.polygon.outlineColor = new Cesium.Color(
|
this.element.bordercolor[0],
|
this.element.bordercolor[1],
|
this.element.bordercolor[2],
|
this.element.borderalpha
|
);
|
}
|
// this.viewer.Creator.SimpleGraphic.SimpleGraphicObj.push(polygonshow.id);
|
} else if (
|
this.element.type == 'SwallowtailArrow' ||
|
this.element.type == 'StraightArrow' ||
|
this.element.type == 'PincerArrow' ||
|
this.element.type == 'GatheringPlace'
|
) {
|
var myPolygon1 = new Cesium.PolygonGraphics({
|
hierarchy: Cesium.Cartesian3.fromDegreesArray(this.element.positions),
|
material: new Cesium.Color(
|
this.element.fillcolor[0],
|
this.element.fillcolor[1],
|
this.element.fillcolor[2],
|
this.element.fillalpha
|
),
|
height: 0,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
this.element.mindistance,
|
this.element.maxdistance
|
),
|
});
|
var polygonArrowShow = this.viewer.entities.add({
|
name: this.element.name,
|
polygon: myPolygon1,
|
});
|
this.viewer.flyTo(polygonArrowShow, {
|
// offset: {
|
// heading: Cesium.Math.toRadians(0.0),
|
// pitch: Cesium.Math.toRadians(-25),
|
// range: alt,
|
// },
|
});
|
|
// polygonArrowShow.GeoType = this.element.type; //平尾箭头等
|
// polygonArrowShow.pottingPoint = this.element.plottingpoints;
|
// this.viewer.Creator.SimpleGraphic.SimpleGraphicObj.push(
|
// polygonArrowShow.id
|
// );
|
}
|
// this.plotData = sgworld.Viewer.entities._entities;
|
// console.log( sgworld.Creator);
|
},
|
},
|
};
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style scoped lang="less">
|
.cesium-widget-credits {
|
display: none !important;
|
}
|
</style>
|
