百度地图之飞线动画(一)

引入库<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.140/dist/mapvgl.threelayers.min.js"></script>总体结构与散点图类似初始化百度地图function initBMap() { var cityCenter = mapv.utilCityCenter.getCenterByCityName('上海') var map = init
摘要由CSDN通过智能技术生成

引入库

<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.140/dist/mapvgl.threelayers.min.js">
</script>

总体结构与散点图类似

初始化百度地图

function initBMap() {
    var cityCenter = mapv.utilCityCenter.getCenterByCityName('上海')
    var map = initMap({
        tilt:30,
        center:[cityCenter.lng, cityCenter.lat],
        zoom:7,
        style:purpleStyle})
    return map;
    };

准备数据源 

数据源添加方式也与散点图类似,只演示一种吧

function initData() {
    var data = [];
    // 生成贝塞尔曲线坐标集
    var cities = ['济南','临沂','潍坊','东营','滨州','青岛','威海','枣庄'];
    // 1、实例化贝塞尔曲线对象
    var curve = new mapvgl.BezierCurve();
    randomCount = 100;
    while (randomCount--){
    // 2、设置起点终点坐标
        var start = mapv.utilCityCent
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对不起,作为AI语言模型,我无法直接为您编写代码。不过,我可以为您提供一个基本的地图线示例,供您参考和学习。 首先,您需要引入echarts库和地图数据: ```html <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts-gl.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts-liquidfill.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/extension/bmap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 然后,您可以在HTML中创建一个div元素,用于渲染地图: ```html <div id="map" style="width: 100%; height: 600px;"></div> ``` 接下来,您需要在JS中编写代码来生成地图线: ```javascript // 初始化echarts实例 var myChart = echarts.init(document.getElementById('map')); // 配置地图 myChart.setOption({ bmap: { center: [116.46, 39.92], zoom: 5, roam: true, mapStyle: { styleJson: [{ featureType: 'water', elementType: 'all', stylers: { color: '#d1d1d1' } }, { featureType: 'land', elementType: 'all', stylers: { color: '#f3f3f3' } }, { featureType: 'railway', elementType: 'all', stylers: { visibility: 'off' } }, { featureType: 'highway', elementType: 'all', stylers: { color: '#fdfdfd' } }, { featureType: 'highway', elementType: 'labels', stylers: { visibility: 'off' } }, { featureType: 'arterial', elementType: 'geometry', stylers: { color: '#fefefe' } }, { featureType: 'arterial', elementType: 'geometry.fill', stylers: { color: '#fefefe' } }, { featureType: 'poi', elementType: 'all', stylers: { visibility: 'off' } }, { featureType: 'green', elementType: 'all', stylers: { visibility: 'off' } }, { featureType: 'subway', elementType: 'all', stylers: { visibility: 'off' } }, { featureType: 'manmade', elementType: 'all', stylers: { color: '#d1d1d1' } }, { featureType: 'local', elementType: 'all', stylers: { color: '#d1d1d1' } }, { featureType: 'arterial', elementType: 'labels', stylers: { visibility: 'off' } }, { featureType: 'boundary', elementType: 'all', stylers: { color: '#fefefe' } }, { featureType: 'building', elementType: 'all', stylers: { color: '#d1d1d1' } }, { featureType: 'label', elementType: 'labels.text.fill', stylers: { color: '#999999' } }] } }, series: [{ type: 'lines', coordinateSystem: 'bmap', data: [ [{ name: '北京' }, { name: '上海', value: 100 }], [{ name: '北京' }, { name: '广州', value: 100 }], [{ name: '北京' }, { name: '深圳', value: 100 }], [{ name: '北京' }, { name: '成都', value: 100 }], [{ name: '北京' }, { name: '重庆', value: 100 }] ], polyline: true, lineStyle: { normal: { color: '#ffa022', width: 1, opacity: 0.6, curveness: 0.2 } } }] }); ``` 这段代码中,我们使用了echarts的地图组件和lines系列,通过data属性指定了要绘制的地图线的起点和终点,以及value属性指定了线条的粗细程度。通过lineStyle属性可以设置线条的样式,包括颜色、宽度、透明度和曲线程度等。 当您运行这段代码时,就可以在页面上看到一个简单的地图线效果了。如果您想进一步优化地图线效果,可以通过调整属性和样式来实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值