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

修复无感token、处理离线底图、优化实时调用

Browse Source
main
许宏杰 8 months ago
parent 9dc0ebc706
commit 665b8f6db2
11 changed files with 390 additions and 168 deletions
Show Stats Download Patch File Download Diff File

3
.env.development
Unescape View File

@ -6,7 +6,8 @@ ENV = 'development'
# 云坤地图/开发环境 # 云坤地图/开发环境
# VUE_APP_BASE_API = 'http://192.168.0.91/gps-web/api' # VUE_APP_BASE_API = 'http://192.168.0.91/gps-web/api'
VUE_APP_BASE_API = 'http://39.101.188.84:9066' # VUE_APP_BASE_API = 'http://39.101.188.84:9066'
VUE_APP_BASE_API = 'http://192.168.0.77:9066'
VUE_APP_BASE_API_YUNKUN = 'http://192.168.0.91/gps-web/api' VUE_APP_BASE_API_YUNKUN = 'http://192.168.0.91/gps-web/api'
# 路由懒加载 # 路由懒加载

13
src/main.js
Unescape View File

@ -17,8 +17,17 @@ import { download } from "@/utils/request";
import "./assets/icons"; // icon import "./assets/icons"; // icon
import "./permission"; // permission control import "./permission"; // permission control
// import 'leaflet/dist/leaflet.css' // leaflet样式 // 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
// import L from "leaflet"; import "leaflet/dist/leaflet.css";
import * as L from "leaflet";
/* leaflet icon */
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
iconUrl: require("leaflet/dist/images/marker-icon.png"),
shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
});
import { getDicts } from "@/api/system/dict/data"; import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config"; import { getConfigKey } from "@/api/system/config";

24
src/router/index.js
Unescape View File

