ne-map

ne 前端地图组件

安装

$ npm i ne-map -s

使用

初始化地图

• 引入webpack插件实现按需打包

通过环境变量注入地图所需KEY

高德地图  NEMAP_AKEY=A*********S
百度地图  NEMAP_BKEY=A*********S
腾讯地图  NEMAP_TKEY=A*********S

// webpack.config.js
const NeMapPlugin = require('ne-map/lib/NeMapPlugin');
...
plugins: [
  ...
  new NeMapPlugin(),
  ...
]
...

• 全部引入

import * as NeMap from 'ne-map';

// 高德地图
const Map = NeMap.AMap;
// 百度地图
// const Map = NeMap.BMap;
// 腾讯地图
// const Map = NeMap.TMap;

const map = new Map('map-container', {
    zoom: 17, // 缩放级别
    center: [ 116.397428, 39.90923 ], // 中心点
    toolbar: true, // 是否显示比列尺控件
});

或

import { AMap, BMap, TMap } from 'ne-map';

// 高德地图
const Map = AMap;
// 百度地图
// const Map = BMap;
// 腾讯地图
// const Map = TMap;

const map = new Map('map-container', {
    zoom: 17, // 缩放级别
    center: [ 116.397428, 39.90923 ], // 中心点
    toolbar: true, // 是否显示比列尺控件
});

• 单独引入

// 高德地图
import AMap from 'ne-map/AMap';
// 百度地图
import BMap from 'ne-map/BMap';
// 腾讯地图
import TMap from 'ne-map/TMap';

const map = new AMap('map-container', {
    zoom: 17, // 缩放级别
    center: [ 116.397428, 39.90923 ], // 中心点
    toolbar: true, // 是否显示比列尺控件
});

设置缩放级别和中心点

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
    },
    () => {
        console.log('你点击了覆盖物');
    } // 点击事件回调函数
);

覆盖物移动

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

清除所有覆盖物

map.clearMap();

添加信息窗体

map.openInfoWindow(
    [ 116.39, 39.9 ], // 位置
    'hello world' // 内容
);

热力图

• 添加热力图

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 },
  { lng: 116.41773, lat: 39.919426, count: 42 },
  { lng: 116.421107, lat: 39.916445, count: 4 },
];
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 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);
});