bigMap地图API文档

地图初始化

统一方法,百度地图、高德地图、腾讯地图、mapbox四个地图的基础功能统一封装

经纬度坐标输入采用WGS84（ EPSG:4326 ）坐标系，输出为WGS84,保留6位小数 返回对象统一增加属性： _lnglat84:{lng:120,lat:30}

1.安装

npm install bigmap-js

2.引入对应的地图文件包

百度地图引入

• https://api.map.baidu.com/api?v=1.0&ak=你的ak
• https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak
• http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js
• https://unpkg.com/@bmapgl-plugin/cluster

腾讯地图引入

• https://map.qq.com/api/gljs?v=1.exp&key=你的key&libraries=tools,geometry,service&callback=initGLMap

高德地图引入

前置需要引入安全密钥

• https://webapi.amap.com/maps?v=2.0&key=你的key
• https://webapi.amap.com/ui/1.1/main.js?v=1.1.1

mapbox地图引入（配置中需传入accessToken，否则无法使用）

• https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js
• https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css 如需使用测量及鼠标画线计算面积、长度，则引入下面依赖，建议本地部署
• https://unpkg.com/@mapbox/[email protected]/dist/mapbox-gl-draw.js
• https://unpkg.com/@turf/[email protected]/turf.min.js 如需使用地址搜索，则引入
• https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js
• https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css

使用示例

import bigMap from 'bigmap-js'

初始化：

• type: 地图类型，'bMap','aMap','TMap','mapbox',
• container dom容器
• center: [lng,lat]
• zoom 显示层级
• style:'', 地图样式
• pitch:'', 倾斜角
• bearing:'', 旋转角

// example
    let BigMap = new bigMap({
        type:'bmap',
        container:'container',
        center:[129,30],
        zoom:10,
        accessToken:'',
        style:'',
        pitch:'',
        bearing:'',
    })

点：方法名 bigPoint

    //点集合
    point:[
        {
            position:[{lng:126,lat:30},...],
            style:
                {
                    color:'#ff000',
                    width:'',
                    height:'',
                    url:''
                },
            animate:true,
        },
    ]
    //样式属性信息
    options: {
        color:'#ff000',
        width:'',
        height:'',
        url:''
    }
    // example
    BigMap.bigPoint(point,options)

线：方法名 bigLine

    point:[{
        position:[{lng:126,lat:30},...],
        style:
            {
                color:'#ff000',
                width:'',
                url:''
            },
        animate:true,
    }],
    
    //样式属性信息
    options: {
        color:'#ff000',
        width:'',
        height:'',
        url:''
    }
    // example
    BigMap.bigLine(point,options)

面：方法名 bigPolygon

    point:[
        {
            position:[{lng:126,lat:30},...],
            style:
                {
                    color:'#ff000',
                    width:'',
                    url:''
                },
            animate:true,
        },
    ]
    //样式属性信息
    options: {
        color:'#ff000',
        width:'',
        height:'',
        url:'',
        fillOpacity:'',
        strokeColor:'',
        fillColor:''
    }
    // example
    BigMap.bigPolygon(point,options)

marker: 方法名 bigMarker 自定义-html

• position：[] 位置信息
• style:{}
• options: {} (可以传入自定义html)

    BigMap.bigMarker(
        [{ lng: 120.155725, lat: 31.655362 }],
        { color: 'red', scale: 1 },
     '<div style="display: inline-block;width:90px;font-size:16px;padding: 12px;background: linear-gradient(135deg, #6e8efb, #a777e3); color: white;border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);font-family: "Segoe UI", sans-serif;font-size: 16px;border: none;cursor: default; position: relative;overflow: hidden;"><i class="fas fa-check-circle" style="margin-right: 8px;"></i><span>操作成功！</span></div>');

距离测量(计算点到点的距离) 方法名 bigDistance

• points: [{},..] 二维点数组

    // example
    const distance = BigMap.bigDistance(
        [
            { lng: 120.005725, lat: 31.615362 }, 
            { lng: 121.015725, lat: 31.622362 }
        ]
    );
    console.log(`两点之间的距离是：${distance.toFixed(2)} m`);

点聚合 方法名 bigCluster

• points：[{},{}...] 数组
• style:{clusterStyle:{},circleStyle:{}}

    // example
    const cluster = BigMap.bigCluster(
        [
            { lng: 120.005725, lat: 31.615362 },
            { lng: 119.905725, lat: 31.632362 },
            { lng: 119.808725, lat: 31.653362 },
            { lng: 120.001725, lat: 31.676362 },
            { lng: 120.005725, lat: 31.615362 }
        ], 
        {
            clusterStyle:{
                background:'#11b4da',
                color:'#fff',
                "font-size":16,
                opacity:0.6
            },
            circleStyle:{ 
                url:'', //url为第一优先级，如果有url,则优先使用url,没有则使用图片
                color:'#11b4da'
            }
        }
    )

信息提示窗口 方法名 bigInfo

• options:{ position:[], content:'', width:'', height:'' }

    // example
    const inforWidow = BigMap.bigInfo(
        {
            position: [{ lng: 120.005725, lat: 31.615362 }],
            content: '<div style="width:120px;height:50px;border:solid 1px #000000; "> 我是信息框333</div>',
        }
    )

地图缩放方法
放大bigZoomIn 无参数
缩小 bigZoomOut 无参数 设置制定大小 bigZoomSet(zoom) zoom制定等级，类型：Number

地图中心设置方法 bigCenterSet({lng:129,lat:30})

轨迹动画 bigTrack()

• points: [{lng:129,lat:30},..]

  1、animate 动画参数 speed速度，duration动画总时间
  2、style 为点与轨迹的样式，url为运动主体的icon,如果有则显示，没有则展示地图默认图标， startUrl、endUrl为非必填url，不传入则起始点不显示点，line-color为轨迹颜色，line-width为轨迹宽度,width,height为图标大小，非必填，默认30*30

• options: { animate: {speed: 10,duration: 5000}, style:{ url:'',line-color:'',line-width:'',startUrl:'',endUrl:'',width:'',height:''} }

地理输入提示与获取 bigPlaces(name，callback=null) 返回搜索结果 {value:'',lng:,lat:}

• name: String

统一面积测量方法 bigArea

• points: [{lng:129,lat:30},..]

鼠标画线 bigDrawLine,如果需要获取参数及结果，mapbox,aMap需要传参函数,tMap可以传回调函数，也可以用async await获取结果 鼠标画面 bigDrawArea,如果需要获取参数及结果，mapbox,aMap需要传参函数,tMap可以传回调函数，也可以用async await获取结果

控制工具栏，如比例尺、方向等。方法名 bigControl

• position:[] 位置信息
• options:{}

other...