@ -80,18 +80,18 @@ export const constantRoutes = [
name: "Index", name: "Index",
meta: { title: "首页", icon: "dashboard", affix: true }, meta: { title: "首页", icon: "dashboard", affix: true },
}, },
// { {
// path: "/AboutView", path: "/HomeView",
// component: () => import("@/views/lijinlong/AboutView"), component: () => import("@/views/lijinlong/HomeView"),
// name: "Index", name: "Index",
// meta: { title: "3d", icon: "dashboard", affix: true }, meta: { title: "3d", icon: "dashboard", affix: true },
// }, },
// { {
// path: "/cityDimension", path: "/cityDimension",
// component: () => import("@/views/cityDimension"), component: () => import("@/views/cityDimension"),
// name: "cityDimension", name: "cityDimension",
// meta: { title: "姑苏二维", icon: "dashboard", affix: true }, meta: { title: "姑苏二维", icon: "dashboard", affix: true },
// }, },
{ {
path: "/car", path: "/car",
component: () => import("@/views/car"), component: () => import("@/views/car"),

35
src/utils/request-yunkun.js
Unescape View File

@ -19,7 +19,7 @@ const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分 // axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API_YUNKUN, baseURL: process.env.VUE_APP_BASE_API_YUNKUN,
// 超时 // 超时
timeout: 10000, timeout: 30000,
}); });
// request拦截器 // request拦截器
@ -108,15 +108,21 @@ service.interceptors.response.use(
return res.data; return res.data;
} }
//接口调取失败 -- sessionId //接口调取失败 -- sessionId
if (code == 200 && res.data.rspCode == 0 && !isRefreshRequest(res.config)) { let noToke = false;
if (res.data.rspDesc) {
noToke = res.data.rspDesc.includes("登录会话");
}
// console.log(res.data.rspCode);
if (res.data.rspCode == 0 && !isRefreshRequest(res.config)) {
const isSucceed = await refreshToken(); const isSucceed = await refreshToken();
if (isSucceed) { if (isSucceed) {
//重新给接口中的sessionId赋值 //重新给接口中的sessionId赋值
const sessionId = localStorage.getItem("SESSION_ID"); const sessionId = localStorage.getItem("SESSION_ID");
res.config.url = res.config.url.replace( console.log(res.config.url, "无token");
/(sessionId=)[^\&]+/,
"$1" + sessionId res.config.url = addSessionId(res.config.url, sessionId);
);
console.log(res.config.url, "处理后");
let result = await service.request(res.config); //重新请求 let result = await service.request(res.config); //重新请求
return result; return result;
} else { } else {
@ -174,6 +180,23 @@ service.interceptors.response.use(
} }
); );
function addSessionId(url, sessionIdValue) {
// 正则表达式检查是否已经有 sessionId 参数
const sessionIdPattern = /[?&]sessionId=/;
// 如果已经包含 sessionId 参数，直接返回原 URL
if (sessionIdPattern.test(url)) {
return url;
}
// 添加 sessionId 参数到 URL 的末尾
if (url.includes("?")) {
return url + `&sessionId=${sessionIdValue}`;
} else {
return url + `?sessionId=${sessionIdValue}`;
}
}
// 通用下载方法 // 通用下载方法
export function download(url, params, filename, config) { export function download(url, params, filename, config) {
downloadLoadingInstance = Loading.service({ downloadLoadingInstance = Loading.service({

24
src/views/car copy.vue
Unescape View File

@ -103,18 +103,18 @@ export default {
contextmenu: { preventDefault: false, hasDefault: false }, contextmenu: { preventDefault: false, hasDefault: false },
}, },
basemaps: [ basemaps: [
// { {
// name: "mapbox影像图", name: "mapbox影像图",
// icon: "img/basemaps/mapboxSatellite.png", icon: "img/basemaps/mapboxSatellite.png",
// type: "mapbox", type: "mapbox",
// username: "sharealex", username: "sharealex",
// styleId: "cly5i21fn00e901prgq643t4r", styleId: "cly5i21fn00e901prgq643t4r",
// token: token:
// "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw", "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
// tilesize: 256, tilesize: 256,
// scaleFactor: false, scaleFactor: false,
// show: false, show: false,
// }, },
], ],
}, },
show: false, show: false,

213
src/views/car.vue
Unescape View File

@ -24,6 +24,7 @@
> >
{{ item.carName }} {{ item.carName }}
</div> </div>
<div class="no-data" v-show="searchText">{{ searchText }}</div>
</div> </div>
</el-collapse-transition> </el-collapse-transition>
</div> </div>
@ -62,12 +63,13 @@ export default {
const basePathUrl = window.basePathUrl || ""; const basePathUrl = window.basePathUrl || "";
return { return {
searchList: [], searchList: [],
searchText: "",
searchQuery: { searchQuery: {
carPlate: undefined, //车牌 carPlate: undefined, //车牌
plateColor: undefined, //车辆颜色 plateColor: undefined, //车辆颜色
}, },
carQuery: { carQuery: {
teamId: "", //该参数表示获取指定车队下所有层级子车队的车辆定位，该参数优先级别高于carIds参数, teamId: 2, //该参数表示获取指定车队下所有层级子车队的车辆定位，该参数优先级别高于carIds参数,
carIds: "", //车辆id 多个用逗号分开，优先级低于teamId carIds: "", //车辆id 多个用逗号分开，优先级低于teamId
}, },
list: [], list: [],
@ -99,10 +101,31 @@ export default {
showSkyBox: false, showSkyBox: false,
showSun: false, showSun: false,
}, },
control: { control: {
contextmenu: { preventDefault: false, hasDefault: false }, contextmenu: { preventDefault: false, hasDefault: false },
}, },
basemaps: [
{
name: "影像地图",
type: "xyz",
url: "/map/{z}/{y}/{x}.png",
minimumLevel: 1,
maximumLevel: 16,
show: true,
},
// {
// name: "mapbox影像图",
// icon: "img/basemaps/mapboxSatellite.png",
// type: "mapbox",
// username: "sharealex",
// styleId: "cly5i21fn00e901prgq643t4r",
// token:
// "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
// tilesize: 256,
// scaleFactor: false,
// show: true,
// },
],
}, },
show: false, show: false,
showVideo: true, showVideo: true,
@ -121,6 +144,18 @@ export default {
document.addEventListener("click", this.handleClickOutside); document.addEventListener("click", this.handleClickOutside);
}, },
methods: { methods: {
/**获取车辆接口 */
async carPoint() {
let res = await getCarPoint(this.carQuery);
// console.log(res.list);
// res.list = res.list.filter(
// (item) =>
// item.carPlate.includes("苏E") ||
// (item.carPlate.includes("苏U") && item.stateCn.includes("在线-行驶"))
// );
return res.list;
},
/** /**
* 加载姑苏区三维图层 * 加载姑苏区三维图层
*/ */
@ -161,34 +196,27 @@ export default {
this.createCar(); this.createCar();
}, },
/**创建车辆 */ /**创建车辆 */
createCar() { async createCar(type) {
let list = [ this.list = await this.carPoint();
{
name: "001号线_01_早送_守押001_苏E",
position: [120.608163, 31.184288, 13.5],
},
{
name: "002号线_01_维护_守押085_苏E",
position: [120.607528, 31.209201, 11.1],
},
{
name: "临时任务_考试院_守押072_苏E123",
position: [120.657466, 31.220895, 12.7],
},
];
this.mapLayer.car.clear(); this.mapLayer.car.clear();
this.mapLayer.car.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间 this.mapLayer.car.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
for (let index = 0; index < list.length; index++) { for (let index = 0; index < this.list.length; index++) {
let item = list[index]; let item = this.list[index];
const graphic = new mars3d.graphic.ModelEntity({ const graphic = new mars3d.graphic.ModelEntity({
id: `car${index + 1}`, id: `car${item.carId}`,
position: item.position, // position: new mars3d.LngLatPoint(
// parseFloat(item.lng),
// parseFloat(item.lat),
// 30
// ),
style: { style: {
url: this.carUrl, url: this.carUrl,
scale: 0.5, scale: 0.5,
minimumPixelSize: 30, minimumPixelSize: 30,
silhouette: true, silhouette: true,
silhouetteColor: "#008cff", silhouetteColor: "#008cff",
pitch: 0, //俯仰角
roll: 0, //翻滚角
highlight: { highlight: {
type: "click", type: "click",
silhouette: true, silhouette: true,
@ -206,19 +234,16 @@ export default {
}, },
}, },
attr: { attr: {
index: index + 1, index: item.carId,
}, },
}); });
this.mapLayer.car.addGraphic(graphic); this.mapLayer.car.addGraphic(graphic);
this.mapLayer.car.enabledEvent = true; // 恢复事件 this.mapLayer.car.enabledEvent = true; // 恢复事件
graphic.bindPopup( graphic.bindPopup(
() => { () => {
let html = `<div id="car${index + 1}" class="carPlate"> let html = `<div id="car${item.carId}" class="carPlate">
<img src="${require(`../assets/images/carType${ <img src="${require(`../assets/images/carType${1}.png`)}" class="carType"/>
index + 1 ${item.carPlate}
}.png`)}" class="carType"/>
${item.name}
</div>`; </div>`;
return html; return html;
}, },
@ -242,7 +267,7 @@ export default {
this.handleCarActive({ this.handleCarActive({
id: e.target._id, id: e.target._id,
color: "#FFB200", color: "#FFB200",
image: require(`../assets/images/carType${e.target.attr.index}-s.png`), image: require(`../assets/images/carType1-s.png`),
}); });
}); });
graphic.on(mars3d.EventType.highlightClose, (e) => { graphic.on(mars3d.EventType.highlightClose, (e) => {
@ -254,71 +279,114 @@ export default {
this.handleCarActive({ this.handleCarActive({
id: e.target._id, id: e.target._id,
color: "#008cff", color: "#008cff",
image: require(`../assets/images/carType${e.target.attr.index}.png`), image: require(`../assets/images/carType1.png`),
}); });
}); });
this.$nextTick(() => {
if (type) {
console.log(type);
// 开启高亮
graphic.openHighlight();
}
});
graphic.on(mars3d.EventType.click, (e) => { graphic.on(mars3d.EventType.click, (e) => {
this.$router.push({ this.$router.push({
path: "/carInfo", path: "/carInfo",
// query: { carId: e.target.id }, query: { carId: e.target.attr.index },
}); });
}); });
// // 设置动态位置
// this.changePosition(0);
// // 定时更新动态位置（setInterval为演示）
// const interval = 30;
// this.changePosition(interval);
// this.time = setInterval(() => {
// this.changePosition(interval);
// }, interval * 1000);
} }
// 定时更新动态位置（setInterval为演示）
this.changePosition(0);
const interval = 15;
this.changePosition(interval);
this.time = setInterval(() => {
this.changePosition(interval);
}, interval * 1000);
}, },
changePosition(time) { async changePosition(interval) {
let list = await this.carPoint();
this.mapLayer.car.eachGraphic((graphic) => { this.mapLayer.car.eachGraphic((graphic) => {
graphic.addDynamicPosition(this.randomPoint(), time); // 按time秒运动至指定位置 let carItam = list.filter((car) => `car${car.carId}` == graphic.id);
if (carItam.length > 0) {
let position = Cesium.Cartesian3.fromDegrees(
parseFloat(carItam[0].lng),
parseFloat(carItam[0].lat),
30
);
graphic.addDynamicPosition(position, interval); // 按time秒运动至指定位置
}
}); });
}, },
randomPoint() { // randomPoint() {
const jd = this.random(120.2 * 1000, 120.9 * 1000) / 1000; // const jd = this.random(120.2 * 1000, 120.9 * 1000) / 1000;
const wd = this.random(30.9 * 1000, 31.6 * 1000) / 1000; // const wd = this.random(30.9 * 1000, 31.6 * 1000) / 1000;
return Cesium.Cartesian3.fromDegrees(jd, wd, 30); // return Cesium.Cartesian3.fromDegrees(jd, wd, 30);
}, // },
random(min, max) { // random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min); // return Math.floor(Math.random() * (max - min + 1) + min);
}, // },
/** /**
* 处理车辆被选中 * 处理车辆被选中
*/ */
handleCarActive(data) { handleCarActive(data) {
let carItem = document.getElementById(data.id); let carItem = document.getElementById(data.id);
// console.log(data, carItem);
let carIcon = carItem.getElementsByClassName("carType")[0]; let carIcon = carItem.getElementsByClassName("carType")[0];
carIcon.src = data.image; carIcon.src = data.image;
carItem.style.borderColor = data.color; carItem.style.borderColor = data.color;
}, },
/**搜索 */ /**根据车牌号查询车辆实时定位 */
handleSearch() { async handleSearch() {
this.searchList = [ if (!this.searchQuery.carPlate) return;
{ // 清除轮询定时器
carName: "002号线_01_维护_守押085_苏E", if (this.timer) clearInterval(this.timer);
position: [120.607528, 31.209201, 11.1], const result = await getCarByCarplate(this.searchQuery);
}, if (result.list) {
]; this.searchList = result.list;
} else {
this.searchText = result.rspDesc;
}
this.show = !this.show; this.show = true;
}, },
/**单击搜索结果 */ /**单击搜索结果 */
handelLookCar(item) { handelLookCar(item) {
let carItem = this.mapLayer.car.getGraphicById(`car2`); this.carQuery.teamId = undefined;
carItem.openHighlight(); this.carQuery.carIds = item.carId;
this.map.flyToPoint(item.position, { this.map.flyToPoint(
radius: 3788, new mars3d.LngLatPoint(parseFloat(item.lng), parseFloat(item.lat))
);
this.createCar(true);
this.show = false;
},
/**
* 清除操作
*/
inputClear() {
if (!this.searchQuery.carPlate) return;
if (this.timer) clearInterval(this.timer);
this.searchList = [];
this.searchText = "";
this.searchQuery = {
carPlate: undefined, //车牌
plateColor: undefined, //车辆颜色
};
this.carQuery = {
teamId: 2, //该参数表示获取指定车队下所有层级子车队的车辆定位，该参数优先级别高于carIds参数,
carIds: "", //车辆id 多个用逗号分开，优先级低于teamId
};
this.mapLayer.car.eachGraphic((graphic) => {
graphic.closeHighlight();
}); });
this.show = !this.show;
this.createCar();
this.show = false;
}, },
toggleSelection(item) { toggleSelection(item) {
@ -407,11 +475,13 @@ export default {
outline: none; outline: none;
} }
.search-list { .search-list {
position: relative;
width: 280px; width: 280px;
background: #032b57; background: #032b57;
color: #fff; color: #fff;
border: 1px solid #0084ff; border: 1px solid #0084ff;
border-top: 0; border-top: 0;
min-height: 150px;
& > div { & > div {
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
@ -420,6 +490,19 @@ export default {
& > div:hover { & > div:hover {
background: #0084ff; background: #0084ff;
} }
.no-data {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.no-data:hover {
background: transparent;
}
} }
} }
.video-list { .video-list {

151
src/views/carInfo.vue
Unescape View File

@ -27,7 +27,7 @@
import MarsMap from "@/components/mars-map"; import MarsMap from "@/components/mars-map";
import grids from "@/components/grids.vue"; import grids from "@/components/grids.vue";
import { getCarIdInfo } from "@/api/yunkun/index.js"; import { getCarIdInfo } from "@/api/yunkun/index.js";
import { historyLine, carMidle } from "@/api/yunkun/yunkun.js"; import { historyLine, carMidle, getCarPoint } from "@/api/yunkun/yunkun.js";
export default { export default {
data() { data() {
const basePathUrl = window.basePathUrl || ""; const basePathUrl = window.basePathUrl || "";
@ -55,6 +55,28 @@ export default {
control: { control: {
contextmenu: { preventDefault: false, hasDefault: false }, contextmenu: { preventDefault: false, hasDefault: false },
}, },
basemaps: [
{
name: "影像地图",
type: "xyz",
url: "/map/{z}/{y}/{x}.png",
minimumLevel: 1,
maximumLevel: 16,
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,
// },
],
}, },
Line: [], Line: [],
carUrl: basePathUrl + "static/qiche.gltf", carUrl: basePathUrl + "static/qiche.gltf",
@ -62,7 +84,17 @@ export default {
}, },
components: { MarsMap, grids }, components: { MarsMap, grids },
beforeDestroy() {}, beforeDestroy() {},
created() {}, created() {
const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted(true);
this.queryParams = {
carId: this.$route.query.carId,
startTime: startOfDay,
endTime: endOfDay,
};
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: { methods: {
/**地图渲染完毕 */ /**地图渲染完毕 */
mapLoad(map) { mapLoad(map) {
@ -109,16 +141,10 @@ export default {
} }
}, },
// 绘制历史轨迹线 -- 起点坐标 // 绘制历史轨迹线 -- 起点坐标
createLine() { async createLine() {
this.Line = [ let result = await historyLine(this.queryParams);
[120.60011, 31.26247], this.Line = result.list;
[120.599811, 31.267667],
[120.599341, 31.27582],
[120.59705, 31.278812],
[120.599466, 31.279271],
[120.61856, 31.28155],
[120.642973, 31.284112],
];
const marker = new mars3d.graphic.BillboardEntity({ const marker = new mars3d.graphic.BillboardEntity({
position: this.Line[0], position: this.Line[0],
style: { style: {
@ -131,7 +157,6 @@ export default {
}, },
}); });
this.mapLayer.Line.addGraphic(marker); this.mapLayer.Line.addGraphic(marker);
const line = new mars3d.graphic.PolylineEntity({ const line = new mars3d.graphic.PolylineEntity({
positions: this.Line, positions: this.Line,
style: { style: {
@ -144,25 +169,22 @@ export default {
}, },
}); });
this.mapLayer.Line.addGraphic(line); this.mapLayer.Line.addGraphic(line);
const lastPoint = this.Line[this.Line.length - 1];
// 创建起始点坐标 this.map.flyToPoint(
new mars3d.LngLatPoint(
parseFloat(lastPoint.lng),
parseFloat(lastPoint.lat)
)
);
}, },
//创建实时车辆漫游 //创建实时车辆漫游
async createCar() { async createCar() {
const lastPoint = this.Line[this.Line.length - 1];
const car = new mars3d.graphic.FixedRoute({ const car = new mars3d.graphic.FixedRoute({
id: this.queryParams.carId,
name: "漫游对象", name: "漫游对象",
speed: 45, // positions: [[parseFloat(lastPoint.lng), parseFloat(lastPoint.lat)]],
positions: [
lastPoint,
[120.6554, 31.285252, 13.6],
[120.654003, 31.298916, 10.8],
[120.649845, 31.299078, 14.2],
[120.647362, 31.308061, 17.4],
[120.645631, 31.314448, 16.1],
[120.638285, 31.312808, 10],
],
// camera: { // camera: {
// type: "gs", // type: "gs",
// heading: 0, // heading: 0,
@ -175,6 +197,9 @@ export default {
minimumPixelSize: 30, minimumPixelSize: 30,
silhouette: true, silhouette: true,
silhouetteColor: "#FFB200", silhouetteColor: "#FFB200",
pitch: 0,
roll: 0,
// heading: parseFloat(lastPoint.drct),
}, },
circle: { circle: {
radius: 200, radius: 200,
@ -195,11 +220,38 @@ export default {
}, },
}); });
this.mapLayer.car.addGraphic(car); this.mapLayer.car.addGraphic(car);
let res = await getCarIdInfo("1328CC51-C858-4FFA-8714-4F354BB49CF8"); // let res = await getCarIdInfo("1328CC51-C858-4FFA-8714-4F354BB49CF8");
// this.bindPopup(car, res.data);
// car.openPopup();
// car.start();
this.bindPopup(car, res.data); const interval = 15;
car.openPopup(); this.changePosition(interval);
car.start(); this.time = setInterval(() => {
this.changePosition(interval);
}, interval * 1000);
},
async changePosition(interval) {
let list = await this.carPoint();
let carItem = this.mapLayer.car.getGraphicById(this.queryParams.carId);
// carItem.model.heading = parseFloat(list[0].drct);
// console.log(carItem.model.heading, "sss");
//StyleOptions({
// heading:parseFloat(list[0].drct)
// })
let position = Cesium.Cartesian3.fromDegrees(
parseFloat(list[0].lng),
parseFloat(list[0].lat),
30
);
carItem.addDynamicPosition(position, interval);
},
/**获取车辆接口 */
async carPoint() {
let res = await getCarPoint({
carIds: this.queryParams.carId,
});
return res.list;
}, },
// 车辆弹窗 // 车辆弹窗
@ -251,6 +303,47 @@ export default {
// closeButton: false, // closeButton: false,
}); });
}, },
getStartAndEndOfDayFormatted(boole) {
const now = new Date();
const startOfDay = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate(),
0,
0,
0
);
const endOfDay = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate(),
23,
59,
59,
999
);
return {
startOfDay: this.formatDate(startOfDay, boole),
endOfDay: this.formatDate(endOfDay, boole),
};
},
formatDate(date, boole) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以要加1
const day = String(date.getDate()).padStart(2, "0");
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
if (boole) {
return `${year}${month}${day}${hours}${minutes}${seconds}`;
} else {
return `${year}${month}${day}`;
}
},
}, },
}; };
</script> </script>

8
src/views/cityDimension.vue
Unescape View File

@ -43,17 +43,13 @@ export default {
], ],
}); });
L.tileLayer( L.tileLayer("//192.168.0.77/map/{z}/{y}/{x}.png", {
"https://api.mapbox.com/styles/v1/sharealex/cllg9dw1i00iz01oj9zmu6iv7/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
{
maxZoom: 9,
noWrap: true, noWrap: true,
bounds: [ bounds: [
[-90, -180], [-90, -180],
[90, 180], [90, 180],
], ],
} }).addTo(this.map);
).addTo(this.map);
this.map.createPane("mapLayer1"); this.map.createPane("mapLayer1");
this.map.getPane("mapLayer1").style.zIndex = 501; this.map.getPane("mapLayer1").style.zIndex = 501;

27
src/views/index.vue
Unescape View File

@ -41,19 +41,28 @@ export default {
control: { control: {
contextmenu: { preventDefault: false, hasDefault: false }, contextmenu: { preventDefault: false, hasDefault: false },
}, },
basemaps: [ basemaps: [
{ {
name: "mapbox影像图", name: "影像地图",
icon: "img/basemaps/mapboxSatellite.png", type: "xyz",
type: "mapbox", url: "/map/{z}/{y}/{x}.png",
username: "sharealex", minimumLevel: 1,
styleId: "cly5i21fn00e901prgq643t4r", maximumLevel: 16,
token:
"pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
tilesize: 256,
scaleFactor: false,
show: true, show: true,
}, },
// {
// name: "mapbox影像图",
// icon: "img/basemaps/mapboxSatellite.png",
// type: "mapbox",
// username: "sharealex",
// styleId: "cly5i21fn00e901prgq643t4r",
// token:
// "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
// tilesize: 256,
// scaleFactor: false,
// show: true,
// },
], ],
}, },
mapLayer: {}, mapLayer: {},

44
src/views/lijinlong/HomeView.vue
Unescape View File

@ -25,7 +25,9 @@ export default {
}; };
}, },
created() {}, created() {},
// mounted() { this.initMap() }, mounted() {
this.initMap();
},
methods: { methods: {
initMap() { initMap() {
this.globalMap = L.map("leafletMap", { this.globalMap = L.map("leafletMap", {
@ -49,28 +51,28 @@ export default {
} }
).addTo(this.globalMap); ).addTo(this.globalMap);
// 国 // // 国
this.globalMap.createPane("provinceLayer"); // this.globalMap.createPane("provinceLayer");
this.globalMap.getPane("provinceLayer").style.zIndex = 504; // this.globalMap.getPane("provinceLayer").style.zIndex = 504;
this.globalMap.getPane("provinceLayer").style.pointerEvents = "none"; // this.globalMap.getPane("provinceLayer").style.pointerEvents = "none";
this.layerObj.provinceLayer = L.layerGroup().addTo(this.globalMap); // this.layerObj.provinceLayer = L.layerGroup().addTo(this.globalMap);
// 江苏省 // // 江苏省
this.globalMap.createPane("provinceLayer3"); // this.globalMap.createPane("provinceLayer3");
this.globalMap.getPane("provinceLayer3").style.zIndex = 505; // this.globalMap.getPane("provinceLayer3").style.zIndex = 505;
this.globalMap.getPane("provinceLayer3").style.pointerEvents = "none"; // this.globalMap.getPane("provinceLayer3").style.pointerEvents = "none";
this.layerObj.provinceLayer3 = L.layerGroup().addTo(this.globalMap); // this.layerObj.provinceLayer3 = L.layerGroup().addTo(this.globalMap);
// 苏州市 6区4县 // // 苏州市 6区4县
this.globalMap.createPane("provinceLayer2"); // this.globalMap.createPane("provinceLayer2");
this.globalMap.getPane("provinceLayer2").style.zIndex = 505; // this.globalMap.getPane("provinceLayer2").style.zIndex = 505;
this.globalMap.getPane("provinceLayer2").style.pointerEvents = "none"; // this.globalMap.getPane("provinceLayer2").style.pointerEvents = "none";
this.layerObj.provinceLayer2 = L.layerGroup().addTo(this.globalMap); // this.layerObj.provinceLayer2 = L.layerGroup().addTo(this.globalMap);
this.globalMap.createPane("provinceLayer4"); // this.globalMap.createPane("provinceLayer4");
this.globalMap.getPane("provinceLayer4").style.zIndex = 505; // this.globalMap.getPane("provinceLayer4").style.zIndex = 505;
this.globalMap.getPane("provinceLayer4").style.pointerEvents = "none"; // this.globalMap.getPane("provinceLayer4").style.pointerEvents = "none";
this.layerObj.provinceLayer4 = L.layerGroup().addTo(this.globalMap); // this.layerObj.provinceLayer4 = L.layerGroup().addTo(this.globalMap);
this.provinceLayer(); // this.provinceLayer();
}, },
provinceLayer() { provinceLayer() {
this.mygeojson = L.geoJSON(china, { this.mygeojson = L.geoJSON(china, {

6
vue.config.js
Unescape View File

@ -41,6 +41,12 @@ module.exports = {
["^" + process.env.VUE_APP_BASE_API]: "", ["^" + process.env.VUE_APP_BASE_API]: "",
}, },
}, },
"/map": {
target: `http://192.168.0.77/map`,
pathRewrite: {
"^/map": "",
},
},
}, },
disableHostCheck: true, disableHostCheck: true,
}, },

Write Preview
Loading…
Cancel
Save