效果圖
引入相關(guān)文件
因?yàn)槲乙彩堑谝淮问褂茫晕沂前巡寮驮次募家肓?，能使用啟?dòng)
源文件
下載地址：
http://mars3d.cn/download.html
放入位置
在index.html中引入
<!--引入cesium基礎(chǔ)lib-->
<link href="/static/Cesium/Widgets/widgets.css" rel="stylesheet" />
<script src="/static/Cesium/Cesium.js" type="text/javascript"></script>
<!--引入mars3d庫(kù)lib-->
<link href="/static/mars3d-JS/mars3d.css" rel="stylesheet" />
<script src="/static/mars3d-JS/mars3d.js" type="text/javascript"></script>
引入插件
npm install mars3d --save
我是封裝的組件，代碼的使用和意義 我直接放在備注中
大體布局
父組件
添加地圖內(nèi)部數(shù)據(jù)和地圖外部數(shù)據(jù)的方法 ，我都是放在上圖的moreMethod()方法中一起調(diào)用的
文章來源：http://www.zghlxwxcb.cn/news/detail-807278.html
子組件
文章來源地址http://www.zghlxwxcb.cn/news/detail-807278.html
// 這個(gè)是初始化地圖的視角等一些基本配置
const mapOptions = {
scene: {
center: { lat: 26.803502, lng: 104.706942, alt: 303223.8, heading: 357.36, pitch: -57.36, roll: 0.01 }, //alt 高度值 heading 方向角 pitch俯仰角 roll 翻滾角
orderIndependentTranslucency: false,
contextOptions: { webgl: { alpha: true } }, // 允許透明，只能Map初始化傳入 [關(guān)鍵代碼]
showSun: false,
showMoon: false,
showSkyBox: false,
showSkyAtmosphere: false,
fog: false,
globe: {
baseColor: "rgba(0,0,0,0)", // 地球地面背景色
showGroundAtmosphere: false,
enableLighting: false
}
},
control: {
baseLayerPicker: false
},
terrain: { show: false },
layers: [],
basemaps: []
// basemaps: [{ name: "天地圖", type: "tdt", layer: "img_d", show: true }]
};
const map = ref(null);
//初始地圖
const initMap = () => {
return new Promise(resolve => {
// mars3dContainer對(duì)應(yīng)的是div上面的id，mapOptions就是上面寫的配置
map.value = new mars3d.Map("mars3dContainer", mapOptions);
//添加背景圖
// map.value.container.style.backgroundImage = `url(${getImageUrl("bg")})`;
map.value.container.style.backgroundRepeat = "no-repeat";
map.value.container.style.backgroundSize = "100% 100%";
resolve(map.value);
});
};
// 這個(gè)是地圖對(duì)應(yīng)的底圖
const baseMap = levelCode => {
// 因?yàn)楣δ艽嬖诘讏D下鉆和返回，所以當(dāng)?shù)貓D下鉆或返回上一層級(jí)的時(shí)候
//需要判斷這個(gè)圖層是否存在，存在就刪除之前的圖層，然后渲染信的圖層頁(yè)面
if (map.value.getLayerById("tileBaseLayer")) {
map.value.removeLayer(map.value.getLayerById("tileBaseLayer"));
}
const tileLayer = new mars3d.layer.XyzLayer({
id: "tileBaseLayer",
crs: "EPSG:4326",
// 這個(gè)是寫底圖的來源，因?yàn)槲翼?xiàng)目是封裝了底圖的 所以你可以更換成你想要的其他的底圖
url: baseMapLayer[levelCode] // rectangle: { xmin: 114.883371, xmax: 119.649144, ymin: 29.395253, ymax: 34.650809 }
});
map.value.addLayer(tileLayer);
};
// 添加地圖和內(nèi)邊界線 val--地圖的數(shù)據(jù) level--地圖的層級(jí) map--就是我父組件定義的map
const addYibin = (val, level, map) => {
// 各市邊界線和名稱--先清除再添加
if (map.getLayerById("childLineLayer")) {
map.removeLayer(map.getLayerById("childLineLayer"));
}
//各子級(jí)標(biāo)簽--先清除再添加
if (map.getLayerById("tipYibinGraphicLayer")) {
map.removeLayer(map.getLayerById("tipYibinGraphicLayer"));
}
const childLineLayer = new mars3d.layer.GeoJsonLayer({
id: "childLineLayer",
name: "各子級(jí)邊界線",
// url: `//data.mars3d.cn/file/geojson/areas/${level}_full.json`,
// 傳遞數(shù)據(jù) 包含子集
data: val,
symbol: {
type: "polyline",
styleOptions: {
color: "#a4b094",
width: 1
}
}
});
map.addLayer(childLineLayer);
let tipYibinGraphicLayer = new mars3d.layer.GraphicLayer();
tipYibinGraphicLayer.id = "tipYibinGraphicLayer";
map.addLayer(tipYibinGraphicLayer);
tipYibinGraphicLayer.on(mars3d.EventType.click, event => {
const attr = event.graphic?.attr;
if (attr) {
}
});
// 標(biāo)記
let geojson = val;
const arr = geojson.features;
tipYibinGraphicLayer.clear();
for (let index = 0; index < arr.length; index++) {
const element = arr[index];
const attr = element.properties; // 屬性信息
// 這個(gè)是定義標(biāo)簽的樣式，html里面的內(nèi)容可以自定義
const divGraphic = new mars3d.graphic.DivGraphic({
position: [attr.smx, attr.smy],
style: {
html: `<div class="tipbox">
<div class="tipboxTitle">
<div class="titleChild">
<p title='${attr.name}'>${attr.name}</p>
<img code="${attr.adcode}-${attr.name}" src="${getImageUrl("next_icon")}" id=nextIcon_${index} class="nextIcon"></img>
<img code="${attr.adcode}-${attr.name}" src="${getImageUrl("up-icon")}" id=upIcon_${index} class="upIcon" style="display:${
level == -1 ? "none" : "block"
}"></img>
</div>
</div>
<img src="${getImageUrl("tip_bottom")}" class="tipboxImage"></img>
</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true
},
attr
});
tipYibinGraphicLayer.addGraphic(divGraphic);
}
//上下鉆事件
let nextIconArr = document.getElementsByClassName("nextIcon");
let upIconArr = document.getElementsByClassName("upIcon");
for (let i = 0; i < nextIconArr.length; i++) {
const item = nextIconArr[i];
item.addEventListener("click", async (e: any) => {
if (map.getLayerById("yibinWall")) {
map.removeLayer(map.getLayerById("yibinWall"));
}
if (map.getLayerById("childLineLayer")) {
map.removeLayer(map.getLayerById("childLineLayer"));
}
if (map.getLayerById("tipYibinGraphicLayer")) {
map.removeLayer(map.getLayerById("tipYibinGraphicLayer"));
}
let attributesCode = e.target.attributes[0].value;
let req = {
parentCode: attributesCode.split("-")[0],
name: attributesCode.split("-")[1]
};
emit("nextLevelFun", req);
});
}
for (let i = 0; i < upIconArr.length; i++) {
const item = upIconArr[i];
item.addEventListener("click", async (e: any) => {
if (map.getLayerById("yibinWall")) {
map.removeLayer(map.getLayerById("yibinWall"));
}
if (map.getLayerById("childLineLayer")) {
map.removeLayer(map.getLayerById("childLineLayer"));
}
if (map.getLayerById("tipYibinGraphicLayer")) {
map.removeLayer(map.getLayerById("tipYibinGraphicLayer"));
}
let attributesCode = e.target.attributes[0].value;
let req = {
parentCode: attributesCode.split("-")[0],
name: attributesCode.split("-")[1]
};
emit("uptLevelFun", req);
});
}
// });
};
// 外邊界
const addBorderYibin = (valBorder, map, level) => {
// 宜賓邊界線墻--先清除再添加
if (map.getLayerById("yibinWall")) {
map.removeLayer(map.getLayerById("yibinWall"));
}
const yibinWall = new mars3d.layer.GeoJsonLayer({
id: "yibinWall",
name: "宜賓邊界墻",
// 邊界線傳值-僅自己
data: valBorder,
// 自定義解析數(shù)據(jù)
onCreateGraphic: function (options) {
const points = options.positions; // 坐標(biāo)
const attr = options.attr; // 屬性信息
mars3d.PolyUtil.computeSurfaceLine({
map: map,
positions: points,
has3dtiles: false,
splitNum: 80
}).then(result => {
const graphic = new mars3d.graphic.WallPrimitive({
positions: result.positions,
style: {
addHeight: level == 1 ? -3000 : -15000,
diffHeight: level == 1 ? 3000 : 15000, // 墻高
materialType: mars3d.MaterialType.Image2,
materialOptions: {
image: getImageUrl("fence-top"),
color: "rgba(76,215,222,0.5)"
}
},
attr
});
yibinWall.addGraphic(graphic);
yibinWall.flyTo({
scale: 1.5
});
});
}
});
map.addLayer(yibinWall);
// map.on(mars3d.EventType.renderError, function () {
// window.location.reload();
// });
};
defineExpose({
initMap,
addYibin,
baseMap,
addBorderYibin,
map
});
到了這里，關(guān)于vue3使用Mars3D寫區(qū)塊地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
