本文主要是介绍vue3 使用antv地图：地球飞线、地图打点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
const initEarth = () => {earthScene = new Scene({id: "earth",map: new Earth({center: [154.113164, 25.570667],zoom: 3,// pitch: 50}),});// 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色earthScene.setBgColor("");const earthlayer = new EarthLayer().source(earthPic, {parser: {type: "image",},}).color("#2E8AE6").shape("fill").style({opacity: 1.0,radius: 40,globalOptions: {ambientRatio: 0.6, // 环境光diffuseRatio: 0.4, // 漫反射specularRatio: 0.1, // 高光反射},}).animate(true);const atomLayer = new EarthLayer().color("#2E8AE6").shape("atomSphere");const bloomLayer = new EarthLayer().color("#fff").shape("bloomSphere").style({opacity: 0.7,});earthScene.on("loaded", () => {earthScene.addLayer(earthlayer);earthScene.addLayer(atomLayer);earthScene.addLayer(bloomLayer);Promise.all([fetch(// earthJsonwindow.location.origin + "/json/earthJson.json").then((d) => d.json()),// fetch(// '/public/assets/antvMap/dot.json'// ).then(d => d.text()),]).then(function onLoad([flyline, dot]) {const flydata = eval(flyline);const dotData = dot;// const dotPoint = new PointLayer({ zIndex: 999999 })// .source(dotData, {// // parser: {// // type: 'json',// // x: 'lng',// // y: 'lat'// // }// })// .shape('simple')// .color('#ffed11')// // .animate(true)// .size(940);// console.log(dotData,'---dotData');// dotData.forEach(i => {// const el = document.createElement("div");// el.innerHTML = `<img src='${locationGif}' width='100px' height='50px'/>`;// const marker = new Marker({// element: el// }).setLnglat({// lng: i.lng,// lat: i.lat// });// earthScene.addMarker(marker);// })console.log(flydata, "---flydata");const flyLine = new LineLayer({ blend: "normal" }).source(flydata, {parser: {type: "json",coordinates: "coord",},}).color("#fadd3a").shape("arc3d").size("volumes")// .active(true).animate({interval: 2,trailLength: 2,duration: 2,}).style({segmentNumber: 60,globalArcHeight: 10,});earthScene.addLayer(flyLine);// earthScene.addLayer(dotPoint);});// setTimeout(() => {// earthlayer.setEarthTime(4.0);// }, 500);});
};构建dom实例
<div id="earth"></div>页面打开时执行init方法，即可
地球
<div id="mapChina"></div>let chinaScene = null;
const initMap = () => {chinaScene = new Scene({id: "mapChina",map: new Map({style: "dark",center: [104.113164, 25.570667],zoom: 3.8,pitch: 50,}),});chinaScene.on("loaded", () => {let lineDown, lineUp, textLayer;fetch(window.location.origin + "/json/china.json").then((res) => res.json()).then((data) => {const texts = [];data.features.map((option) => {const { name, center } = option.properties;const [lng, lat] = center;texts.push({ name, lng, lat });return "";});textLayer = new PointLayer({ zIndex: 2 }).source(texts, {parser: {type: "json",x: "lng",y: "lat",},}).shape("name", "text").size(14).color("#0ff").style({textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-leftspacing: 2, // 字符间距padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近stroke: "#0ff", // 描边颜色strokeWidth: 0.2, // 描边宽度raisingHeight: 20000,textAllowOverlap: true,});chinaScene.addLayer(textLayer);lineUp = new LineLayer({ zIndex: 1 }).source(data).shape("line").color("#0DCCFF").size(1).style({raisingHeight: 20000,});chinaScene.addLayer(lineUp);return "";});fetch(window.location.origin + "/json/chinaNationalLayer.json").then((res) => res.json()).then((data) => {const nationalLayer = new PolygonLayer({}).source(data).size(20000).shape("extrude").color("#0DCCFF")// .active({// color: 'rgb(100,230,255)'// }).style({mapTexture: provinceImg, //如果想使用纹理贴图，shap必须为extrudeheightfixed: true,pickLight: true,raisingHeight: 1,opacity: 0.8,sourceColor: "#333", //抬高高度的颜色targetColor: "#fff",// sourceColor: "#333", //抬高高度的颜色});chinaScene.addLayer(nationalLayer);});fetch(window.location.origin + "/json/chinaFlyLine.json").then((res) => res.json()).then((data) => {const flyLine = new LineLayer({ blend: "normal", zIndex: 3 }).source(data, {parser: {type: "json",coordinates: "coord",},}).color("#fadd3a").shape("arc3d").size("volumes")// .active(true).animate({interval: 1,trailLength: 2,duration: 2,}).style({segmentNumber: 60,globalArcHeight: 30,});chinaScene.addLayer(flyLine);});fetch(window.location.origin + "/json/dot.json").then((res) => res.json()).then((data) => {data.forEach((i) => {const el = document.createElement("div");el.innerHTML = `<img src='${locationGif}' width='100px' height='50px'/>`;const marker = new Marker({element: el,}).setLnglat({lng: i.lng,lat: i.lat,});chinaScene.addMarker(marker);});// const dotPoint = new PointLayer()// .source(data, {// parser: {// type: 'json',// x: 'lng',// y: 'lat'// }// })// .shape('circle')// .color('#ffed11')// .animate(true)// .size(840);// chinaScene.addLayer(dotPoint);});});
};这篇关于vue3 使用antv地图：地球飞线、地图打点的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
