高德 Loca API 2.0 弧线飞线 示例
时间: 2024-06-09 11:07:42 浏览: 238
用高德地图API开发一个简单基础的WebGIS系统网站源码【适合小白 上传即用】
5星 · 资源好评率100%
高德 Loca API 2.0 中的弧线飞线可以用于展示两点之间的曲线路径,比直线路径更加生动形象。以下是一个弧线飞线的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Loca API 2.0 弧线飞线示例</title>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<style>
html,body,#container{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var map = new AMap.Map("container", {
zoom: 10,
center: [120.153576, 30.287459]
});
//起点和终点坐标
var start = [120.153576, 30.287459];
var end = [120.182012, 30.266793];
//获取两点之间的弧线路径
var path = getCurvePath(start, end, 100);
//创建弧线飞线图层
var lineLayer = new Loca.LineLayer({
map: map,
zIndex: 10,
fitView: true
});
//添加弧线飞线数据
lineLayer.setData([{
from: start,
to: end,
path: path
}], {
lnglat: 'path'
});
//设置弧线飞线样式
lineLayer.setOptions({
style: {
borderWidth: 2,
opacity: 0.8,
color: '#f00'
}
});
//渲染弧线飞线图层
lineLayer.render();
</script>
</body>
</html>
```
在这个示例中,我们首先创建了一个地图,并指定了起点和终点坐标。然后使用 `getCurvePath` 函数获取两点之间的弧线路径。接着创建一个弧线飞线图层,并将弧线飞线数据添加到图层中。最后设置弧线飞线的样式并渲染图层即可。
需要注意的是,在使用 Loca API 2.0 的弧线飞线时,需要引入 `demoutils.js` 文件来获取 `getCurvePath` 函数。该函数的作用是根据起点和终点坐标计算出一条曲线路径。
阅读全文