L7和mapbox结合使用的案例2

先在html文件中准备一个定义了高宽的 DOM 容器
```
<div id="map" style="width: 100%;height:900px;"></div>
```

引入js

<!-- mapbox-gl -->
<link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
<!-- chinese-->
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.0/mapbox-gl-language.js'></script>
<!-- 空间分析和统计-->
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
<!-- L7-->
<script src="https://unpkg.com/@antv/l7"></script>

开始写js代码

     mapboxgl.accessToken = 'XXXX';mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');const map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v10',//center: [104.195397, 35.86166],center: [47.481766,29.31166],zoom: 1.1});// 修改地图语言为中文const geocoder = new MapboxLanguage({defaultLanguage: 'zh', // Specify the language as German.});map.addControl(geocoder);// 取消双击缩放map.doubleClickZoom.disable();const scene = new L7.Scene({id: 'map',map: new L7.Mapbox({mapInstance: map,}),});// 构建点数据格式const points=[{value: 0.39,info: "英国 入境金额：$0.39万, 出境金额：$474.14万",name: "英国",lnglat: [-3.435973,55.378051],},{value: 693.53,info: "中国香港 入境金额：$693.53万, 出境金额：$1742.08万",name: "中国香港",lnglat:[ 114.066662,22.588638],},
];// 线数据格式const lines=[{from: "-3.435973,55.378051",to: "114.066662,22.588638"},{from: "17.873887, -11.202692",to: "-63.61667199999999, -38.416097"},
];// 构建点坐标scene.on('loaded', () => {// 标记点for (const { name, info,lnglat } of points) {// 创建默认 markerconst popup = new L7.Popup({offsets: [ 0, 20 ]}).setText(info);const el = document.createElement('img');//  自己指定的图片路径el.src = '/static/img/坐标.png';el.style.height='30px';el.style.weight='30px';const marker = new L7.Marker({element: el}).setLnglat(lnglat).setPopup(popup);scene.addMarker(marker);marker.on('click', (ev)=>{//alert(ev)console.log(name);});}// 流线scene.addImage('plane','/static/img/飞机.png'// 'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg');const flydata = eval(lines).map(item => {// @ts-ignoreconst latlng1 = item.from.split(',').map(e => {return e * 1;});// @ts-ignoreconst latlng2 = item.to.split(',').map(e => {return e * 1;});return {coord: [latlng1, latlng2]};});console.log(flydata);const flyLine = new L7.LineLayer({blend: 'normal'}).source(flydata, {parser: {type: 'json',coordinates: 'coord'}}).color('#ff6b34')// 飞机.texture('plane').shape('arc')// .shape('arc').size(20)// .active(true).animate({duration: 2,//动画时间 单位(s)秒interval: 0.3,//轨迹间隔, 取值区间 0 - 1trailLength: 0.1//轨迹长度 取值区间 0 - 1}).style({textureBlend: 'replace',lineTexture: true, // 开启线的贴图功能//iconStep: 10, // 设置贴图纹理的间距opacity: 1});const flyLine2 = new L7.LineLayer().source(flydata, {parser: {type: 'json',coordinates: 'coord'}}).color('#ff6b34').shape('arc')// .shape('arc').size(1)// .active(true).style({//lineType: 'dash',dashArray: [5, 5],opacity: 0.7});scene.addLayer(flyLine2);scene.addLayer(flyLine);});

注：需要自己指定accessToken和img的src路径

L7和mapbox结合使用的案例2相关推荐

L7和mapbox结合使用的案例1
先在html文件中准备一个定义了高宽的 DOM 容器 <div id="map" style="width: 100%;height:900px;"> ...
IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...
antv g6 禁止移动_十 AntV
← Highcharts AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便.专业可靠.无限可能的数据可视化最佳实践. AntV 包括以下解决方案: G2:可视化引擎 G2Plot ...
CAD与GIS集成说明（ 2022-08-19 ）
mapbox地图与cad图纸的集成示例代码说明点击演示示例查看效果点击下载示例源码 mapbox-gl.js是通过webgl渲染交互式地图的js库利用mapbox提供的自定义图层实现渲染mxdr ...
为至简时代哀悼：开源商业模式之殇
2021-01-08 17:00:00 全文共3740字,预计学习时长10分钟图源:unsplash Mapbox GL JS新版将成为专利的消息使我震撼.我并非狂热分子,我不觉得自己有权利拥有别人 ...
html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图
echarts的3D地图实在太丑了,还一堆bug 使用阿里的Antv可视化库L7,实现3D地图,底图是mapbox 参考示例:https://l7.antv.antgroup.com/zh/examp ...
Angular8通过npm引入Mapbox GL 和 Ant L7
文章目录缘起官网NPM安装指引问题与解决办法问题一:引入mapboxgl 问题二:引入L7的对象缘起 Angular8引入Mapbox GL 和 Ant L7,之前都是将js API放在本地 ...
mapbox 使用antv/l7添加下雨效果
AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单.方便.专业可靠.无限可能的数据可视化最佳实践.AntV包括以下解决方案 G2:可视化引擎 G2Plot:图表库 G6 : 图可视化引 ...
Geoserve发布Mapbox矢量切片格式openlayer加载案例
一.Geoserver安装配置 1.下载安装geoserver,官网地址点击 2.在官网配置与geoserver版本一致的[下载地址这里是2.5.1的版本],(https://sourceforge. ...

L7和mapbox结合使用的案例2

L7和mapbox结合使用的案例2相关推荐

最新文章

热门文章