AntvL7+mapbox实现简单地图场景

共7个文件

html：3个

png：2个

json：2个

webGis

mapbox

数据大屏

需积分: 3 103 浏览量 2023-07-18 17:20:07 上传评论收藏 15KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

textAntv.zip （7个子文件）

textAntv

two.html 2KB

image

qy.png 882B

sm.png 2KB

third.html 3KB

index.html 2KB

json

qywz.json 539B

sm.json 36KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Antv L7 + mapbox 实现3D地图</title> <style> html,body{overflow:hidden;margin:0;} #idMap { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id="idMap"> </div> <script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>  <script src = 'https://unpkg.com/@antv/l7'></script> <script> //mapboxgl.accessToken = 'pk.------------------你的mapboxtoken'; const scene = new L7.Scene({ id: 'idMap', map: new L7.Mapbox({ style: 'dark', center: [ 110.497005, 38.835641 ], pitch: 20, zoom: 3.8, }) }); scene.on('loaded', () => { let lineDown,lineUp,textLayer; fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.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 L7.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-left // spacing: 1, // 字符间距 // padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 // stroke: '#0ff', // 描边颜色 // strokeWidth: 0.2, // 描边宽度 // raisingHeight: 800000, // textAllowOverlap: true // }); // scene.addLayer(textLayer); lineUp = new L7.LineLayer({ zIndex: 1 }) .source(data) .shape('line') .color('#0DCCFF') .size(1) .style({ raisingHeight: 800000 }); scene.addLayer(lineUp); const provincelayer = new L7.PolygonLayer({}) .source(data) .size(800000) // 切面高度 .shape('extrude') .color('#0DCCFF') .active({ color: 'rgb(100,230,255)' }) .style({ heightfixed: true, pickLight: true, raisingHeight: 0, // 抬升高度，距离底图的高度 opacity: 0.8 }); scene.addLayer(provincelayer); return ''; }); return ''; }); </script> </body> </html>

评论收藏

内容反馈