SDK | HiFleet

Methods

changeMap(options)

切换地图语言示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`key`	String	地图默认值为global 卫星图为satellite 海图为nauticalmap
`lang`	String	地图语言默认值为cn 英文为en

Example

app.changeMap({lang:'cn',key:'satellite'})

clearSelectedItem()

取消选中状态示例

Example

app.clearSelectedItem()

closeCurrent()

关闭洋流示例

Example

app.closeCurrent();

closeCurrentEarthquake()

关闭地震绘制示例

Example

app.closeCurrentEarthquake()

closeIsoline()

关闭等压线示例

Example

app.closeIsoline();

closeMap()

关闭底图示例

Example

app.closeMap()

closePorts(options)

关闭港口示例

Parameters:

Name	Type	Description
`options`	Object

Example

app.closePorts();

closeWaveLayer()

关闭气象海浪示例

Example

app.closeWaveLayer();

closeWeatherMode()

关闭气象模式示例

Example

app.closeWeatherMode();

closeWind()

关闭风场示例

Example

app.closeWind();

create(options)

创建sdk实例

Parameters:

Name Type Description

options

Object

初始化参数

Properties

Name	Type	Description
`el`	string	Dom ID 名称

Example

let app = hifleet.create({ el: "map" })
app.destory()//销毁当前地图对象

drawAreaMarker(options)

绘制面标注示例

Parameters:

Name Type Description

options

Object

Properties

Name Type Description

list

Array.<Object>

列表

Properties

Name Type Description

latlngs-

Array.<Array>

经纬度数组格式[ [lat,lon],...]

text

String

标签文字必填

popup

String

popup显示文案默认点击删除

showPopup

boolean

显示popup 默认true

style

Object

多边形绘制参数

Properties

Name	Type	Description
`strokeStyle-`	String	边框颜色默认#2B86C0
`fillStyle-`	String	填充颜色默认white
`globalAlpha-`	String	填充透明度默认0.3

Example

let list = [{"text":"quyu","zoneId":40583,
 "popup":"popup content",
 "showPopup":true,
 "style": {
        strokeStyle: 'red',
        fillStyle: 'yellow',
        globalAlpha: '0.8'
      },
"latlngs":[[40.317,120.138],[41.083,121.225],[40.709,122.783],[39.896,124.343],[30.042,124.028],[26.721,122.002],[24.987,120.584],[22.362,118.375],[20.19,112.772],[17.235,112.08],[17.588,107.53],[20.745,107.597],[21.826,107.667],[22.119,110.971],[23.093,115.33],[25.137,118.473],[27.324,119.721],[29.707,121.292],[29.993,120.457],[30.486,119.809],[32.707,120.604],[34.238,120.11],[34.953,118.458],[37.221,121.934],[37.613,120.803],[37.046,119.758],[37,119.289],[37.843,117.582],[39.136,116.738],[39.814,118.461],[40.317,120.138]]},{"text":"1公里报警","zoneId":42247,"latlngs":[[30.969,122.151],[30.97,122.151],[30.972,122.152],[30.974,122.153],[30.975,122.154],[30.976,122.155],[30.977,122.156],[30.977,122.158],[30.978,122.159],[30.978,122.16],[30.978,122.161],[30.978,122.162],[30.978,122.163],[30.978,122.165],[30.977,122.166],[30.977,122.168],[30.976,122.169],[30.975,122.169],[30.974,122.17],[30.973,122.171],[30.972,122.171],[30.97,122.172],[30.969,122.172],[30.968,122.172],[30.967,122.172],[30.965,122.171],[30.964,122.171],[30.963,122.169],[30.962,122.168],[30.961,122.166],[30.96,122.164],[30.96,122.162],[30.96,122.16],[30.961,122.158],[30.961,122.156],[30.962,122.155],[30.963,122.154],[30.965,122.153],[30.966,122.152],[30.968,122.152],[30.968,122.151],[30.969,122.151]]},{"text":"3","zoneId":46250,"latlngs":[[32.102,124.095],[30.039,124.028],[26.739,122.023],[27.33,119.723],[29.709,121.283],[29.986,120.47],[30.474,119.8],[32.179,120.41],[32.102,124.095]]},{"text":"区域标注2","zoneId":46406,"latlngs":[[33.652,127.848],[33.405,128.529],[33.331,128.024],[33.377,127.694],[33.652,127.848]]}]
 app.drawAreaMarker({ list })

