ne-map

ne 前端地图组件

简介

包含高德、百度和腾讯地图

安装&配置

$ npm i @ne_fe/map -D

使用

若需要，可以通过两种方式注入地图所需KEY

1. new A(B,T)Map时传入key，每一次页面的运行，以第一次实例地图时传的key为准。（不推荐，且会覆盖第二种模式）

2. 全局挂载window变量。（推荐）

window.NEMAP_AKEY = 'A*********S'; // 高德地图
window.NEMAP_BKEY = 'A*********S'; // 百度地图
window.NEMAP_TKEY = 'A*********S'; // 腾讯地图

注意：下文中大写M开头的Map是引入的Map类，比如AMap，BMap，TMap。而小写m开头的map是实例出的地图对象

初始化地图

// 依次为高德地图、百度地图、腾讯地图
import { AMap, BMap, TMap } from '@ne_fe/map';

const map = new AMap('map-container', {
    zoom: 17, // 缩放级别
    center: [ 116.397428, 39.90923 ], // 中心点
    toolbar: true, // 是否显示比列尺控件
    key: 'A*********S', // （不推荐使用，详细请看上文地图key相关文档）若这是页面第一个实例的地图，那么该key成为加载地图资源所用key。
    success: () => { // 加载成功回调, 可以拿到原本的AMap
        console.log(window.AMap);
    },
    failed: err => { // 加载失败回调

    }
});

获取当前位置并定位

map.getCurrentPosition().then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});

设置缩放级别和中心点

map.setMap({
  zoom: 15, // 缩放级别
  center: [ 116.404, 39.915 ], // 中心点
});

添加覆盖物

const marker = map.addMarker(
    [ 116.39, 39.9 ], // 位置
    {
        image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 图片
        size: [ 19, 33 ], // 图片大小 px
        anchor: [ 10, 16 ], // 图片偏移量 px
        rotation: 0, // 图片旋转角度
    },
    () => {
        console.log('你点击了覆盖物');
    } // 点击事件回调函数
);

覆盖物移动

map.markerMove(
    marker, // 覆盖物对象
    [ 116.424374, 39.914668 ], // 终点
    500 // 速度
);

清除所有覆盖物

map.clearMap();

添加信息窗体

const infoWindow = map.openInfoWindow(
    [ 116.39, 39.9 ], // 位置
    '<button id="btn">hello world</button>', // 内容
    () => {
        const el = document.getElementById('btn');
        el.addEventListener('click', () => {
          console.log('你点击了信息窗体内的元素');
        });
    }, // 回调函数, 可操作dom
);

热力图

• 添加热力图

const points = [
  { lng: 116.418261, lat: 39.921984 },
  { lng: 116.423332, lat: 39.916532 },
  { lng: 116.419787, lat: 39.930658 },
  { lng: 116.418455, lat: 39.920921 },
  { lng: 116.418843, lat: 39.915516 },
  { lng: 116.42546, lat: 39.918503 },
  { lng: 116.423289, lat: 39.919989 },
  { lng: 116.418162, lat: 39.915051 },
  { lng: 116.422039, lat: 39.91782 },
  { lng: 116.41387, lat: 39.917253 },
  { lng: 116.41773, lat: 39.919426 },
  { lng: 116.421107, lat: 39.916445 },
];
map.addHeatMap(
    points,
    {
      radius: 25, // 半径
      opacity: [ 0, 0.8 ], // 透明度
      gradient: { // 渐变
        0.4: 'blue',
        0.5: 'rgb(117,211,248)',
        0.6: 'rgb(0, 255, 0)',
        0.7: '#ffea00',
        0.8: 'red',
      },
	}
);

• 显示热力图

map.showHeatMap();

• 隐藏热力图

map.hideHeatMap();

聚合图

• 添加聚合图

    const points = [
        { lng: 116.418261, lat: 39.921984, count: 50 },
        { lng: 116.423332, lat: 39.916532, count: 51 },
        { lng: 116.419787, lat: 39.930658, count: 15},
        { lng: 116.418455, lat: 39.920921, count: 40 },
        { lng: 116.418843, lat: 39.915516, count: 100 },
        { lng: 116.42546, lat: 39.918503, count: 6 },
        { lng: 116.423289, lat: 39.919989, count: 18},
        { lng: 116.418162, lat: 39.915051, count: 80 },
        { lng: 116.422039, lat: 39.91782, count: 11 },
        { lng: 116.41387, lat: 39.917253, count: 7 },
      ];
      map.addClusterMap(
        points,
        point => {
          console.log(point);
        },       //回调
        {
          icon:  'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',  // 未聚合时图标
          size: [ 30, 48 ],     // 图标大小
        }
      );

• 取消聚合图

map.addClusterMap();  //聚合图不传参数

轨迹回放

• 添加轨迹

const lineArr = [];
let lngX = 116.397428;
let latY = 39.90923;
lineArr.push([ lngX, latY ]);
for (let i = 1; i < 40; i++) {
  lngX = lngX + Math.random() * 0.0005;
  if (i % 2) {
    latY = latY + Math.random() * 0.0001;
  } else {
    latY = latY + Math.random() * 0.0006;
  }
  lineArr.push([ lngX, latY ]);
}
map.addMoveLine(
    lineArr,
    500, // 速度
    {
      strokeColor: '#00A', // 线颜色
      strokeWeight: 3, // 线宽
    },
    {
      image: 'https://webapi.amap.com/images/car.png', // 图片(高德地图车头须朝东，腾讯地图车头须朝北)
      size: [ 52, 26 ], // 图片大小
    }
);

• 开始动画

map.startMove();

• 暂停动画

map.pauseMove();

• 继续动画

map.resumeMove();

• 停止动画

map.stopMove();

坐标转换

const gps = [];
let lngX = 116.3;
let latY = 39.9;
gps.push([ lngX, latY ]);
for (let i = 1; i < 40; i++) {
    lngX = lngX + Math.random() * 0.0005;
    if (i % 2) {
        latY = latY + Math.random() * 0.0001;
    } else {
        latY = latY + Math.random() * 0.0006;
    }
    gps.push([ lngX, latY ]);
}
Map.convert(gps).then(location => {
  console.log(location);
});

坐标转换-2-GPS转当前地图坐标

const gps = [];
let lngX = 116.3;
let latY = 39.9;
gps.push({ longitude: lngX, latitude: latY });
for (let i = 1; i < 40; i++) {
    lngX = lngX + Math.random() * 0.0005;
    if (i % 2) {
        latY = latY + Math.random() * 0.0001;
    } else {
        latY = latY + Math.random() * 0.0006;
    }
    gps.push({ longitude: lngX, latitude: latY });
}
const res = Map.translateFromGPS(gps);
console.log(res);

坐标转换-2-当前地图坐标转GPS

const gps = [];
let lngX = 116.3;
let latY = 39.9;
gps.push({ longitude: lngX, latitude: latY });
for (let i = 1; i < 40; i++) {
    lngX = lngX + Math.random() * 0.0005;
    if (i % 2) {
        latY = latY + Math.random() * 0.0001;
    } else {
        latY = latY + Math.random() * 0.0006;
    }
    gps.push({ longitude: lngX, latitude: latY });
}
const res = Map.translateToGPS(gps);
console.log(res);

逆地址解析

const location = [ 116.396574, 39.992706 ];
Map.geocode(location).then(address => {
    console.log(address);
});