引入船讯网api怎么用后端返回的轨迹数据在前端页面用new ShipxyAPI绘制航线
时间: 2024-03-03 20:46:48 浏览: 32
首先,你需要在前端页面引入船讯网的API库文件,可以通过以下代码在head标签中引入:
```html
<head>
<script src="https://api.shipxy.com/static/js/api_v2.0.js"></script>
</head>
```
然后,在你需要绘制航线的地方,通过以下代码创建ShipxyAPI对象:
```javascript
var api = new ShipxyAPI({
token: 'your_token_here', // 替换成你自己的token
mapid: 'map_container', // 替换成你的地图容器元素id
maptype: 2 // 地图类型,2表示船讯网的电子海图
});
```
其中,`token`是你在船讯网申请的API访问令牌,`map_container`是你的地图容器元素id,`maptype`是地图类型,2表示船讯网的电子海图。
接着,在后端返回的轨迹数据中,提取出需要绘制的航线点的经纬度信息,并将其转换为ShipxyAPI需要的格式,如下所示:
```javascript
var points = [
{lon: 118.1, lat: 24.5},
{lon: 118.2, lat: 24.6},
{lon: 118.3, lat: 24.7},
// ...更多点的经纬度信息
];
var track = points.map(function(point) {
return {
lon: point.lon * 1000000,
lat: point.lat * 1000000,
speed: 0,
course: 0,
time: 0
};
});
```
最后,通过以下代码调用ShipxyAPI的`drawTrack`方法绘制航线:
```javascript
api.drawTrack(track);
```
这样,就可以在前端页面上绘制出船舶的航线了。需要注意的是,为了保证航线的正确性和美观性,你可能需要对航线的点进行筛选和优化。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)