drawCurrentEarthquake(options)

绘制最近地震示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`success`	String	success 成功回调方法
`fail`	String	fail 失败回调方法

Example

app.drawCurrentEarthquake(
 {
   success:(resp)=>{console.log(resp)} ,
   fail:(resp)=>{console.log(resp)} ,
    })

drawIconMarker(options)

绘制点标注带自定义图标示例

Parameters:

Name Type Description

options

Object

Properties

Name Type Description

list

Array.<Object>

列表

Properties

Name	Type	Description
`labelText`	string	点标注文字
`lat`	number	纬度必填
`lon`	number	经度必填
`iconUrl`	string	标签图标点的url
`iconWidth`	string	标签图标宽度值
`iconHeight`	string	标签图标高度值
`html`	string	鼠标悬停时候显示的内容

Example

app.drawIconMarker({ 
 list:[
{
        labelText: "labelText",
        html: "<div><div style='text-align:right;display:inline-b…px'>2005/08-05 6.5级地震,深度180.0Km</div></div></div>",
        iconUrl: "https://www.hifleet.com/img/images/warningforPC.png",
        lat: -16.2,
        lon: 168.1,
      },
       {
        labelText: "labelText",
        html: "<div><div style='text-align:right;display:inline-b…px'>2005/08-05 6.5级地震,深度180.0Km</div></div></div>",
        iconUrl: "https://www.hifleet.com/img/images/warningforPC.png",
        iconHeight:30,
        iconWidth:30,
        lat: -15,
        lon: 167
      }
    ]// end list
})

drawLineMarker(options)

绘制线标注示例

Parameters:

Name Type Description

options

Object

Properties

Name Type Description

list

Array.<Object>

列表

Properties

Name Type Description

latlngs

Array.<Array>

经纬度数组数组格式[ [lat,lon],...]

text

number

标签文字必填

style

Object

线标注样式选填

Properties

Name	Type	Description
`lineWidth`	Number	线宽度单位像素
`lineColor`	String	线颜色默认#d63031

Example

let list = [{ "text": "lineWidth:10 lineColor:yellow",style:{lineWidth:10,lineColor:"yellow"}, "latlngs": [[16.79906, 124.2469], [15.78674, 129.52034], [14.42914, 133.2469]] }, { "text": "12312", "latlngs": [[18.47418, 153.6551], [16.3273, 164.97542], [17.26966, 171.09261]] }, { "text": "testt5", "latlngs": [[35.99403, 145.02885], [36.14117, 145.78941], [36.36585, 144.46385], [36.14922, 144.0584]] }, { "text": "tes6 ", "latlngs": [[38.01173, 145.37452], [37.34622, 142.7419], [36.98202, 142.92216], [36.8919, 143.8409]] }, { "text": "a", "latlngs": [[37.92878, 146.60913], [37.45856, 144.96127], [36.88135, 144.97569], [36.71722, 145.93459]] }, { "text": "a", "latlngs": [[28.14950321154457, -89.82421875], [18.812717856407776, -84.55078125], [12.382928338487396, -78.22265625], [6.664607562172573, -81.03515625], [3.5134210456400448, -92.28515625], [2.8113711933311403, -103.0078125]] }]
app.drawLineMarker({ list })

drawPointMarker(options)

绘制点标注示例

Parameters:

Name Type Description

options

Object

Properties

Name Type Description

list

Array.<Object>

列表

Properties

Name	Type	Description
`lat`	number	纬度必填
`lon`	number	经度必填
`text`	number	标签文字必填
`type`	number	类型取值目前4个图标类型 PointMarker-red,PointMarker-H, PointMarker-P,PointMarker-Port

Example

