我要评论1. mars3d是什么？
2.vue3项目中集成mars3d
npm install vite-plugin-mars3d --save-dev
import * as mars3d from "mars3d"
import { cesium } from "mars3d"
import "mars3d/dist/mars3d.css";
import "mars3d-cesium/build/cesium/widgets/widgets.css";
// 定义全局地图变量
export let map: mars3d.map | null = null;
//必须有这两行css,否则地球出来了，样式还是乱的
export function initmap() {
// 创建三维地球场景
map = new mars3d.map("mars3dcontainer", {
scene: {
center: { lat: 30.054604, lng: 108.885436, alt: 17036414, heading: 0, pitch: -90 },// 初始视角中心点和方向
showsun: true, // 显示太阳
showmoon: true, // 显示月亮
showskybox: true, // 显示天空盒
showskyatmosphere: false, // 关闭球周边的白色轮廓
fog: true, // 开启雾效
fxaa: true, // 开启fxaa抗锯齿
globe: {
showgroundatmosphere: false, // 关闭球表面的大气效果
depthtestagainstterrain: false,
basecolor: "#546a53" // 球体基础颜色
},
cameracontroller: {
zoomfactor: 3.0, // 缩放因子
minimumzoomdistance: 1, // 最小缩放距离
maximumzoomdistance: 50000000, // 最大缩放距离
enablerotate: true, // 允许旋转
enablezoom: true // 允许缩放
},
mapprojection: mars3d.crs.epsg3857, // 地图投影方式，这里是墨卡托投影
mapmode2d: cesium.mapmode2d.infinite_scroll // 2d模式下，地图可以无限滚动
},
control: {
baselayerpicker: true, // basemaps底图切换按钮
homebutton: false, // 视角复位按钮
scenemodepicker: false, // 二三维切换按钮
navigationhelpbutton: false, // 帮助按钮
fullscreenbutton: true, // 全屏按钮
contextmenu: { hasdefault: false } // 右键菜单
},
terrain: {
url: "//data.mars3d.cn/terrain", // 地形数据的url
show: true // 显示地形
},
basemaps: [
{
name: "暗色底图",
type: "gaode",
icon: "img/basemaps/blackmarble.png",
layer: "vec",
invertcolor: true,
filtercolor: "#4e70a6",
brightness: 0.6,
contrast: 1.8,
gamma: 0.3,
hue: 1,
saturation: 0
show: true
}
] as any,
})
return map
}<template>
<div>
<div id="mars3dcontainer" class="mars3d-container"></div>
</div>
</template>
<script setup lang="ts">
import { onmounted, ref } from 'vue';
import * as mars3d from "mars3d"
import { initmap,map } from "../map";
//加载地图
onmounted(() => {
initmap();
});
<style scoped lang="scss">
.mars3d-container {
width: 100%;
height: 100%;
}
</style>
3.地图点位标注
<template>
<div>
<div id="mars3dcontainer" class="mars3d-container"></div>
</div>
</template>
<script setup lang="ts">
import { onmounted, ref } from 'vue';
import * as mars3d from "mars3d"
import { initmap, map } from "../map";
import tb from '@/assets/image/hyfw.png'
const arr = [
{ grid: '{"type":"point","coordinates":[109.006887,34.232718]}', name: '测试', remark: 'xx区' },
//其他数据...
];
onmounted(() => {
initmap();
mapkindergarten()
console.log(map, 'map');
});
let pointlayer: any;
/**
* date:2024/3/21
* author:zx
* function:【地图点分布】
* @param 无
*/
const mapkindergarten = () => {
// 初始化地图
// 创建一个用于存放所有点位的图层
pointlayer = new mars3d.layer.graphiclayer({
name: 'pointlayer',
hasedit: false,
isautoediting: false
});
// 将图层添加到地图
map.addlayer(pointlayer);
// 遍历数组，为每个点位数据创建图形点
arr.foreach((pointdata: any) => {
// 解析点位的坐标
const coordinates = json.parse(pointdata.grid).coordinates;
// 创建 mars3d 中的点对象(默认点位样式)
// const pointgraphic = new mars3d.graphic.pointentity({
// position: coordinates,
// attr: pointdata,
// style: {
// color: mars3d.cesium.color.red,
// pixelsize: 10,
// scale: 1,
// image: undefined,
// }
// });
// 创建自定义图标点
// 创建 mars3d 中的点对象(默认点位样式)
const pointgraphic = new mars3d.graphic.billboardentity({
position: coordinates,
attr: pointdata,
style: {
pixelsize: 10,
scale: 0.5,
image: tb,
}
});
// 添加点位点击事件
pointgraphic.on(mars3d.eventtype.click, function (event: any) {
console.log('点击了点位', event);
});
// 将点对象添加到图层
pointlayer.addgraphic(pointgraphic);
});
};
</script>
<style scoped lang="scss">
.mars3d-container {
width: 100%;
height: 100%;
}
</style>
4.热力图
npm install mars3d-heatmap import "mars3d-heatmap" /**
* date:2024/3/21
* author:zx
* function:【热力图】
* @param 无
*/
let heatlayer: any = null
const mapkindergartenheatmap = () => {
let arrpoints: any = []
arr.foreach((item: any) => {
if (item.point || item.grid) {
let pointdata = item.point ? json.parse(item.point).coordinates : json.parse(item.grid).coordinates
arrpoints.push({ lng: pointdata[0], lat: pointdata[1], value: 1 })
}
})
if (heatlayer) {
map.removelayer(heatlayer)
heatlayer = null
}
// 热力图 图层
heatlayer = new mars3d.layer.heatlayer({
name: "point",
positions: arrpoints,
heatstyle: {
radius: 40,
blur: 0.85,
gradient: { 0.4: 'blue', 0.6: 'green',0.9: 'yellow',1: 'red' }
},
// 以下为矩形矢量对象的样式参数
style: {
arc: false, // 是否为曲面
height: 10
},
// flyto: true,
})
map.addlayer(heatlayer)
};
5.地图面分布
下面是根据数据生成面的函数， polygondata是后台数据 ，我模拟了个别
/**
* date:2024/3/21
* author:zx
* function:【地图面分布】
* @param 无
*/
let polygondata = ref( [
{
grid: {
type: "polygon",
coordinates: [
[
[108.901467, 34.22501],
[108.90235, 34.224611],
[108.902374, 34.223664],
[108.90208, 34.223183],
[108.901581, 34.222639],
[108.901447, 34.222412],
[108.901445, 34.222413],
[108.901417, 34.222425],
[108.901366, 34.222449],
[108.90134, 34.22246],
[108.901334, 34.222463],
[108.901295, 34.22248],
[108.901291, 34.222482],
[108.901232, 34.222509],
[108.901189, 34.222527],
[108.901173, 34.222534],
[108.901103, 34.222568],
[108.901033, 34.222601],
[108.900963, 34.222635],
[108.900906, 34.22266],
[108.900899, 34.222663],
[108.900827, 34.222695],
[108.900821, 34.222697],
[108.900732, 34.222737],
[108.900636, 34.222778],
[108.900541, 34.22282],
[108.900446, 34.222862],
[108.90035, 34.222904],
[108.900292, 34.22293],
[108.900234, 34.222956],
[108.900171, 34.222983],
[108.900783, 34.223906],
[108.901467, 34.22501]
]
]
},
num: 1,
name: "中天花园"
}, {
grid: {
type: "polygon",
coordinates: [
[
[108.903272,34.19876],
[108.902163,34.198774],
[108.902107,34.198582],
[108.901865,34.197436],
[108.90172,34.197456],
[108.900913,34.197557],
[108.900863,34.197241],[108.900343,34.197292],
[108.900339,34.199717],[108.90037,34.199792],
[108.900392,34.199849],[108.903211,34.19984],
[108.903251,34.199807],[108.903278,34.199785],
[108.903273,34.199352],[108.903272,34.19876]
]
]
},
num: 1,
name: "xx花园"
},
{
grid: {
type: "polygon",
coordinates: [
[
[108.911196,34.22649],
[108.910652,34.22675],[108.911124,34.22748],
[108.911472,34.227295],[108.911621,34.227229],
[108.911196,34.22649]
]
]
},
num: 1,
name: "xx花园"
},
{
grid: {
type: "polygon",
coordinates: [
[
[108.901062,34.232978],[108.901054,34.233017],
[108.900955,34.233057],[108.900473,34.233278],
[108.900505,34.233331],[108.900542,34.233393],
[108.90058,34.233455],[108.900625,34.233524],
[108.900669,34.233593],[108.900717,34.233666],
[108.900765,34.23374],[108.900813,34.233813],
[108.900856,34.233877],[108.900898,34.23394],
[108.900941,34.234004],[108.900983,34.234067],
[108.901015,34.234114],[108.901023,34.234127],
[108.901068,34.234196],[108.901112,34.234264],
[108.901156,34.234333],[108.9012,34.234401],
[108.901245,34.23447],[108.901289,34.234538],
[108.901333,34.234607],[108.90138,34.23468],[
108.901427,34.234752],[108.901473,34.234825],
[108.90152,34.234897],[108.901567,34.23497],
[108.901583,34.234995],[108.901618,34.235048],
[108.901653,34.235102],[108.901688,34.235156],
[108.90169,34.235161],[108.901703,34.235183],
[108.901987,34.235047],[108.901305,34.233942],
[108.901418,34.233891],[108.901066,34.233256],
[108.901635,34.232992],[108.901228,34.23234],
[108.901179,34.232363],[108.901094,34.232402],
[108.901009,34.232441],[108.900923,34.232479],
[108.900838,34.232518],[108.900798,34.232537],
[108.90079,34.23254],[108.901062,34.232978]
]
]
},
num: 1,
name: "xx花园"
},
{
grid: {
type: "polygon",
coordinates: [
[
[108.903119,34.228991],
[108.902817,34.228477],
[108.90172,34.228988],
[108.901765,34.229057],
[108.90181,34.229128],
[108.901856,34.229198],
[108.901901,34.229269],
[108.901947,34.229339],
[108.901993,34.22941],
[108.902031,34.229469],
[108.902034,34.229474],
[108.902621,34.229205],
[108.903119,34.228991]
]
]
},
num: 1,
name: "xx花园"
}
,
{
grid: {
type: "polygon",
coordinates: [
[
[108.903443,34.230496],
[108.903075,34.229939],
[108.902621,34.229205],
[108.902034,34.229474],
[108.902081,34.229546],
[108.902131,34.229624],
[108.90218,34.229701],
[108.90223,34.229778],
[108.90228,34.229856],
[108.90233,34.229933],
[108.90238,34.23001],
[108.90243,34.230088],
[108.90248,34.230165],
[108.90253,34.230243],
[108.90258,34.23032],
[108.90263,34.230397],
[108.902677,34.23047],
[108.902724,34.230542],
[108.902772,34.230614],
[108.902819,34.230687],
[108.902865,34.230758],
[108.903443,34.230496]
]
]
},
num: 1,
name: "xx花园"
},
{
grid: {
type: "polygon",
coordinates: [
[
[108.904156,34.230607],
[108.903706,34.229914],
[108.903119,34.228991],
[108.902621,34.229205],
[108.903075,34.229939],
[108.903443,34.230496],
[108.903656,34.230842],
[108.904156,34.230607]
]
]
},
num: 1,
name: "xx花园"
}
])
const mapkindergartenface = () => {
// 创建一个用于存放所有面的图层
const polygonlayer = new mars3d.layer.graphiclayer({
name: 'polygonlayer',
hasedit: false,
isautoediting: false
});
// 将图层添加到地图
map.addlayer(polygonlayer);
// 遍历数组，为每个面数据创建多边形
polygondata.value.foreach((polygoncoords: any) => {
// 解析多边形的坐标
const coordinates = json.parse(polygoncoords.grid).coordinates; // 这里假设polygoncoords是一个json格式的坐标数组
// 创建 mars3d 中的多边形对象
const polygonentity = new mars3d.graphic.polygonentity({
positions: coordinates, // 设置多边形的位置坐标数组
style: {
color: "#e8b99d"
// fillcolor: mars3d.cesium.color.red.withalpha(1), // 设置面的填充颜色和透明度
// outlinecolor: mars3d.cesium.color.black, // 设置面的边框颜色
// outlinewidth: 10 // 设置面的边框宽度
}
});
// 将多边形对象添加到图层
polygonlayer.addgraphic(polygonentity);
});
};
6. 地图放大展示点位名称
/**
* date:2024/3/21
* author:zx
* function:【相机移动或视角变化】
* @param 无
*/
let labellayer: any = null; // 添加标签的图层
let scenedata = ref()
const map_camerachangedhandler = () => {
scenedata.value = map.getcameraview();
// console.log(scenedata.value, '视角');
// 检查相机高度是否小于 3000
if (scenedata.value.alt > 10000) {
// 删除 labellayer 图层中的标签
map.getlayers().foreach((item: any) => {
if (item.options.name === "labellayer") {
map.removelayer(item);
}
})
} else {
// 显示标签
labellayer = new mars3d.layer.graphiclayer({
name: 'labellayer',
hasedit: false,
isautoediting: false
});
map.addlayer(labellayer);
// 遍历标签图层中的标签，并添加到图层中
arr.foreach((pointdata: any) => {
const coordinates = json.parse(pointdata.grid).coordinates;
// 创建标签图形
const labelgraphic = new mars3d.graphic.labelentity({
position: coordinates,
style: {
text: pointdata.name, // 幼儿园名称
font: '16px sans-serif', // 字体大小和样式
fillcolor: mars3d.cesium.color.yellow, // 字体颜色
// outlinecolor: mars3d.cesium.color.black, // 字体描边颜色
outlinewidth: 1, // 字体描边宽度
horizontalorigin: mars3d.cesium.horizontalorigin.center, // 文本水平对齐方式
verticalorigin: mars3d.cesium.verticalorigin.bottom, // 文本垂直对齐方式
pixeloffset: new mars3d.cesium.cartesian2(0, -40), // 文本偏移量，使其显示在点的上方
disabledepthtestdistance: number.positive_infinity // 防止标签被遮挡
}
});
// 将标签图形添加到标签图层中
labellayer.addgraphic(labelgraphic);
});
}
};
发表评论