项目中使用AntV L7
地图,添加 飞线
文档地址:https://l7.antv.antgroup.com/zh/examples/line/animate/#trip_animate
一、初始化地图
- 使用的地图文件为四川地图
JSON
,下载地址:https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
import { ref, onMounted } from "vue";
import { Scene } from "@antv/l7";
import { Map } from "@antv/l7-maps";const scene: any = ref(null); //地图实例function initMap() {scene = new Scene({id: "map",logoVisible: false, //logo 是否可见map: new Map({center: [104.065735, 30.659462], //中心点zoom: 5.4, //初始化缩放等级interact: false, // 高德地图是否允许地图可拖动,默认为truepitch: 30,}),});scene.setMapStatus({dragEnable: false, //是否允许地图拖拽keyboardEnable: false, // 是否允许形键盘事件doubleClickZoom: false, // 双击放大zoomEnable: false, // 滚动缩放rotateEnable: false, // 旋转});scene.on("loaded", () => {addPolygonLayer();addLineLayer()});
}onMounted(() => {initMap();
});
二、添加地图面图层
import sichuanJson from "@/assets/json/sichuan.json";
import sichuanAreaJson from "@/assets/json/scArea.json"; //将地图下载存放在本地文件中,并引入function addPolygonLayer() {//边线const sichuanLineShapeMap = new LineLayer({ zIndex: 10 }).source(sichuanJson).shape("line").size(0).color("rgb(175, 222, 255)").style({// raisingHeight: 200000,});const sichuanLineMap = new LineLayer({ zIndex: 10 }).source(sichuanAreaJson).shape("wall").size(150000).style({heightfixed: true,opacity: 0.6,sourceColor: "rgba(0,0, 0,.5)",targetColor: "rgb(175, 222, 255)",});let polygonLayer = new PolygonLayer() //{ autoFit: true }.source(sichuanAreaJson).size(150000).shape("extrude").color("rgba(0,0, 0,.5)").active({color: "rgb(100,230,255)",}).style({// mapTexture: mapBg,heightfixed: true,pickLight: true,raisingHeight: 10000,opacity: 0.8,});const texts: any = [];sichuanAreaJson.features.map((option: any) => {const { name, center } = option.properties;const [lng, lat] = center;texts.push({ name, lng, lat });return "";});const scPointLayer = new PointLayer({ zIndex: 10 }).source(texts, {parser: {type: "json",x: "lng",y: "lat",},}).shape("name", "text").size(10).color("#fff").style({textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-leftspacing: 2, // 字符间距padding: [1, 1], // 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近stroke: "#fff", // 描边颜色strokeWidth: 0.3, // 描边宽度textAllowOverlap: true,raisingHeight: 10000,});scene.addLayer(polygonLayer);scene.addLayer(sichuanLineShapeMap);scene.addLayer(scPointLayer);scene.addLayer(sichuanLineMap);
}
三、添加地图飞线
1、引入需要渲染飞线的数据
//数据格式如下:
[
{ "startLongitude":"104.080989","startLatitude":"30.657689","endLongitude":"101.964057","endLatitude":"30.050738"}
]
2、
import flyData from "@/assets/json/flyData.json"
function addLineLayer(){const layer = new LineLayer({blend: 'normal',}).source(flyData, {parser: {type: 'json',x: 'startLongitude',y: 'startLatitude',x1: 'endLongitude',y1: 'endLatitude',},}).size(2).shape('arc3d').color('#fff').animate({interval:0.5,trailLength: 1,duration: 3,}).style({opacity:1,raisingHeight: 10000,});scene.addLayer(layer);
}function addChinaLineLayer() {moveLineLayer.value = new LineLayer({blend: "normal",}).source(dailyFlyData, {parser: {type: "json",x: "startLongitude",y: "startLatitude",x1: "endLongitude",y1: "endLatitude",},}).size(3).shape("arc3d").color("rgb(249, 252, 22)").animate({interval: 0.5,trailLength: 1,duration: 3,}).style({opacity: 1,raisingHeight: 10000,});movePointLineLayer.value = new PointLayer({autoFit: false,zIndex:10}).source(dailyFlyData, {parser: {type: "json",x: "endLongitude",y: "endLatitude",},}).shape("name", "text").size(14).active(true).color("#18ecef").style({raisingHeight: 35000,});scene.value.addLayer(moveLineLayer.value);scene.value.addLayer(movePointLineLayer.value);
}
四、完整代码如下
<script lang="ts" setup>
import { onMounted } from "vue";
import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7";
import { Map } from "@antv/l7-maps";
import sichuanJson from "@/assets/json/sichuan.json";
import sichuanAreaJson from "@/assets/json/scArea.json";
// import mapBg from "@/assets/images/screen/home/bg_screen.png"
import flyData from "@/assets/json/flyData.json"let scene: Scene; //地图实例//初始化地图
function initMap() {scene = new Scene({id: "map",logoVisible: false, //logo 是否可见map: new Map({center: [104.065735, 30.659462], //中心点zoom: 5.4, //初始化缩放等级interact: false, // 高德地图是否允许地图可拖动,默认为truepitch: 30,}),});scene.setMapStatus({dragEnable: false, //是否允许地图拖拽keyboardEnable: false, // 是否允许形键盘事件doubleClickZoom: false, // 双击放大zoomEnable: false, // 滚动缩放rotateEnable: false, // 旋转});scene.on("loaded", () => {addPolygonLayer();addLineLayer()});
}function addPolygonLayer() {//边线const sichuanLineShapeMap = new LineLayer({ zIndex: 10 }).source(sichuanJson).shape("line").size(0).color("rgb(175, 222, 255)").style({// raisingHeight: 200000,});const sichuanLineMap = new LineLayer({ zIndex: 10 }).source(sichuanAreaJson).shape("wall").size(150000).style({heightfixed: true,opacity: 0.6,sourceColor: "rgba(0,0, 0,.5)",targetColor: "rgb(175, 222, 255)",});let polygonLayer = new PolygonLayer() //{ autoFit: true }.source(sichuanAreaJson).size(150000).shape("extrude").color("rgba(0,0, 0,.5)").active({color: "rgb(100,230,255)",}).style({// mapTexture: mapBg,heightfixed: true,pickLight: true,raisingHeight: 10000,opacity: 0.8,});const texts: any = [];sichuanAreaJson.features.map((option: any) => {const { name, center } = option.properties;const [lng, lat] = center;texts.push({ name, lng, lat });return "";});const scPointLayer = new PointLayer({ zIndex: 10 }).source(texts, {parser: {type: "json",x: "lng",y: "lat",},}).shape("name", "text").size(10).color("#fff").style({textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-leftspacing: 2, // 字符间距padding: [1, 1], // 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近stroke: "#fff", // 描边颜色strokeWidth: 0.3, // 描边宽度textAllowOverlap: true,raisingHeight: 10000,});scene.addLayer(polygonLayer);scene.addLayer(sichuanLineShapeMap);scene.addLayer(scPointLayer);scene.addLayer(sichuanLineMap);
}function addLineLayer(){const layer = new LineLayer({blend: 'normal',}).source(flyData, {parser: {type: 'json',x: 'startLongitude',y: 'startLatitude',x1: 'endLongitude',y1: 'endLatitude',},}).size(2).shape('arc3d').color('#fff').animate({interval:0.5,trailLength: 1,duration: 3,}).style({opacity:1,raisingHeight: 10000,});scene.addLayer(layer);
}onMounted(() => {initMap();
});
</script><template><div class="map-content"><div id="map"></div></div>
</template><style lang="scss" scoped>
.map-content {width: 100%;height: 100%;box-sizing: border-box;position: relative;overflow-y: hidden;#map {width: 100%;height: 100%;}
}</style>