let list = [{
            "lat": 31.943389237366116,
            "lon": 120.1951403049553,
            "text": "停：15h39m",
            "type": "PointMarker-P"
        }, {
            "lat": 29.9854779947243,
            "lon": 122.00241473388456,
            "text": "停：24h41m",
            "type": "PointMarker-P"
        }, {
            "lat": 30.038583867552834,
            "lon": 121.98628659607266,
            "text": "停：13h28m",
            "type": "PointMarker-P"
        }, {
            "lat": 30.981524854211635,
            "lon": 122.34380988284998,
            "text": "停：2h46m",
            "type": "PointMarker-P"
        }, {
            "lat": 32.22575180396365,
            "lon": 119.89905280308784,
            "text": "停：18h30m",
            "type": "PointMarker-P"
        }]
       app.drawPointMarker({ list })

drawPorts()

绘制港口示例

Example

app.drawPorts();

drawShip(options)

绘制船舶示例

Parameters:

Name Type Description

options

Object

Properties

Name Type Description

list

Array.<Object>

列表

Properties

Name	Type	Description
`mmsi`	string	mmsi 必填
`lat`	number	纬度必填
`lon`	number	经度必填
`course`	string	航迹向必填
`heading`	string	船首向必填
`label`	string	船舶标签内容(注label字段设为空字符串,不绘制label)
`html`	string	鼠标悬停时候显示的内容(注html字段设为空字符串,没有鼠标悬浮内容)
`length`	string	船长
`width`	string	船宽
`speed`	string	航速
`color`	string	绘制的颜色默认#FFFF66
`elToTooltip`	function	悬浮弹出回调函数具体参数见一下示例说明
`strokeStyle`	string	船舶边框绘制颜色设置默认为#000000
`iconUrl`	string	绘制船舶icon
`iconHeight`	string	绘制船舶Height
`iconWidth`	string	绘制船舶Width
`nameBackgroundColor`	string	显示名字背景色
`nameColor`	string	显示名字颜色
`nameBackgroundGlobalAlpha`	string	显示背景透明度

Example

app.drawShip({ 
 list:[{
      mmsi: '235335000',
      name: 'EVER EAGLE',
      lat: 31.377683333333334,
      lon: 121.57395333333334,
      length: '300',
      width: '42',
      course: '180.3',
      heading: '116',
      label: 'text',
      speed: '0',
      color: "#FF13F3",
      html: "html popup"
      elToTooltip:function(opt,next){
        const {
      el,//船舶元素
      map,//船舶所在地图
      latlng,//标签定位
    } = opt || {}
        console.log(opt)
        //定义leaflet marker
        let marker = L.marker([latlng.lat, latlng.lng])
    //按需添加Tooltip
    .bindTooltip('helloworld').openTooltip()
    //添加到地图上
    .addTo(map);
    //回传已自定义marker到sdk地图层
        next(marker)
      }
    },
    {
      mmsi: '305131000',
      name: 'MARCARRIER',
      lat: 31.328033333333334,
      lon: 121.6723,
      length: '142',
      width: '23',
      course: '309',
      heading: '307',
      label: 'text',
      speed: '0',
      html: "html popup",
       elToTooltip:function(opt){
        console.log(opt)
      }
    }]// end list
})

drawShipByMmsi(options)

绘制给定mmsi的当前船位示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`mmsis`	String	mmsis，字符串，以英文逗号分隔的的船舶mmsi号码，比如： 123,456,789
`labelType`	String	labelType，字符串，不设置默认为显示船名设置成mmsi显示mmsi
`i18n`	String	i18n 默认中文设置cn en

Example

app.drawShipByMmsi(
 {
      mmsis:"412048765,671008100,356581000"
    })

drawTrajectory(options)

绘制轨迹示例

Parameters:

Name Type Description

options

Object

Properties

Name Type Description

showLabel

Boolean

显示轨迹标签

showArrow

Boolean

显示轨迹朝向箭头

showPoint

Boolean

显示轨迹点

showLine

Boolean

显示轨迹线

style

Object

轨迹线样式配置

Properties

Name	Type	Description
`trajectoryLineColor`	String	轨迹线颜色
`anchorLineColor`	String	箭头颜色

list

Array.<Object>

列表

Properties

Name Type Description

latlngs

Object

列表

Properties

Name	Type	Description
`lat`	number	纬度必填
`lon`	number	经度必填
`html`	string	鼠标悬停时候显示的内容
`label`	string	轨迹标签内容, 不设置该属性或者空字符串将不显示标签
`speed`	string	轨迹点的速度当速度小于5节是轨迹线为绿色
`lineColor`	string	轨迹段颜色
`anchorLineColor`	string	箭头颜色

