suzhou-jichuang-lanhai
/
yunkunMap
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

车辆轮询

Browse Source
main
许宏杰 2 weeks ago
parent 17077ffb91
commit 0c51154f47
3 changed files with 125 additions and 136 deletions
Show Stats Download Patch File Download Diff File

4
public/index.html
Unescape View File

@ -37,8 +37,8 @@
type="text/javascript"
></script>
<script src="./lib/localforage.js" type="text/javascript"></script>
<script src="./lib/CesiumNetworkPlug.js" type="text/javascript"></script>
<!-- <script src="./lib/localforage.js" type="text/javascript"></script>
<script src="./lib/CesiumNetworkPlug.js" type="text/javascript"></script> -->
<title><%= webpackConfig.name %></title>
<!--[if lt IE 11

12
src/api/yunkun/yunkun.js
Unescape View File

@ -1,6 +1,5 @@
import request from "@/utils/request-yunkun.js";
const sessionId = localStorage.getItem("SESSION_ID");
// 登录
export function lgoin(query) {
return request({
@ -20,3 +19,14 @@ export function getCarList(query) {
params: query,
});
}
//车辆点位查询
export function getCarPoint(query) {
query.sessionId = sessionId;
return request({
url: "/get_gps_r.jsp",
method: "GET",
params: query,
});
}

245
src/views/car.vue
Unescape View File

@ -40,22 +40,29 @@
</template>
<script>
import carJSON from "@/api/carrRealtimeLocation.json";
import MarsMap from "@/components/mars-map";
// import grids from "@/components/grids.vue";
import { lgoin, getCarList } from "@/api/yunkun/yunkun.js";
import { getCarPoint } from "@/api/yunkun/yunkun.js";
export default {
data() {
const basePathUrl = window.basePathUrl || "";
return {
list: [],
multipleList: ["营运线路", "维护线路", "临时任务"],
selectedItems: [],
graphicLayer: null,
baseUrl: basePathUrl + "lib/geoJson/tileset.json",
carUrl: basePathUrl + "lib/car.gltf",
carUrl: basePathUrl + "lib/qiche.gltf",
map: null,
options: {
scene: {
// center: {
// lat: 31.754913,
// lng: 117.248572,
// alt: 6220,
// heading: 357,
// pitch: -31,
// },
center: {
lat: 31.212805,
lng: 120.607156,
@ -63,24 +70,35 @@ export default {
heading: 357.9,
pitch: -31.5,
},
fog: false,
fxaa: false,
removeDblClick: true,
requestRenderMode: false,
scene3DOnly: false,
sceneMode: 3,
shadows: false,
showMoon: false,
showSkyAtmosphere: false,
showSkyBox: false,
showSun: false,
},
control: {
contextmenu: { preventDefault: false, hasDefault: false },
},
basemaps: [
{
name: "mapbox影像图",
icon: "img/basemaps/mapboxSatellite.png",
type: "mapbox",
username: "sharealex",
styleId: "cly5i21fn00e901prgq643t4r",
token:
"pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
tilesize: 256,
scaleFactor: false,
show: true,
},
// {
// name: "mapbox影像图",
// icon: "img/basemaps/mapboxSatellite.png",
// type: "mapbox",
// username: "sharealex",
// styleId: "cly5i21fn00e901prgq643t4r",
// token:
// "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
// tilesize: 256,
// scaleFactor: false,
// show: false,
// },
],
},
show: false,
@ -96,60 +114,42 @@ export default {
mounted() {
// 在mounted钩子中添加全局点击事件监听
document.addEventListener("click", this.handleClickOutside);
this.getCarList();
},
methods: {
async getCarList() {
let res = await getCarList();
// console.log(res, "ss");
async getCarPoint() {
this.list = await this.carPoint();
this.createCar();
},
async getlogin() {
const data = {
userId: "99999",
password: "6d0fd76ab81325588d8065ec1036fdd3",
loginType: "user",
};
let res = await lgoin();
console.log(res, "登录数据");
},
// 获取车辆信息
getCarLocation() {
this.createCar(carJSON.list);
async carPoint() {
let res = await getCarPoint({
// carIds: "23,78",
});
res.list = res.list.filter(
(item) =>
item.carPlate.includes("苏E") ||
(item.carPlate.includes("苏U") && item.stateCn.includes("在线-行驶"))
);
return res.list.slice(0, 100);
},
/**
* 创建车辆图标
*/
createCar(list) {
let _this = this;
list.map((item, index) => {
createCar() {
this.graphicLayer.clear();
this.graphicLayer.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
// 设置动态位置
for (let i = 0; i < this.list.length; i++) {
let item = this.list[i];
const graphic = new mars3d.graphic.ModelPrimitive({
id: `car${item.carId}`,
position: [parseFloat(item.lng), parseFloat(item.lat)],
id: item.carId,
style: {
heading: parseInt(item.drct),
//url: _this.carUrl,
url: "//data.mars3d.cn/gltf/imap/ce2fddca7bac436d8d318bcd4fdf2d69/gltf/gltf2.gltf",
scale: 1,
minimumPixelSize: 40,
silhouette: true,
silhouetteColor: "#025CC1",
silhouetteSize: 2,
// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
highlight: {
type: mars3d.EventType.click,
silhouette: true,
silhouetteColor: "#FAAC51",
silhouetteSize: 2,
label: {
outlineColor: "#FAAC51",
},
},
// heading: parseInt(item.drct),
url: this.carUrl,
scale: 3,
minimumPixelSize: 20,
label: {
// 不需要文字时，去掉label配置即可
text: item.carName,
font_size: 14,
color: "#ffffff",
@ -160,68 +160,66 @@ export default {
distanceDisplayCondition_far: 50000,
distanceDisplayCondition_near: 0,
},
clampToGround: true,
},
// forwardExtrapolationType: Cesium.ExtrapolationType.NONE,
attr: { index: index, remark: "Model示例" },
// frameRateHeight: 30, // 控制贴模型的效率，多少帧计算一次
});
graphic.on(mars3d.EventType.click, function (e) {
_this.$router.push({ path: "/carInfo" });
});
this.graphicLayer.addGraphic(graphic);
});
this.graphicLayer.enabledEvent = true; // 恢复事件
// graphic.bindHighlight({
// type: mars3d.EventType.click,
// silhouette: true,
// silhouetteColor: "#FAAC51",
// silhouetteSize: 2,
// label: {
// outlineColor: "#FAAC51",
// },
// });
// graphic.on(mars3d.EventType.click, function (e) {
// _this.$router.push({ path: "/carInfo" });
// });
}
this.changePosition(0);
// 定时更新动态位置（setInterval为演示）
const interval = 10;
this.changePosition(interval);
this.time = setInterval(() => {
this.changePosition(interval);
}, interval * 1000);
},
/**
* 生成车辆实时点位
*/
// createCar(list) {
// let _this = this;
// console.log(list);
// for (let i = 0; i < list.length; i++) {
// let item = list[i];
// const graphic = new mars3d.graphic.DivGraphic({
// id: "car" + i,
// position: [parseFloat(item.lng), parseFloat(item.lat)],
// style: {
// className: `carIcon`,
// html: `<div>
// <div class="car-name">${item.carName}</div>
// </div>`,
// color: "#fff",
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// distanceDisplayCondition: false,
// clampToGround: true,
// highlight: {
// type: "click",
// className: `carIconActive`,
// },
// },
// attr: {
// index: i,
// id: "car" + i,
// },
// });
// graphic.on(mars3d.EventType.highlightOpen, function (event) {
// _this.$router.push("/carInfo");
// });
// this.graphicLayer.addGraphic(graphic);
// }
// 改变位置
async changePosition(interval) {
let list = await this.carPoint();
this.graphicLayer.eachGraphic((graphic) => {
for (let i = 0; i < list.length; i++) {
let item = list[i];
if (graphic.id == item.carId) {
// graphic.setOptions({
// style: {
// heading: parseInt(item.drct),
// },
// });
let position = Cesium.Cartesian3.fromDegrees(
parseFloat(item.lng),
parseFloat(item.lat),
30
);
graphic.addDynamicPosition(position, interval); // 按time秒运动至指定位置
}
}
});
},
// // this.changePosition(0);
// 取区域内的随机点
randomPoint() {
const jd = this.random(117.207666 * 1000, 117.287241 * 1000) / 1000;
const wd = this.random(31.817099 * 1000, 31.876848 * 1000) / 1000;
return Cesium.Cartesian3.fromDegrees(jd, wd, 30);
},
// // 定时更新动态位置（setInterval为演示）
// // const interval = 30;
// // this.changePosition(interval);
// // this.timer = setInterval(() => {
// // _this.changePosition(interval);
// // }, interval * 1000);
// },
random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
},
handleClickOutside(event) {
// 判断点击的元素是否在目标元素外部
@ -248,27 +246,8 @@ export default {
this.map = map;
this.graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(this.graphicLayer);
this.initTilesetLayer();
},
// 改变位置
changePosition(time) {
let _this = this;
this.graphicLayer.eachGraphic((graphic) => {
if (graphic.isPrivate) {
return;
}
graphic.addDynamicPosition(_this.randomPoint(), time); // 按time秒运动至指定位置
});
},
// 取区域内的随机点
randomPoint() {
const jd = this.random(120.5265 * 1000, 120.7177 * 1000) / 1000;
const wd = this.random(31.2783 * 1000, 31.4647 * 1000) / 1000;
return Cesium.Cartesian3.fromDegrees(jd, wd);
},
random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
// this.initTilesetLayer();
// this.getCarPoint();
},
/**

Write Preview
Loading…
Cancel
Save