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

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

时间:2023-09-14 18:31:53浏览次数:35  
标签: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/7473210

相关文章

  • ArcGIS API for JS4.8绘制点、线、面、矩形、圆
    实现代码使用ArcGISAPIforJS4.8绘制点(Point)、线(Polyline)、面(Polygon)、矩形(Rectangle)、圆(Circle),使用Draw绘制,具体代码如下:<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>ArcGISdemo</title><linktyp......
  • GLM-130B 部署 - 8*3090-24G
    官方文档镜像要求A100-40G-8卡硬件配置:软件配置:1.准备由于恒源云暂时缺少硬件资源,此次部署使用8*3090-24G配置(需要量化int8):注意镜像选择,pytorch版本选择1.13,不要选择2.0,2.0会产生不兼容的情况。同时需要注意扩容,否则模型存放不够空间创建实例后,打开终端,下载模型到临......
  • 什么是 JavaScript?它是如何工作的?可以用它做什么
    什么是JavaScript?JavaScript是一种编程语言,最初由BrendanEich于1995年在NetscapeCommunicationsCorporation工作时开发。最初名为“Livescript”,后来更名为“JavaScript”。用JavaScript编写的命令可以直接执行,无需任何编译或准备。因此,JavaScript与其他编程语言有很......
  • .NET Core创建API项目
    新建项目类型:ASP.NETCoreWebAPIWebAPI控制器通常应派生自ControllerBase而不是Controller。Controller派生自ControllerBase,并添加对视图的支持,因此它用于处理Web页面,而不是WebAPI请求。如果同一控制器必须支持视图和WebAPI,则派生自Controller。API接口返回......
  • 三节点master修改apiserver端口
    因业务需求,需要把apiserver的6443端口改成其它端口,k8s集群是二进制部署的,有三个master节点,调整方法如下1.修改apiserver启动service中的配置查看apiserver的service文件位置systemctlstatuskube-apiserver,找到/usr/lib/systemd/system/kube-apiserver.service修改--secure-p......
  • fastapi设置响应示例
    classTest(BaseModel):name:strdescription:intcreated_at:strupdated_at:strdata:dict@validator("data",pre=True)defparse_data(cls,value):returnjson.loads(value)ifvalueelse{}@validator(......
  • 无涯教程-JavaScript - ISREF函数
    描述如果指定的值是参考,则ISREF函数返回逻辑值TRUE。否则返回FALSE。语法ISREF(value)争论Argument描述Required/OptionalvalueAreferencetoacell.RequiredNotes您可以在执行任何操作之前使用此功能测试单元格的内容。适用性Excel2007,Excel2010,Excel......
  • 9-14|npm install --global windows-build-tools 安装太慢了,能够指定国内源
    如果你在中国,并且发现`npm`的包下载速度很慢,那么很可能是因为默认的npm源在国外。为了提高下载速度,你可以使用淘宝的npm镜像。以下是使用淘宝npm镜像的方法:1.**临时使用** ``` npminstall--globalwindows-build-tools--registry=https://registry.npm.taobao.org......
  • 无涯教程-JavaScript - ISNONTEXT函数
    描述如果指定的值引用的不是文本,则ISNONTEXT函数将返回逻辑值TRUE。否则返回FALSE。如果该值引用空白单元格,则该函数返回TRUE。语法ISNONTEXT(value)争论Argument描述Required/OptionalvalueValueorexpressionorareferencetoacell.RequiredNotes您可以......
  • 一文看懂Apipost IDEA插件2.0
    大家好,Apipost最新推出IDEA插件V2版本!V2版本主要是Apipost符合更多用户的需求而推出,支持在插件中获取token、支持代码完成后在插件中进行API调试,同时也保留了1.0版本部分功能如上传选择目录功能等。V1版本还会继续保留开源,方便各位进行自创魔改。V2版本目前已上架至IDEA插件商......