Example

app.drawTrajectory(
 {
    showLabel: true,
    showArrow: true,
    showPoint: true,
    showLine: true,
    "list":[{
        "latlngs": [{
            "lon": "32.550105",
            "lat": "29.75784",
            "speed": "10.5",
            "lineColor":"#9b59b6",
            "anchorLineColor":"#e74c3c",
            "html": "test",
            "label": "label"
        },
        {
            "lon": "32.56949",
            "lat": "29.84906",
            "speed": "0.1",
            "html": "test",
            "label": "label"
        },
        {
            "lon": "32.56884",
            "lat": "29.84868",
            "speed": "0.0",
            "html": "test",
            "label": "label"
        },
        {
            "lon": "32.56877",
            "lat": "29.848615",
            "speed": "0.0",
            "html": "test",
            "label": "label"
        },
        {
            "lon": "32.561445",
            "lat": "29.86187",
            "speed": "7.8",
            "html": "test",
            "label": "label"
        }]// end latlngs
      }]//end list
    })

drawTrajectoryBy(options)

绘制给定mmsi及时间段内的轨迹示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`mmsi`	String	mmsi，字符串
`starttime`	String	starttime，北京时间，格式举例：2019-01-02 00:00:00
`endtime`	String	endtime，北京时间，格式举例：2019-01-02 00:00:00

Example

app.drawTrajectoryBy(
 {
      mmsi:"356581000",
      starttime:"2020-07-01 00:00:00",
      endtime:"2020-07-05 00:00:00"
    })

drawTyphoonBy(options)

绘制示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`ids`	Array	台风序号列表字符串列表（注:ids空数组时候清空台风绘制)

Example

app.drawTyphoonBy(
 {
      ids:['202001']
    })

getAreaMarkerTool() → {Object}

开启区域标注示例

Parameters:

Name	Type	Description
`options.completeCallback`	function	用户点击地图添加标注回调 ({latlngs=[]})=>{} 数组内对象格式为 {lat,lon,lng}

Returns:

Object -

tool 返回tool对象结束工具调用complete();

Example

const completeCallback = result => {
    const { latlngs } = result || {} //获取绘制多边形经纬度列表
    const arr = latlngs.map(el => [el.lat, el.lng])// {lat,lng,lon}
    const newEl = {
      latlngs: arr,
      text: 'New Line Marker' + parseInt(Math.random() * 100)
    }
  }
  
  let toolApp =   app.getAreaMarkerTool({ completeCallback });
 //编辑多边形
 // 参数格式 
 // { latlngs:[ [{lat},{lng}]]}
    toolApp.setEdit(newEl)

getCurrentTyphoonList(options)

success 回调方法包含当前活跃台风数组属性名list

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`success`	String	success 成功回调方法
`fail`	String	fail 失败回调方法

Example

app.getCurrentTyphoonList(
 {
   success:(resp)=>{console.log(resp)} ,
   fail:(resp)=>{console.log(resp)} ,
    })

getLineMarkerTool(options) → {Object}

开启线标注标注工具加入大圆特性示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`completeCallback`	function	用户点击地图添加标注回调 ({latlngs=[]})=>{} 数组内对象格式为 {lat,lon,lng}

Returns:

Object -

tool 返回tool对象结束工具调用complete();

Example

const completeCallback = result => {
    const { latlngs } = result || {}//获取线坐标序列
    const arr = latlngs.map(el => [el.lat, el.lng])
    const newEl = {
      latlngs: arr,
      text: 'New Line Marker' + parseInt(Math.random() * 100)
    }
  }
    app.getLineMarkerTool({ completeCallback });

getMap()

获取leaflet 地图对象

Example

app.getMap();

getMeasureAreaTool() → {Object}

测量面积示例

Returns:

Object -

tool 返回tool对象结束测距调用complete()方法

Example

let tool = app.getMeasureAreaTool();
// tool.complete();//退出

getMeasureDistanceTool(options) → {Object}

距离测量工具示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`mode`	Boolean	模式值为web 和 phone 适配网页操作模式和移动端操作模式
`left`	Boolean	phone模式距离距离左侧默认是5px;
`top`	Boolean	phone模式距离距离顶端高度默认是50px;

