|
|
|
|
@ -20,6 +20,7 @@
|
|
|
|
|
<script>
|
|
|
|
|
import MarsMap from "@/components/mars-map";
|
|
|
|
|
import grids from "@/components/grids.vue";
|
|
|
|
|
import { color } from "echarts";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
|
@ -93,62 +94,133 @@ export default {
|
|
|
|
|
*/
|
|
|
|
|
createCar() {
|
|
|
|
|
let _this = this;
|
|
|
|
|
for (let i = 0; i < 1; i++) {
|
|
|
|
|
const graphic = new mars3d.graphic.DivGraphic({
|
|
|
|
|
id: "car" + i,
|
|
|
|
|
position: [120.590416, 31.275593],
|
|
|
|
|
style: {
|
|
|
|
|
className: `carIcon`,
|
|
|
|
|
html: `<div>
|
|
|
|
|
<div class="car-name">001号线_01_早送_守押001_苏E</div>
|
|
|
|
|
</div>`,
|
|
|
|
|
// for (let i = 0; i < 1; i++) {
|
|
|
|
|
const fixedRoute = new mars3d.graphic.FixedRoute({
|
|
|
|
|
name: "贴模型表面漫游",
|
|
|
|
|
speed: 60,
|
|
|
|
|
positions: [
|
|
|
|
|
[120.590416, 31.275593, 13.3],
|
|
|
|
|
[120.608262, 31.285448, 21.7],
|
|
|
|
|
[120.604422, 31.30131, 30.9],
|
|
|
|
|
[120.594454, 31.301157, 13.1],
|
|
|
|
|
[120.587841, 31.300478, 13.1],
|
|
|
|
|
[120.589466, 31.293781, 9.5],
|
|
|
|
|
[120.586515, 31.292848, 16.2],
|
|
|
|
|
],
|
|
|
|
|
camera: {
|
|
|
|
|
type: "gs",
|
|
|
|
|
heading: 0,
|
|
|
|
|
radius: 500,
|
|
|
|
|
},
|
|
|
|
|
billboard: {
|
|
|
|
|
image: require("../assets/images/car-active.png"),
|
|
|
|
|
width: 210,
|
|
|
|
|
height: 100,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
distanceDisplayCondition: true,
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
visibleDepth: true,
|
|
|
|
|
label: {
|
|
|
|
|
text: "001号线_01_早送_守押001_苏E",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
font_size: 13,
|
|
|
|
|
pixelOffsetY: -81,
|
|
|
|
|
pixelOffsetX: 10,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
|
|
distanceDisplayCondition: true,
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
visibleDepth: false,
|
|
|
|
|
},
|
|
|
|
|
attr: {
|
|
|
|
|
index: i,
|
|
|
|
|
id: "car" + i,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.graphicLayer.addGraphic(graphic);
|
|
|
|
|
// //绑定弹窗
|
|
|
|
|
this.bindPopup(graphic);
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
graphic.openPopup();
|
|
|
|
|
graphic.openHighlight(
|
|
|
|
|
{
|
|
|
|
|
className: `carIconActive`,
|
|
|
|
|
},
|
|
|
|
|
false
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const circleGraphic = new mars3d.graphic.CircleEntity({
|
|
|
|
|
id: `circle1`,
|
|
|
|
|
position: new mars3d.LngLatPoint(120.590416, 31.275593),
|
|
|
|
|
style: {
|
|
|
|
|
radius: 150,
|
|
|
|
|
},
|
|
|
|
|
circle: {
|
|
|
|
|
radius: 60,
|
|
|
|
|
materialType: mars3d.MaterialType.CircleWave,
|
|
|
|
|
materialOptions: {
|
|
|
|
|
color: "#FAAC51",
|
|
|
|
|
count: 2,
|
|
|
|
|
speed: 10,
|
|
|
|
|
},
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
},
|
|
|
|
|
polyline: {
|
|
|
|
|
// lastMaterialType: "LineTrail",
|
|
|
|
|
width: 10,
|
|
|
|
|
// closure: true,
|
|
|
|
|
color: "#00F7AC",
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineColor: "#008DF8",
|
|
|
|
|
outlineWidth: 5,
|
|
|
|
|
// materialOptions: {
|
|
|
|
|
// color: "#008BFA",
|
|
|
|
|
// materialType: "LineTrail",
|
|
|
|
|
// speed: 0,
|
|
|
|
|
// },
|
|
|
|
|
// materialType: "LineTrail",
|
|
|
|
|
// },
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
this.graphicLayer.addGraphic(circleGraphic);
|
|
|
|
|
this.graphicLayer.addGraphic(fixedRoute);
|
|
|
|
|
//绑定弹窗
|
|
|
|
|
this.bindPopup(fixedRoute);
|
|
|
|
|
//开始漫游
|
|
|
|
|
fixedRoute.start();
|
|
|
|
|
//打开弹窗
|
|
|
|
|
fixedRoute.openPopup();
|
|
|
|
|
// const graphic = new mars3d.graphic.DivGraphic({
|
|
|
|
|
// id: "car" + i,
|
|
|
|
|
// position: [120.590416, 31.275593],
|
|
|
|
|
// style: {
|
|
|
|
|
// className: `carIcon`,
|
|
|
|
|
// html: `<div>
|
|
|
|
|
// <div class="car-name">001号线_01_早送_守押001_苏E</div>
|
|
|
|
|
// </div>`,
|
|
|
|
|
// color: "#fff",
|
|
|
|
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
|
|
|
|
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
// distanceDisplayCondition: true,
|
|
|
|
|
// clampToGround: true,
|
|
|
|
|
// },
|
|
|
|
|
// attr: {
|
|
|
|
|
// index: i,
|
|
|
|
|
// id: "car" + i,
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
this.map.flyToPoint([120.590416, 31.275593], {
|
|
|
|
|
radius: 798.9,
|
|
|
|
|
heading: 357.9,
|
|
|
|
|
pitch: -31.6,
|
|
|
|
|
});
|
|
|
|
|
// this.graphicLayer.addGraphic(graphic);
|
|
|
|
|
// // //绑定弹窗
|
|
|
|
|
// this.bindPopup(graphic);
|
|
|
|
|
|
|
|
|
|
// this.$nextTick(() => {
|
|
|
|
|
// graphic.openPopup();
|
|
|
|
|
// graphic.openHighlight(
|
|
|
|
|
// {
|
|
|
|
|
// className: `carIconActive`,
|
|
|
|
|
// },
|
|
|
|
|
// false
|
|
|
|
|
// );
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// const circleGraphic = new mars3d.graphic.CircleEntity({
|
|
|
|
|
// id: `circle1`,
|
|
|
|
|
// position: new mars3d.LngLatPoint(120.590416, 31.275593),
|
|
|
|
|
// style: {
|
|
|
|
|
// radius: 150,
|
|
|
|
|
// materialType: mars3d.MaterialType.CircleWave,
|
|
|
|
|
// materialOptions: {
|
|
|
|
|
// color: "#FAAC51",
|
|
|
|
|
// count: 3,
|
|
|
|
|
// speed: 10,
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
// this.graphicLayer.addGraphic(circleGraphic);
|
|
|
|
|
|
|
|
|
|
// this.map.flyToPoint([120.590416, 31.275593], {
|
|
|
|
|
// radius: 798.9,
|
|
|
|
|
// heading: 357.9,
|
|
|
|
|
// pitch: -31.6,
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// this.changePosition(0);
|
|
|
|
|
// 定时更新动态位置（setInterval为演示）
|
|
|
|
|
@ -210,9 +282,9 @@ export default {
|
|
|
|
|
</div>`,
|
|
|
|
|
{
|
|
|
|
|
className: "carPopup",
|
|
|
|
|
offsetX: 250,
|
|
|
|
|
offsetY: -50,
|
|
|
|
|
closeButton: false,
|
|
|
|
|
offsetX: 280,
|
|
|
|
|
offsetY: 20,
|
|
|
|
|
// closeButton: false,
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
|
