首页 > 编程语言 >百度地图GL javascript API 如何绘制流动箭头的线?

百度地图GL javascript API 如何绘制流动箭头的线?

时间:2023-11-11 19:34:25浏览次数:42  
标签:symbol javascript BMapGL 箭头 API var new GL Symbol

要使用百度地图GL JavaScript API绘制流动箭头线,可以使用 Polyline 和 Symbol 样式来实现。下面是一个示例代码:

// 创建地图实例
var map = new BMapGL.Map("mapContainer");
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);

// 创建折线
var points = [
    new BMapGL.Point(116.399, 39.910),
    new BMapGL.Point(116.405, 39.920),
    new BMapGL.Point(116.415, 39.900)
];
var polyline = new BMapGL.Polyline(points, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.7});
map.addOverlay(polyline);

// 创建箭头符号
var symbol = new BMapGL.Symbol(BMapGL_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
    scale: 0.6,  // 箭头大小
    rotation: 120,  // 箭头旋转角度
    strokeColor: '#f00',  // 符号边框颜色
    strokeWeight: 2,  // 符号边框宽度
    fillColor: '#00f',  // 符号填充颜色
    fillOpacity: 0.8  // 符号填充透明度
});

// 在折线上添加箭头符号
polyline.setStrokeStyle({symbol: symbol});

// 流动效果
var i = 0;
function flow() {
    var symbol = new BMapGL.Symbol(BMapGL_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
        scale: 0.6,
        rotation: 120 + i,  // 角度随时间变化
        strokeColor: '#f00',
        strokeWeight: 2,
        fillColor: '#00f',
        fillOpacity: 0.8
    });
    polyline.setStrokeStyle({symbol: symbol});
    i++;
    setTimeout(flow, 100);  // 控制流动速度
}
flow();

上述代码中,首先创建了一个地图实例,并初始化中心点和缩放级别。然后,创建了一个折线,并添加到地图上。接着,创建一个箭头符号,设置其样式参数。最后,通过 setStrokeStyle 方法将箭头符号应用到折线上,并通过流动效果使箭头旋转角度随时间变化,实现流动箭头效果。

请确保在使用之前引入正确的百度地图GL JavaScript API文件并替换示例代码中的地图容器ID、折线的坐标点等相关信息。

标签:symbol,javascript,BMapGL,箭头,API,var,new,GL,Symbol
From: https://blog.51cto.com/M82A1/8319199

相关文章

  • SuperGlue: Learning Feature Matching with Graph Neural Networks论文笔记
    SuperGlue:LearningFeatureMatchingwithGraphNeuralNetworks源码:github.com/magicleap/SuperGluePretrainedNetwork背景:主要解决图像中点之间的对应关系。主要方法:上图为该方法的主要框架。模型大致分为两个部分:注意图神经网络和最优匹配层。其中第i个局部特征由di......
  • bam2hints.cc:16:10: fatal error: api/BamReader.h: No such file or directory
     001、make编译报错如下:bam2hints.cc:16:10:fatalerror:api/BamReader.h:Nosuchfileordirectory 002、在系统中查找该文件(base)[[email protected]]#find/-name"BamReader.h"##系统中果然不存在该文件;因此解决思路就是安装该文件 003、貌......
  • webapi
    获取请求体数据[HttpPost]publicIHttpActionResultAliCallBack(){//两种都可以,用流的话要自己转//Request.Content.ReadAsStreamAsync().Result//用这个就好,自动会转成字符串varrequestContent=Request.Content.ReadAsStringAsync().Result;......
  • 一个很漂亮的鼠标移动特效,Javascript 脚本,可惜复制到博客园配置适配效果不好
    一个很漂亮的鼠标移动特效,Javascript脚本,可惜复制到博客园配置适配效果不好,暂时记录一下<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>小白教程(json.cn)</title></head><body><script>varStats=function(){var......
  • JavaScript的BOM和DOM对象操作与设置顶级窗口------前端
    准备一个用来嵌入的HTML页面<!DOCTYPEhtml><!--这是HTML的注释--><htmllang="en"id="myHtml"> <head> <!--这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码--> <metacharset="UTF-8"> <metaname="viewport&q......
  • JavaScript--事件监听
     事件绑定 dom属性绑定  <inputtype="button"id="btn"value="点我">  <script>    //document.getElementById('myImgine').src='images/open.jpg';    document.getElementById("btn&......
  • JavaScript-3
    JavaScript-3onmousemove该事件将会在鼠标在元素中移动时被触发<style>#a1{width:200px;height:100px;border:2pxsolidred;}#a2{width:200px;height:50px;border:2pxsolid#14dc2f}</style>......
  • Java基础、MySQL数据库、Web前端(HTML、CSS、JavaScript)
    一、选择题(每题1分,共20题,共20分),注:可能有多选哦!1、在Java中,下列标识符不合法的有(   )A.newB.$UsdollarsC.1234 D.car.taxi2、定义了int型二维数组int[][]a=newinta[6][7]后,数组元素a[3][4]前的数组元素个数为(  )  A.24 B.25 C.18 D.173、下面程序的运行结果是( ......
  • fsm.h:24:37: fatal error: glib.h: No such file or directory
     001、编译make提示错误如下:fsm.h:24:37:fatalerror:glib.h:Nosuchfileordirectory 002、解决方法(base)[[email protected]]#yuminstallglib* 003、查找该头文件(base)[[email protected]]#find/-name"glib.h"/root/anaconda3/p......
  • OpenGL 模型加载详解
    1.Assimp目前为止,我们已经可以绘制一个物体,并添加不同的光照效果了。但是我们的顶点数据太过简单,只能绘制简单的立方体。但是房子汽车这种不规则的形状我们的顶点数据就很难定制了。索性,这部分并不需要我们苦逼的开发人员去考虑。成熟的3D建模工具可以将设计师设计的模型导出模......