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-left
spacing: 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 '';
});
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgagbeg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13