|
After Width: | Height: | Size: 226 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 959 B |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,65 @@
|
||||
const obj = {
|
||||
borderWidth: 2,
|
||||
borderColor: "#006FCB",
|
||||
backgroundColor: "#00162D",
|
||||
fontSize: 14,
|
||||
fontColor: "#FFFFFF",
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 10,
|
||||
text: "001号线_01_早送_守押001_苏E", // 这里可以更改为需要绘制的文字
|
||||
};
|
||||
export function adjustCanvasSize(id) {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
// 设置文字样式以计算文本宽度
|
||||
ctx.font = `${obj.fontSize}px sans-serif`;
|
||||
|
||||
// 计算文本宽度
|
||||
const textWidth = ctx.measureText(obj.text).width;
|
||||
|
||||
// 计算画布宽度和高度（加上内边距和边框）
|
||||
const canvasWidth = textWidth + obj.paddingHorizontal * 2;
|
||||
const canvasHeight = obj.fontSize + obj.paddingVertical * 2;
|
||||
|
||||
// 设置画布宽度和高度
|
||||
canvas.width = canvasWidth;
|
||||
canvas.height = canvasHeight;
|
||||
|
||||
// 重新绘制矩形和文字
|
||||
return drawRectangle(canvas, id, canvasWidth, canvasHeight, textWidth);
|
||||
}
|
||||
function drawRectangle(canvas, id, canvasWidth, canvasHeight, textWidth) {
|
||||
let marker = document.getElementById("carMarker");
|
||||
canvas.id = id;
|
||||
const ctx = canvas.getContext("2d");
|
||||
// 清空画布
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
|
||||
// 绘制背景矩形
|
||||
ctx.fillStyle = obj.backgroundColor;
|
||||
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
|
||||
|
||||
// 绘制边框
|
||||
ctx.lineWidth = obj.borderWidth;
|
||||
ctx.strokeStyle = obj.borderColor;
|
||||
ctx.strokeRect(0.5, 0.5, canvasWidth - 1, canvasHeight - 1);
|
||||
|
||||
// 设置文字样式
|
||||
ctx.font = `${obj.fontSize}px sans-serif`;
|
||||
ctx.fillStyle = obj.fontColor;
|
||||
|
||||
// 计算文字的水平和垂直居中位置
|
||||
const textX = (canvasWidth - textWidth) / 2;
|
||||
const textY = (canvasHeight + obj.fontSize) / 2 - obj.paddingVertical / 2;
|
||||
// 绘制文字
|
||||
ctx.fillText(obj.text, textX, textY);
|
||||
marker.appendChild(canvas);
|
||||
return canvas;
|
||||
}
|
||||
|
||||
export function changeBorderColor(id) {
|
||||
let canvas = document.getElementById(id);
|
||||
|
||||
console.log(id, canvas);
|
||||
canvas.style.border = `1px solid #C08700`;
|
||||
}
|
||||
@ -0,0 +1,390 @@
|
||||
<template>
|
||||
<div class="map-container">
|
||||
<div class="extend-box">
|
||||
<div class="sub-title"></div>
|
||||
<div class="data-total">{{ total }}</div>
|
||||
</div>
|
||||
<mars-map @mapLoad="mapLoad" :options="options"></mars-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import point1 from "@/assets/images/levelcity.png";
|
||||
import point2 from "@/assets/images/province.png";
|
||||
import linePoint1 from "@/assets/images/linePoint1.png";
|
||||
import linePoint2 from "@/assets/images/linePoint2.png";
|
||||
import MarsMap from "@/components/mars-map";
|
||||
// import province from "@/assets/images/province.png";
|
||||
import { getProvince } from "@/api/yunkun/index.js";
|
||||
export default {
|
||||
data() {
|
||||
const basePathUrl = window.basePathUrl || "";
|
||||
return {
|
||||
cityAttr: {},
|
||||
total: 0,
|
||||
options: {
|
||||
scene: {
|
||||
center: {
|
||||
lat: -9.65789,
|
||||
lng: 110.718514,
|
||||
alt: 13807610.5,
|
||||
heading: 351.3,
|
||||
pitch: -73,
|
||||
},
|
||||
showSun: false,
|
||||
showMoon: false,
|
||||
showSkyBox: false,
|
||||
showSkyAtmosphere: false,
|
||||
fog: false,
|
||||
sceneMode: 1,
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
backgroundImage: `url(${require("../assets/images/big_bg.png")})`,
|
||||
orderIndependentTranslucency: false,
|
||||
contextOptions: { webgl: { antialias: mars3d.Util.isPCBroswer() } },
|
||||
globe: {
|
||||
show: false, // 不显示地球
|
||||
showGroundAtmosphere: false,
|
||||
enableLighting: 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: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
map: null,
|
||||
mapLayer: {},
|
||||
chinaUrl: basePathUrl + "lib/geoJson/json/china.json",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
mapLoad(map) {
|
||||
this.map = map;
|
||||
|
||||
map.setSceneOptions({
|
||||
cameraController: {
|
||||
// enableZoom: false,
|
||||
// enableTranslate: false,
|
||||
// enableRotate: false,
|
||||
// enableTilt: false,
|
||||
},
|
||||
});
|
||||
|
||||
this.mapLayer.china = new mars3d.layer.GraphicLayer({
|
||||
zIndex: 10,
|
||||
});
|
||||
map.addLayer(this.mapLayer.china);
|
||||
|
||||
//加载中国各个县
|
||||
this.initChina();
|
||||
},
|
||||
|
||||
initChina() {
|
||||
mars3d.Util.fetchJson({ url: this.chinaUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
|
||||
arr.map((item, index) => {
|
||||
this.cityAttr[item.attr.name] = item.attr;
|
||||
const polygonEntity = new mars3d.graphic.PolygonEntity({
|
||||
positions: item.positions,
|
||||
style: {
|
||||
fill: true,
|
||||
lastMaterialType: "Image",
|
||||
materialOptions: {
|
||||
materialType: "Image",
|
||||
image: require("../assets/images/map-bg.jpg"),
|
||||
opacity: 1,
|
||||
repeat_x: 1,
|
||||
repeat_y: 1,
|
||||
transparent: false,
|
||||
},
|
||||
|
||||
materialType: "Image",
|
||||
|
||||
opacity: 1,
|
||||
outline: true,
|
||||
outlineWidth: 1.5,
|
||||
outlineColor: "#00BEFF",
|
||||
setHeight: 1000000,
|
||||
},
|
||||
});
|
||||
const wall = new mars3d.graphic.WallPrimitive({
|
||||
positions: item.positions,
|
||||
style: {
|
||||
setHeight: -20000,
|
||||
diffHeight: 1000000, // 墙高
|
||||
width: 15,
|
||||
materialType: mars3d.MaterialType.Image2,
|
||||
materialOptions: {
|
||||
image: require("../assets/images/fence-top.png"),
|
||||
color: "#0064F8",
|
||||
},
|
||||
},
|
||||
});
|
||||
this.mapLayer.china.addGraphic(polygonEntity);
|
||||
this.mapLayer.china.addGraphic(wall);
|
||||
});
|
||||
|
||||
this.createEchartsLayer();
|
||||
});
|
||||
},
|
||||
|
||||
async createEchartsLayer() {
|
||||
const options = await this.getEchartsOption();
|
||||
const echartsLayer = new mars3d.layer.EchartsLayer(options);
|
||||
this.map.addLayer(echartsLayer);
|
||||
// 图表自适应
|
||||
window.addEventListener("resize", function () {
|
||||
echartsLayer.resize();
|
||||
});
|
||||
},
|
||||
|
||||
async getEchartsOption() {
|
||||
let res = await getProvince();
|
||||
|
||||
this.total = res.data.length;
|
||||
|
||||
const items = res.data.map((item, index) => {
|
||||
if (index == 0) {
|
||||
item = {
|
||||
level: 1,
|
||||
name: item.city,
|
||||
label: item.city,
|
||||
value: this.cityAttr[item.city].center,
|
||||
symbol: "",
|
||||
symbolSize: [65, 65],
|
||||
};
|
||||
} else {
|
||||
item = {
|
||||
level: 2,
|
||||
symbol: "",
|
||||
name: item.city,
|
||||
label: item.city,
|
||||
category: 0,
|
||||
active: true,
|
||||
speed: 6,
|
||||
value: this.cityAttr[item.city].center,
|
||||
belong: res.data[0].city,
|
||||
symbolSize: [40, 40],
|
||||
};
|
||||
}
|
||||
|
||||
return item;
|
||||
});
|
||||
|
||||
// const items = [
|
||||
// {
|
||||
// level: 1,
|
||||
// name: "江苏",
|
||||
// label: "jiangsu",
|
||||
// value: [118.767413, 32.041544],
|
||||
// symbol: "",
|
||||
// symbolSize: [30, 30],
|
||||
// },
|
||||
// {
|
||||
// level: 2,
|
||||
// symbol: "",
|
||||
// name: "安徽",
|
||||
// label: "anhui",
|
||||
// category: 0,
|
||||
// active: true,
|
||||
// speed: 6,
|
||||
// value: [117.283042, 31.86119],
|
||||
// belong: "江苏",
|
||||
// },
|
||||
// {
|
||||
// level: 2,
|
||||
// symbol: "",
|
||||
// name: "浙江",
|
||||
// category: 0,
|
||||
// active: true,
|
||||
// speed: 6,
|
||||
// value: [120.153576, 30.287459],
|
||||
// belong: "江苏",
|
||||
// },
|
||||
// {
|
||||
// level: 2,
|
||||
// symbol: "",
|
||||
// name: "云南",
|
||||
// category: 0,
|
||||
// active: true,
|
||||
// speed: 6,
|
||||
// value: [102.712251, 25.040609],
|
||||
// belong: "江苏",
|
||||
// },
|
||||
// {
|
||||
// level: 2,
|
||||
// symbol: "",
|
||||
// name: "青海",
|
||||
// category: 0,
|
||||
// active: true,
|
||||
// speed: 6,
|
||||
// value: [101.778916, 36.623178],
|
||||
// belong: "江苏",
|
||||
// },
|
||||
// {
|
||||
// level: 2,
|
||||
// symbol: "",
|
||||
// name: "内蒙古自治区",
|
||||
// category: 0,
|
||||
// active: true,
|
||||
// speed: 6,
|
||||
// value: [111.670801, 40.818311],
|
||||
// belong: "江苏",
|
||||
// },
|
||||
// ];
|
||||
|
||||
const lineColor = ["#fff", "#7BF7AD", "#00fcff"];
|
||||
|
||||
// 城市点位图标
|
||||
const symbolList = ["image://" + point1, "image://" + point2];
|
||||
|
||||
// 线上的动态运动点图标
|
||||
const pointSymbol = ["image://" + linePoint1, "image://" + linePoint2];
|
||||
|
||||
// level = 1的地点添加图标
|
||||
items.forEach((el) => {
|
||||
el.symbol = symbolList[el.level - 1];
|
||||
});
|
||||
|
||||
const dataArr = [[], [], []];
|
||||
items.forEach((el) => {
|
||||
if (el.belong) {
|
||||
items.forEach((element) => {
|
||||
if (el.belong === element.name) {
|
||||
console.log(dataArr[el.level - 1]);
|
||||
dataArr[el.level - 1].push([
|
||||
{
|
||||
coord: element.value,
|
||||
},
|
||||
{
|
||||
coord: el.value,
|
||||
},
|
||||
]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const seriesOne = [
|
||||
{
|
||||
type: "effectScatter",
|
||||
layout: "none",
|
||||
showEffectOn: "emphasis",
|
||||
// coordinateSystem: "cartesian2d",
|
||||
coordinateSystem: "mars3dMap",
|
||||
symbolSize: [20, 20],
|
||||
symbolOffset: [0, -10],
|
||||
zlevel: 3,
|
||||
circular: {
|
||||
rotateLabel: true,
|
||||
},
|
||||
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
formatter: function (e) {
|
||||
return e.data.level == 1 ? "" : e.name;
|
||||
},
|
||||
fontSize: 12,
|
||||
color: "#fff",
|
||||
textBorderColor: "#2aa4e8",
|
||||
offset: [0, 0],
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowColor: "none",
|
||||
},
|
||||
},
|
||||
data: items,
|
||||
},
|
||||
];
|
||||
//飞线
|
||||
const lineSeries = [];
|
||||
dataArr.forEach((el, index) => {
|
||||
lineSeries.push({
|
||||
name: "",
|
||||
type: "lines",
|
||||
// coordinateSystem: "cartesian2d",
|
||||
coordinateSystem: "mars3dMap",
|
||||
zlevel: 1,
|
||||
effect: {
|
||||
show: true,
|
||||
smooth: false,
|
||||
trailLength: 0,
|
||||
symbol: pointSymbol[index],
|
||||
symbolSize: [10, 30],
|
||||
period: 4,
|
||||
},
|
||||
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: lineColor[index],
|
||||
curveness: -0.2,
|
||||
},
|
||||
data: el,
|
||||
});
|
||||
});
|
||||
|
||||
const seriesData = seriesOne.concat(lineSeries);
|
||||
|
||||
const option = {
|
||||
animation: false,
|
||||
// backgroundColor: '#000',
|
||||
fixedHeight: 900009,
|
||||
series: seriesData,
|
||||
};
|
||||
return option;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
MarsMap,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.extend-box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 103px;
|
||||
z-index: 60;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.sub-title {
|
||||
width: 200px;
|
||||
height: 38px;
|
||||
background: url("../assets/images/extend.png");
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.data-total {
|
||||
font-size: 40px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(0deg, #00e5ff 0%, #d8d8d8 100%);
|
||||
-webkit-background-clip: text; /* 使用-webkit-前缀兼容WebKit内核浏览器 */
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||