Returns:

Object -

tool 返回tool对象结束测距调用complete()方法

Example

let tool = app.getMeasureDistanceTool();
// tool.complete();//退出

getPointMarkerTool(options) → {Object}

开启点标注示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`completeCallback`	function	用户点击地图添加标注回调 ({latlng={lat,lng,lon}})=>{}

Returns:

Object -

tool 返回tool对象结束工具调用complete();

Example

const completeCallback = result => {
    const { latlng } = result || {} //获取点击坐标
    const newEl = {
      ...latlng,
      text: 'New Point Marker' + parseInt(Math.random() * 100)
    }
  }
    app.getPointMarkerTool({ completeCallback });

getWeatherTimeList(options)

获得气象时间戳列表示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`success`	String	获取成功后回调函数
`fail`	String	获取失败回调函数

Example

const success=(resp)=>{
//resp 返回结构为
//{
      //  "forcasttime": [
       //     {
       //       "starttime": "20200812"//预测起点时间
       //       "hours": "000",        // 从起点时间往后预测 几小时
       //       },
        //    {"hours": "000","starttime": "20200812"},
       // ]
     // }

}
const fail =(resp)=>{}
app.getWeatherTimeList({success,fail})

openCurrent(options)

开启洋流示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`starttime`	String	预报开始时间参数从getWeatherTimeList接口获取
`hours`	String	预报的第几个小时参数从getWeatherTimeList接口获取时

Example

app.openCurrent(
 {
     starttime:"20200706" ,//
  hours:"010",//
    })

openIsoline(options)

开启等压线示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`starttime`	String	预报开始时间参数从getWeatherTimeList接口获取
`hours`	String	预报的第几个小时参数从getWeatherTimeList接口获取

Example

app.openIsoline(
 {
     starttime:"20200706" ,//
  hours:"010",//
    })

openMap()

开启底图示例

Example

app.openMap()

openWaveLayer(options)

开启气象海浪示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`starttime`	String	预报开始时间参数从getWeatherTimeList接口获取
`hours`	String	预报的第几个小时参数从getWeatherTimeList接口获取

Example

app.openWaveLayer(
 {
     starttime:"20200706" ,//
  hours:"010",//
    })

openWeatherMode()

开启气象模式示例

Example

app.openWeatherMode();

openWind(options)

开启风场示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`starttime`	String	预报开始时间参数从getWeatherTimeList接口获取
`hours`	String	预报的第几个小时参数从getWeatherTimeList接口获取

Example

app.openWind(
 {
     starttime:"20200706" ,//
  hours:"010",//
    })

setGlobalMapMode()

设置默认地图模式示例

Example

app.setGlobalMapMode();

setLanguageToCN()

设置SDK内嵌语言为英文示例

Example

app.setLanguageToEN();

setLanguageToEN()

设置SDK内嵌语言为英文示例

Example

app.setLanguageToEN();

setSeaMapMode()

设置海图模式示例

Example

app.setSeaMapMode();

setSelectedItem(options)

设定选中状态示例

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`latlng`	String	latlng 格式 {lat:34,lng:120}
`type`	String	type 类型 'rectangle'为类方形默认值 'point'类方形中间原点 'cross'为十字

Example

app.setSelectedItem({
latlng:{lat:34,lng:120},
type:"point"
})

setSelectedItems(options)

设定多个同时选中状态示例

Parameters:

Name Type Description

options

Object

Properties

Name Type Description

list

Array.<Object>

列表

Properties

Name	Type	Description
`latlng`	Array.<Array>	latlng 格式 {lat:34,lng:120}
`type`	String	type 类型 'rectangle'为类方形默认值 'point'类方形中间原点 'cross'为十字

Example

app.setSelectedItems([{
latlng:{lat:34,lng:120},
type:"point"
},
latlng:{lat:35,lng:120},
type:"rectangle"
}])

Type Definitions

EVENT

EVENT 地图元素点击

Properties:

Name	Type	Description
`HF_CLICK_ON_MAP`	final	地图点击元素

Example

let map = app.getMap();
 map.on(EVENT.HF_CLICK_ON_MAP, (result) => {
    const {
      item //获取用户点击的对象
    } = result ||{}

  })