html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图

echarts的3D地图实在太丑了，还一堆bug

使用阿里的Antv可视化库L7，实现3D地图，底图是mapbox
参考示例：https://l7.antv.antgroup.com/zh/examples/polygon/3d#floatMap

如果不需要底图样式，可把Scene的style设置为blank

直接上代码了，vue的就不说了，项目是html的

mapbox依赖

<script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />

L7依赖

<script src = 'https://unpkg.com/@antv/l7'></script>

body元素

<div id="idMap"></div>

实现

<script>mapboxgl.accessToken = 'pk.------------------你的mapboxtoken';const scene = new L7.Scene({id: 'idMap',map: new L7.Mapbox({style: 'dark',center: [ 120, 29.732983 ],pitch: 40,zoom: 4,})});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-leftspacing: 1, // 字符间距padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近stroke: '#0ff', // 描边颜色strokeWidth: 0.2, // 描边宽度raisingHeight: 300000,textAllowOverlap: true});scene.addLayer(textLayer);lineUp = new L7.LineLayer({ zIndex: 1 }).source(data).shape('line').color('#0DCCFF').size(1).style({raisingHeight: 300000});scene.addLayer(lineUp);const provincelayer = new L7.PolygonLayer({}).source(data).size(300000)    // 切面高度.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 '';});

html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图相关推荐

【数据可视化】Antv L7给地图添加图例Legend
地图组件用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例.比例尺 L7 目前支持 Control Zoom 放大缩小 Scale 比例尺 Layers 图层列表组件介绍: impo ...
在vue项目中使用AntV L7地图下钻，异步调用不重复生成
AntV L7 地图下钻的踩坑生成实现地图下钻.样式.数据异步调用生成,以及细节. ==注释后有'@#@#*'为重要== ==如有不对请指出== 1.安装AntV L7以及相关的组件引用 2.在da ...
mapbox 使用antv/l7添加下雨效果
AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单.方便.专业可靠.无限可能的数据可视化最佳实践.AntV包括以下解决方案 G2:可视化引擎 G2Plot:图表库 G6 : 图可视化引 ...
antv L7地图报错：context lost at Funciton
某天疯狂渲染地图组件,大概17次来回切换,屏幕重新渲染地图,最终它还是没能扛下所有,不幸崩塌. 分析可能的原因: 1.由于L7地图画布一直累加在页面上,old context 无法回溯更新," ...
AntV L7地图可视化入坑笔记
先用 HTML CDN的方式跑起来一个地图案例: 官方案例地址:https://codesandbox.io/s/laughing-fermat-fjy5y?file=/index.html:491- ...
antv/l7+高德地图+天气弹窗
L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持高德地图和 MapBox 两种. 1.引入map import { GaodeMap } from '@ ...
@antv/l7绘制地图，添加图例，修改地图上颜色，是否允许地图拖拽，是否滚动缩放等
html <div class="charts-box"><div style="min-height: 300px; justify-content: ...
java 室内3d_室内地图制作-首款实时室内绘制室内地图-3D室内地图
室内地图制作经过易景空间地图团队的持续优化迭代,新版本地图编辑器中的画圆柱体.模型库.快速画道路.房间直接换纹理贴图等功能终于上线了,目前市面上一款无需安装软件就能直接使用浏览器访问的在线室内地图 ...
高德地图3D轨迹回放 + 视野跟随功能
高德地图3D轨迹回放 + 视野跟随功能概述代码实现步骤完整代码 (需要添加一个2.0的key) 概述若有帮助到你,麻烦点一波关注,博主会持续推出Echarts,D3,地图,Three.js方面 ...

html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图

html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图相关推荐

最新文章

热门文章

html Antv L7 + mapbox 实现3D地图 3D中国地图 不限于中国地图

html Antv L7 + mapbox 实现3D地图 3D中国地图 不限于中国地图相关推荐

最新文章

热门文章

html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图

html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图相关推荐