Mars3D有很多很强大的功能，可以在地球上实现很多炫酷的3D效果。今天继续给大家分享功能，在地球上加载水系河流，加载geojson植被，加载区划街道社区吊牌，点击社区可加载对应社区的倾斜摄影。
1.话不多说，先展示
水系，植被，区划吊牌，社区倾斜摄影
2.设计思路
通过axios获取要加载水系的点位数据，加载本地geojson的植被数据，获取请求的区划数据，点击可视角移动，社区的话可加载对应社区的倾斜摄影。
3.具体代码
<script setup>
import * as Cesium from "mars3d-cesium";
import * as mars3d from "mars3d";
//引入cesium基础库
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
//导入mars3d主库
import "mars3d/mars3d.css"; //v3.8.6及之前版本使用 import "mars3d/dist/mars3d.css";
import axios from "axios";
//导入mars3d插件（按需使用，需要先npm install）
import "mars3d-space";
import { ref, onMounted, reactive } from "vue";
var tileLayer = reactive({});//天地图影像图层
var tiles3dLayer1 = reactive({});//白膜图层
var tiles3dLayer2 = reactive({});//倾斜摄影图层
var graphicLayer = reactive({});//区域边界，街道边界，水系，tyLoad, 区划
var graphicLayer2 = reactive({});//植被图层
var map = reactive({});
var grid = reactive({});
var list = ref([]);
var sxlist = ref([]);
var roadlist = ref([]);
var qhlist = ref([]);
var mapOptions = {
terrain: {
//地形
url: "http://data.mars3d.cn/terrain",
show: true,
},
scene: {
// center: { lat: 30.422407, lng: 115.820222, alt: 3498, heading: 67, pitch: -32 },
showSun: false, //是否显示太阳
showMoon: false, //是否显示月亮
showSkyBox: true, //是否显示天空盒
showSkyAtmosphere: false, //是否显示地球大气层外光圈
contextmenu: false,
fog: false, //是否启用雾化效果
globe: {
showGroundAtmosphere: false,
enableLighting: false,
depthTestAgainstTerrain: true, // 地形检测，不加无法投射到地形上
},
fxaa: true, // 不开启抗锯齿，可视域会闪烁
skyBox: {
type: "ground",
sources: {
positiveX: "../assets/imgs/skybox/lantian/Right.jpg",
negativeX: "../assets/imgs/skybox/lantian/Left.png",
positiveY: "../assets/imgs/skybox/lantian/Front.png",
negativeY: "../assets/imgs/skybox/lantian/Back.png",
positiveZ: "../assets/imgs/skybox/lantian/Up.png",
negativeZ: "../assets/imgs/skybox/lantian/Down.png",
},
},
},
basemaps: [
{
name: "天地图电子底图",
layer: "vec_d",
type: "tdt",
invertColor: false, // 反向颜色 color.r = 1.0 - color.r
filterColor: "#0950a9", // 滤镜颜色 color.r = color.r * filterColor.r
brightness: 2, // 亮度
contrast: 0.6, // 对比度
hue: 0.1, // 色彩
saturation: 1, // 饱和度
gamma: 0.2, // 伽马值
opacity: 1, // 透明度
minimumLevel: 0,
maximumLevel: 18,
key: ["自己申请的天地图key"],
show: true,
},
],
};
onMounted(async() => {
map = new mars3d.Map("mars3dContainer", mapOptions);
graphicLayer = new mars3d.layer.GraphicLayer({
hasEdit: false,
isAutoEditing: false,
clustering: {
enabled: false,
pixelRange: 20,
clampToGround: false,
addHeight: 1000,
},
});
map.addLayer(graphicLayer);
getBm();
getGridBJ();
getJdLists();
getWater();
wblzb();
getRolad();
getGrid("");
setEvent();
});
//加载白膜数据 并动画到指定位置
const getBm = () => {
tiles3dLayer1 = new mars3d.layer.TilesetLayer({
name: "白膜",
url: "http://172.16.10.83:9509/map3d/wbl/BM4/tileset.json",
position: {
alt: 0,
},
maximumScreenSpaceError: 256,
zIndex: 3,
show: true,
});
map.addLayer(tiles3dLayer1);
//飞到指定经纬度
map.openFlyAnimation({
center: {
lat: 37.84331,
lng: 112.543554,
alt: 1587.8,
heading: 296,
pitch: -17.2,
},
});
};
//加载wbl区域边界
const getGridBJ = async () => {
await axios.get("http://172.16.10.83:8085/grid/getWkt").then((res) => {
if (res.data.code == "20000000") {
grid = res.data.data.grid;
let item = grid;
if (item.wkt.indexOf(")),MULTILINESTRING ((") == -1) {
let wkt = item.wkt
.split("MULTIPOLYGON (((")[1]
.split(")))")[0]
.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.PolylineEntity({
id: item.id,
name: item.name,
positions: positions,
style: {
width: 5,
color: "#867352",
clampToGround: true,
},
show: true,
});
graphicLayer.addGraphic(graphic);
const graphic2 = new mars3d.graphic.PolylineEntity({
positions: positions,
style: {
width: 5,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlicker,
materialOptions: {
color: "#867352",
speed: 10,
},
},
show: true,
});
graphicLayer.addGraphic(graphic2);
}
}
});
};
//加载街道区域轮廓线
const getJdLists = async () => {
await axios.get("http://172.16.10.83:8085/layer/jd").then((res) => {
if (res.data.code == "20000000") {
list.value = res.data.data.list;
if (list.value.length > 0) {
let listData = list.value;
listData.forEach((item) => {
if (item.wkt) {
if (item.wkt.indexOf(")),MULTILINESTRING ((") == -1) {
let wkt = item.wkt
.split("MULTILINESTRING ((")[1]
.split("))")[0]
.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic2 = new mars3d.graphic.PolylineEntity({
positions: positions,
style: {
width: 5,
color: "rgba(255,255,0,.02)",
clampToGround: true,
},
show: true,
});
graphicLayer.addGraphic(graphic2);
const graphic = new mars3d.graphic.PolylineEntity({
positions: positions,
style: {
width: 5,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlicker,
materialOptions: {
color: "#ffff00",
speed: 5,
},
},
zIndex: 5,
show: true,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else {
let pList = item.wkt.split(")),MULTILINESTRING ((");
for (let i = 0; i < pList.length; i++) {
let item2 = pList[i];
if (item2.indexOf("MULTILINESTRING ((") != -1) {
let wkt = item2.split("MULTILINESTRING ((")[1].split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic2 = new mars3d.graphic.PolylineEntity({
positions: positions,
style: {
width: 5,
color: "rgba(255,255,0,.02)",
clampToGround: true,
},
show: true,
});
graphicLayer.addGraphic(graphic2);
const graphic = new mars3d.graphic.PolylineEntity({
positions: positions,
style: {
width: 3,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlicker,
materialOptions: {
color: "#ffff00",
speed: 5,
},
},
zIndex: 5,
show: true,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else if (item2.indexOf("))") != -1) {
let wkt = item2.split("))")[0].split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic2 = new mars3d.graphic.PolylineEntity({
positions: positions,
style: {
width: 5,
color: "rgba(255,255,0,.02)",
clampToGround: true,
},
show: true,
});
graphicLayer.addGraphic(graphic2);
const graphic = new mars3d.graphic.PolylineEntity({
positions: positions,
style: {
width: 3,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlicker,
materialOptions: {
color: "#ffff00",
speed: 1,
},
},
zIndex: 5,
show: true,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else {
let wkt = item2.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic2 = new mars3d.graphic.PolylineEntity({
positions: positions,
style: {
width: 5,
color: "rgba(255,255,0,.02)",
clampToGround: true,
},
show: true,
});
graphicLayer.addGraphic(graphic2);
const graphic = new mars3d.graphic.PolylineEntity({
positions: positions,
style: {
width: 3,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlicker,
materialOptions: {
color: "#ffff00",
speed: 1,
},
},
zIndex: 5,
show: true,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
}
}
}
}
});
}
}
});
};
//加载水系
const getWater = async()=>{
// 动态河流
// const dynamicRiver = new mars3d.graphic.DynamicRiver({
// positions: [
// [115.906607, 30.441582, 555.9],
// [115.899964, 30.438543, 467.3],
// [115.893105, 30.440714, 374.6],
// [115.88362, 30.443924, 340.7],
// [115.873948, 30.444827, 299],
// [115.864003, 30.442111, 292.2],
// [115.850741, 30.438108, 189.9]
// ],
// style: {
// image: "//data.mars3d.cn/img/textures/poly-rivers.png",
// width: 280,
// height: 30,
// speed: 10
// }
// })
//graphicLayer.addGraphic(dynamicRiver)
//水域加载
await axios.get("http://172.16.10.83:8085/layer/sx").then((res) => {
if (res.data.code == "20000000") {
sxlist.value = res.data.data.list;
if (sxlist.value.length > 0) {
let listData = sxlist.value;
listData.forEach((item) => {
if (item.wkt) {
if (item.wkt.indexOf("))),MULTIPOLYGON (((") == -1) {
let wkt = item.wkt
.split("MULTIPOLYGON (((")[1]
.split(")))")[0]
.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[
1]];
positions.push(arr);
});
const dynamicWater = new mars3d.graphic.Water({
positions: positions,
style: {
normalMap: "/src/assets/imgs/waterNormals.jpg", // 水正常扰动的法线图
frequency: 8000.0, // 控制波数的数字。
animationSpeed: 0.02, // 控制水的动画速度的数字。
amplitude: 5.0, // 控制水波振幅的数字。
specularIntensity: 0.8, // 控制镜面反射强度的数字。
baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
opacity: 0.7, // 透明度
offsetAttribute: Cesium.GeometryOffsetAttribute.ALL, // 需要有
offsetHeight: 0,
clampToGround: true, // 是否贴地
},
})
graphicLayer.addGraphic(dynamicWater)
} else {
let pList = item.wkt.split("))),MULTIPOLYGON ((()");
for (let i = 0; i < pList.length; i++) {
let item2 = pList[i];
if (item2.indexOf("MULTIPOLYGON ((") != -1) {
let wkt = item2.split("MULTIPOLYGON ((")[1].split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(
" ")[1]];
positions.push(arr);
});
const dynamicWater = new mars3d.graphic.Water({
positions: positions,
style: {
normalMap: "/src/assets/imgs/waterNormals.jpg", // 水正常扰动的法线图
frequency: 8000.0, // 控制波数的数字。
animationSpeed: 0.02, // 控制水的动画速度的数字。
amplitude: 5.0, // 控制水波振幅的数字。
specularIntensity: 0.8, // 控制镜面反射强度的数字。
baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
opacity: 0.7, // 透明度
offsetAttribute: Cesium.GeometryOffsetAttribute.ALL, // 需要有
offsetHeight: 0,
clampToGround: true, // 是否贴地
},
})
graphicLayer.addGraphic(dynamicWater)
} else if (item2.indexOf(")))") != -1) {
let wkt = item2.split(")))")[0].split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(
" ")[1]];
positions.push(arr);
});
const dynamicWater = new mars3d.graphic.Water({
positions: positions,
style: {
normalMap: "/src/assets/imgs/waterNormals.jpg", // 水正常扰动的法线图
frequency: 8000.0, // 控制波数的数字。
animationSpeed: 0.02, // 控制水的动画速度的数字。
amplitude: 5.0, // 控制水波振幅的数字。
specularIntensity: 0.8, // 控制镜面反射强度的数字。
baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
opacity: 0.7, // 透明度
offsetAttribute: Cesium.GeometryOffsetAttribute.ALL, // 需要有
offsetHeight: 0,
clampToGround: true, // 是否贴地
},
})
graphicLayer.addGraphic(dynamicWater)
} else {
let wkt = item2.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(
" ")[1]];
positions.push(arr);
});
const dynamicWater = new mars3d.graphic.Water({
positions: positions,
style: {
normalMap: "/src/assets/imgs/waterNormals.jpg", // 水正常扰动的法线图
frequency: 8000.0, // 控制波数的数字。
animationSpeed: 0.02, // 控制水的动画速度的数字。
amplitude: 5.0, // 控制水波振幅的数字。
specularIntensity: 0.8, // 控制镜面反射强度的数字。
baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
opacity: 0.7, // 透明度
offsetAttribute: Cesium.GeometryOffsetAttribute.ALL, // 需要有
offsetHeight: 0,
clampToGround: true, // 是否贴地
},
})
graphicLayer.addGraphic(dynamicWater)
}
}
}
}
});
}
}
});
};
//加载植被
const wblzb = async()=>{
graphicLayer2 = new mars3d.layer.GeoJsonLayer({
name: "植被",
url: "/src/assets/json/wblzb.json",
symbol: {
merge: true,
styleOptions: {
fill: true,
color: "#208a26",
clampToGround: true,
}
},
})
map.addLayer(graphicLayer2);
};
//加载ty路网
const getRolad = async()=>{
await axios.get("http://172.16.10.83:8085/layer/road").then((res) => {
if (res.data.code == "20000000") {
roadlist.value = res.data.data.list;
if (roadlist.value.length > 0) {
roadlist.value.forEach((item) => {
if (item.wkt) {
if (item.wkt.indexOf(")),MULTILINESTRING ((") == -1) {
let wkt = item.wkt
.split("MULTILINESTRING ((")[1]
.split("))")[0]
.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.PolylinePrimitive({
positions: positions,
style: {
width: 3,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlow,
materialOptions: {
// color: "#cd8c2f",
image: "/src/assets/imgs/lu1.png",
speed: 5,
},
},
zIndex: 5,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else {
let pList = item.wkt.split(")),MULTILINESTRING ((");
for (let i = 0; i < pList.length; i++) {
let item2 = pList[i];
if (item2.indexOf("MULTILINESTRING ((") != -1) {
let wkt = item2
.split("MULTILINESTRING ((")[1]
.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.PolylinePrimitive({
positions: positions,
style: {
width: 3,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlow,
materialOptions: {
image: "/src/assets/imgs/lu1.png",
speed: 5,
},
},
zIndex: 5,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else if (item2.indexOf("))") != -1) {
let wkt = item2.split("))")[0].split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.PolylinePrimitive({
positions: positions,
style: {
width: 3,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlow,
materialOptions: {
image: "/src/assets/imgs/lu1.png",
speed: 5,
},
},
zIndex: 5,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else {
let wkt = item2.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.PolylinePrimitive({
positions: positions,
style: {
width: 3,
clampToGround: true,
materialType: mars3d.MaterialType.LineFlow,
materialOptions: {
image: "/src/assets/imgs/lu1.png",
speed: 5,
},
},
zIndex: 5,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
}
}
}
}
});
}
}
});
};
//加载区划
const getGrid = async(qhid)=>{
console.log(qhid)
const params ={
id:qhid
}
await axios.get("http://172.16.10.83:8085/grid/list",{params}).then((res) => {
if (res.data.code == "20000000") {
qhlist.value = res.data.data.list
if(qhlist.value.length>0){
qhlist.value.forEach((item, index) => {
if (item.name == "万柏林区") {
} else if (item.name.indexOf("街办") != -1) {
let pointNew = item.point.split(",");
if (item.wkt) {
if (item.wkt.indexOf("))),MULTIPOLYGON (((") == -1) {
let wkt = item.wkt
.split("MULTIPOLYGON (((")[1]
.split(")))")[0]
.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.ScrollWall({
map3d: item.map3d,
point: item.point,
name: item.name,
Newid: item.id,
positions: positions,
style: {
clampToGround: true,
diffHeight: 100, // 高度
color: "rgba(255,0, 0,1)",
speed: 30,
reverse: false, // 方向：true往上、false往下
},
show: false,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else {
let pList = item.wkt.split("))),MULTIPOLYGON (((");
for (let i = 0; i < pList.length; i++) {
let item2 = pList[i];
if (item2.indexOf("MULTIPOLYGON (((") != -1) {
let wkt = item2
.split("MULTIPOLYGON (((")[1]
.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.ScrollWall({
map3d: item.map3d,
point: item.point,
name: item.name,
Newid: item.id,
positions: positions,
style: {
clampToGround: true,
diffHeight: 100, // 高度
color: "rgba(255,0, 0,1)",
speed: 30,
reverse: false, // 方向：true往上、false往下
},
show: false,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else if (item2.indexOf(")))") != -1) {
let wkt = item2.split(")))")[0].split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.ScrollWall({
map3d: item.map3d,
point: item.point,
name: item.name,
Newid: item.id,
positions: positions,
style: {
clampToGround: true,
diffHeight: 100, // 高度
color: "rgba(255,0, 0,1)",
speed: 30,
reverse: false, // 方向：true往上、false往下
},
show: false,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else {
let wkt = item2.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.ScrollWall({
map3d: item.map3d,
point: item.point,
name: item.name,
Newid: item.id,
positions: positions,
style: {
clampToGround: true,
diffHeight: 100, // 高度
color: "rgba(255,0, 0,1)",
speed: 30,
reverse: false, // 方向：true往上、false往下
},
show: false,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
}
}
}
}
let point = item.point.split(",");
const graphicName = new mars3d.graphic.BillboardEntity({
map3d: item.map3d,
// point: item.point,//会绘制一个白点
name: item.name,
Newid: item.id,
position: [point[1], point[0], 1000],
style: {
image: "/src/assets/imgs/11.png",
scale: self.big ? 0.1 : 0.08,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
label: {
visibleDepth: false,
text: item.name,
pixelOffsetY: self.big ? -90 : -70,
pixelOffsetX: 0,
font_size: self.big ? 35 : 20,
color: "#fff",
outline: true,
outlineColor: "#000000",
outlineWidth: 8,
},
clampToGround: false,
},
// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
});
graphicLayer.addGraphic(graphicName);
} else if (
item.name.indexOf("社区") != -1 &&
item.name.indexOf("网格") == -1
) {
if (item.wkt) {
if (item.wkt.indexOf("))),MULTIPOLYGON (((") == -1) {
let wkt = item.wkt
.split("MULTIPOLYGON (((")[1]
.split(")))")[0]
.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1], 770];
positions.push(arr);
});
const graphic = new mars3d.graphic.WallEntity({
map3d: item.map3d,
point: item.point,
name: item.name,
Newid: item.id,
positions: positions,
style: {
diffHeight: 20, // 高度
materialType: mars3d.MaterialType.WallScroll,
materialOptions: {
image: "/src/assets/imgs/flow-wall-4.png",
color: "rgba(3, 104, 255,0.5)",
count: 1,
speed: 20,
bloom: true,
},
},
zIndex: 5,
show: false,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else {
let pList = item.wkt.split("))),MULTIPOLYGON (((");
for (let i = 0; i < pList.length; i++) {
let item2 = pList[i];
if (item2.indexOf("MULTIPOLYGON (((") != -1) {
let wkt = item2
.split("MULTIPOLYGON (((")[1]
.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [
item1.split(" ")[0],
item1.split(" ")[1],
770,
];
positions.push(arr);
});
const graphic = new mars3d.graphic.WallEntity({
map3d: item.map3d,
point: item.point,
name: item.name,
Newid: item.id,
positions: positions,
style: {
diffHeight: 20, // 高度
materialType: mars3d.MaterialType.WallScroll,
materialOptions: {
image: "/src/assets/imgs/flow-wall-4.png",
color: "rgba(3, 104, 255,0.5)",
count: 1,
speed: 20,
bloom: true,
},
},
zIndex: 5,
show: false,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else if (item2.indexOf(")))") != -1) {
let wkt = item2.split(")))")[0].split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [
item1.split(" ")[0],
item1.split(" ")[1],
770,
];
positions.push(arr);
});
const graphic = new mars3d.graphic.WallEntity({
map3d: item.map3d,
point: item.point,
name: item.name,
Newid: item.id,
positions: positions,
style: {
diffHeight: 20, // 高度
materialType: mars3d.MaterialType.WallScroll,
materialOptions: {
image: "/src/assets/imgs/flow-wall-4.png",
color: "rgba(3, 104, 255,0.5)",
count: 1,
speed: 20,
bloom: true,
},
},
zIndex: 5,
show: false,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else {
let wkt = item2.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [
item1.split(" ")[0],
item1.split(" ")[1],
770,
];
positions.push(arr);
});
const graphic = new mars3d.graphic.WallEntity({
map3d: item.map3d,
point: item.point,
name: item.name,
Newid: item.id,
positions: positions,
style: {
diffHeight: 20, // 高度
materialType: mars3d.MaterialType.WallScroll,
materialOptions: {
image: "/src/assets/imgs/flow-wall-4.png",
color: "rgba(3, 104, 255,0.5)",
count: 1,
speed: 20,
bloom: true,
},
},
zIndex: 5,
show: false,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
}
}
}
}
let point = item.point.split(",");
const graphicName = new mars3d.graphic.BillboardEntity({
map3d: item.map3d,
//point: item.point,
name: item.name,
Newid: item.id,
position: [point[1], point[0], 870],
style: {
image: "/src/assets/imgs/8.png",
scale: self.big ? 0.5 : 0.3,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// perPositionHeight: true,
label: {
visibleDepth: false,
text: item.name,
pixelOffsetY: self.big ? -210 : -115,
pixelOffsetX: 10,
font_size: self.big ? 35 : 20,
color: "#fff",
// perPositionHeight: true
},
// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
},
});
graphicLayer.addGraphic(graphicName);
// if (graphicName.startBounce) {
// graphicName.startBounce({
// maxHeight: 10,
// step: 0.3,
// });
// }
// self.sqList.push(graphicName);
} else {
if (item.wkt) {
if (item.wkt.indexOf("))),MULTIPOLYGON (((") == -1) {
let wkt = item.wkt
.split("MULTIPOLYGON (((")[1]
.split(")))")[0]
.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.WallEntity({
map3d: item.map3d,
point: item.point,
name: item.name,
Newid: item.id,
positions: positions,
style: {
materialType: mars3d.MaterialType.WallScroll,
materialOptions: {
image: "/src/assets/imgs/fence.png",
color: "rgba(154, 255, 0,1)",
count: 3,
speed: 20,
bloom: true,
},
},
zIndex: 5,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else {
let pList = item.wkt.split("))),MULTIPOLYGON (((");
for (let i = 0; i < pList.length; i++) {
let item2 = pList[i];
if (item2.indexOf("MULTIPOLYGON (((") != -1) {
let wkt = item2
.split("MULTIPOLYGON (((")[1]
.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.WallEntity({
map3d: item.map3d,
point: item.point,
name: item.name,
Newid: item.id,
positions: positions,
style: {
materialType: mars3d.MaterialType.WallScroll,
materialOptions: {
image: "/src/assets/imgs/fence.png",
color: "rgba(154, 255, 0,1)",
count: 3,
speed: 20,
bloom: true,
},
},
zIndex: 5,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else if (item2.indexOf(")))") != -1) {
let wkt = item2.split(")))")[0].split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.WallEntity({
map3d: item.map3d,
point: item.point,
name: item.name,
Newid: item.id,
positions: positions,
style: {
materialType: mars3d.MaterialType.WallScroll,
materialOptions: {
image: "/src/assets/imgs/fence.png",
color: "rgba(154, 255, 0,1)",
count: 3,
speed: 20,
bloom: true,
},
},
zIndex: 5,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
} else {
let wkt = item2.split(", ");
let positions = [];
wkt.forEach((item1) => {
let arr = [item1.split(" ")[0], item1.split(" ")[1]];
positions.push(arr);
});
const graphic = new mars3d.graphic.WallEntity({
map3d: item.map3d,
point: item.point,
name: item.name,
Newid: item.id,
positions: positions,
style: {
materialType: mars3d.MaterialType.WallScroll,
materialOptions: {
image: "/src/assets/imgs/fence.png",
color: "rgba(154, 255, 0,1)",
count: 3,
speed: 20,
bloom: true,
},
},
zIndex: 5,
});
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
}
}
}
}
let point = item.point.split(",");
const graphicName = new mars3d.graphic.BillboardEntity({
map3d: item.map3d,
point: item.point,
name: item.name.split("区")[1],
Newid: item.id,
position: [point[1], point[0], 820],
style: {
image: "/src/assets/imgs/wg.png",
scale: self.big ? 1 : 0.3,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// perPositionHeight: true,
label: {
visibleDepth: false,
text: item.name.split("区")[1],
pixelOffsetY: self.big ? -240 : -73,
pixelOffsetX: 0,
font_size: self.big ? 50 : 15,
color: "#fff",
},
// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
},
});
graphicLayer.addGraphic(graphicName);
// if (graphicName.startBounce) {
// graphicName.startBounce({
// maxHeight: 10,
// step: 0.3,
// });
// }
// self.wgList.push(graphicName);
}
if (item.name == "万柏林区") {
console.log("item.name == '万柏林区'")
getGrid(item.id);
}
});
}
}
});
};
//设置事件监听
const setEvent = () =>{
map.on([mars3d.EventType.click], function (e) {
if (
e.graphic.options.name != "万柏林区" &&
e.graphic.options.name != "楼栋" &&
e.graphic.options.name != "房屋"
) {
row({
name: e.graphic.options.name,
id: e.graphic.options.Newid,
point: e.graphic.options.position,
map3d: e.graphic.options.map3d,
type: "none",
});
} else {
// if (e.graphic.options.name == "楼栋") {
// Map.wblDt(e.graphic.options);
// }
// if (e.graphic.options.name == "房屋") {
// self.isRoomPopup = true;
// setTimeout(() => {
// bus.$emit("setBuildingDate", e.graphic.options.newName);
// }, 500);
// }
}
});
}
//视角移动
const row = (item)=>{
if (item.name != "万柏林区") {
let point = item.point;
let hei = 3000;
if (
item.name.indexOf("小区") != -1 ||
item.name.indexOf("楼栋") != -1
) {
hei = 1500;
}
map.flyToPoint(new mars3d.LngLatPoint(point[0], point[1]), {
radius: hei,
heading: item.heading ? item.heading : 343,
pitch: item.pitch ? item.pitch : -18,
alt: item.alt ? item.alt : 0,
roll: 0,
clampToGround: true,
});
if (item.name.indexOf("街办") != -1) {
getGrid(item.id);
} else if (
item.name.indexOf("社区") != -1 &&
item.name.indexOf("网格") == -1
) {
tiles3dLayer1.show = false;//清除白膜
tileLayer = new mars3d.layer.TdtLayer({
name: "天地图影像底图",
layer: "img_d",
});
map.addLayer(tileLayer);
if (item.map3d) {
// 模型
tiles3dLayer2 = new mars3d.layer.TilesetLayer({
name: "社区",
url: "http://172.16.10.83:9509/map3d" + item.map3d,
position: {
alt_offset: -10
},
maximumScreenSpaceError: 16, //【重要】数值加大，能让最终成像变模糊
zIndex: 3,
show: true,
});
map.addLayer(tiles3dLayer2);
}
// if (this.isDt != "影像地图") {
// this.setLayer("y");
// this.isDt = "影像地图";
// }
// this.activeWgId = null;
// this.ldId = null;
// if (this.xqList.length > 0) {
// let arr = this.xqList;
// for (let i = 0; i < arr.length; i++) {
// window.$drawControl.removeGraphic(arr[i], true);
// arr.splice(i, 1);
// //重置i，否则i会跳一位
// i--;
// };
// this.xqList = [];
// }
// this.wgLists = [];
// if (this.wgList.length > 0) {
// let arr = this.wgList;
// for (let i = 0; i < arr.length; i++) {
// window.$drawControl.removeGraphic(arr[i], true);
// arr.splice(i, 1);
// //重置i，否则i会跳一位
// i--;
// };
// this.wgList = [];
// }
// if (this.ldList.length > 0) {
// let arr = this.ldList;
// for (let i = 0; i < arr.length; i++) {
// window.$drawControl.removeGraphic(arr[i], true);
// arr.splice(i, 1);
// //重置i，否则i会跳一位
// i--;
// };
// this.ldList = [];
// }
// if (this.roomList.length > 0) {
// let arr = this.roomList;
// for (let i = 0; i < arr.length; i++) {
// window.$drawControl.removeGraphic(arr[i], true);
// arr.splice(i, 1);
// //重置i，否则i会跳一位
// i--;
// };
// this.roomList = [];
// }
// if (this.zbList.length > 0) {
// let arr = this.zbList;
// for (let i = 0; i < arr.length; i++) {
// window.$viewer.removeLayer(arr[i], true);
// arr.splice(i, 1);
// //重置i，否则i会跳一位
// i--;
// };
// this.zbList = [];
// }
// console.log(this.activesQId)
// console.log(item.id)
// if (this.activesQId != item.id) {
// if (this.titlesListSq.length > 0) {
// let arr = this.titlesListSq;
// console.log(arr)
// for (let i = 0; i < arr.length; i++) {
// console.log(arr[i])
// window.$viewer.removeLayer(arr[i], true);
// arr.splice(i, 1);
// //重置i，否则i会跳一位
// i--;
// };
// this.titlesListSq = [];
// }
// let arr1 = this.titlesList;
// for (let i = 0; i < arr1.length; i++) {
// window.$viewer.removeLayer(arr1[i], true);
// arr1.splice(i, 1);
// //重置i，否则i会跳一位
// i--;
// };
// this.titlesList = []
// if (item.map3d) {
// // 模型
// let tiles3dLayer = new EGLOBE.layer.TilesetLayer({
// name: "社区",
// url: this.tileset + item.map3d,
// position: {
// alt_offset: -10
// },
// maximumScreenSpaceError: 256, //【重要】数值加大，能让最终成像变模糊
// zIndex: 3,
// show: true,
// cacheBytes: 4096 * 1024 * 1024, // 1024MB = 1024*1024*1024 【重要】额定显存大小(以字节为单位)，允许在这个值上下波动。
// maximumCacheOverflowBytes: 6144 * 1024 * 1024, // 2048MB = 2048*1024*1024 【重要】最大显存大小(以字节为单位)。
// skipLevelOfDetail: true,
// baseScreenSpaceError: 1024,
// skipScreenSpaceErrorFactor: 16,
// skipLevels: 1,
// immediatelyLoadDesiredLevelOfDetail: false,
// loadSiblings: false, // 如果为true则不会在已加载完概况房屋后，自动从中心开始超清化房屋
// cullWithChildrenBounds: true,
// cullRequestsWhileMoving: true,
// cullRequestsWhileMovingMultiplier: 10, //【重要】 值越小能够更快的剔除
// preloadWhenHidden: true,
// preferLeaves: true,
// progressiveResolutionHeightFraction: 1, //【重要】 数值偏于0能够让初始加载变得模糊
// // dynamicScreenSpaceErrorDensity: 0.1, // 数值加大，能让周边加载变快
// dynamicScreenSpaceErrorDensity: 1, // 数值加大，能让周边加载变快
// dynamicScreenSpaceErrorFactor: 1, // 不知道起了什么作用没，反正放着吧先
// dynamicScreenSpaceError: false, // 根据测试，有了这个后，会在真正的全屏加载完之后才清晰化房屋
// preloadWhenHidden: true,
// flat: item.flat ? item.flat : {}
// });
// view.addLayer(tiles3dLayer);
// this.titlesListSq.push(tiles3dLayer);
// setTimeout(() => {
// self.sqList.forEach(item => {
// item.show = true;
// })
// }, 5000)
// }
// }
// this.activesQId = item.id;
// this.getEstateLists(item.id);
// this.getBuildinglists(item.id);
} else if (item.name.indexOf("小区") != -1) {
} else if (item.name.indexOf("楼栋") != -1) {
// if (this.shuixi.length > 0) {
// let arr1 = this.shuixi;
// for (let i = 0; i < arr1.length; i++) {
// window.$drawControl.removeGraphic(arr1[i], true);
// arr1.splice(i, 1);
// //重置i，否则i会跳一位
// i--;
// };
// this.shuixi = [];
// }
// if (this.road.length > 0) {
// let arr1 = this.road;
// for (let i = 0; i < arr1.length; i++) {
// window.$drawControl.removeGraphic(arr1[i], true);
// arr1.splice(i, 1);
// //重置i，否则i会跳一位
// i--;
// };
// this.road = [];
// }
// if (this.ldId != item.id) {
// this.ldId = item.id;
// if (this.roomList.length > 0) {
// let arr1 = this.roomList;
// for (let i = 0; i < arr1.length; i++) {
// window.$drawControl.removeGraphic(arr1[i], true);
// arr1.splice(i, 1);
// //重置i，否则i会跳一位
// i--;
// };
// this.roomList = [];
// }
// this.getRoomlists(item.id);
// }
} else {
//this.activeWgId = item.id;
}
}
}
</script>
<template>
<div id="mars3dContainer" class="mars3dBox"></div>
</template>
<style scoped>
.mars3dBox {
width: 100%;
height: 100%;
}
</style>
