picture/vue/src/static/tool/BMapUtil.js

import http from "../plugins/axios";

const fakePath = require("@/assets/image/fake.png");
const fakeIcon = new BMap.Icon(fakePath, new BMap.Size(21, 31), {
  offset: new BMap.Size(10, 25)
});
const locatePath = require("@/assets/image/locate.png");
const locateIcon = new BMap.Icon(locatePath, new BMap.Size(21, 31), {
  offset: new BMap.Size(10, 25)
});
const dronePath = require("@/assets/drone/drone.gif");
const droneIcon = new BMap.Icon(dronePath, new BMap.Size(80, 80), {
  offset: new BMap.Size(10, 25)
});
const circleOptions = {
  strokeColor: 'yellow',
  strokeWeight: 1,
  strokeOpacity: 0.5,
  fillColor: 'yellow',
  fillOpacity: 0.1
};
//圆的半径,单位为米
let radius = 100;
http.get("public/get/circle/conf").then(rsp => {
  if (rsp) {
    radius = rsp[0];
    circleOptions.fillOpacity = rsp[1];
  }
})

function paintLocation(map, data) {
  for (let i = 0; i < data.length; i++) {
    const loc = data[i];
    if (loc.lng == 0 || loc.lat == 0) {
      continue;
    }
    const point = new BMap.Point(loc.lng, loc.lat);
    const marker = createMarker(loc);
    const text = "手机号码:--<br\>采集时间:" + loc.time + "<br\>经纬度:" + loc.lng + ", " + loc.lat + "<br\>场强:" + loc.rssi;
    marker.addEventListener("click", function() {
      map.closeInfoWindow();
      openInfo(map, loc, text)
    });
    map.addOverlay(marker);
  }

}

function paintTrack(map, data) {
  for (let i = 0; i < data.length; i++) {
    const track = data[i];
    const point = new BMap.Point(track.lng, track.lat);
    const marker = createMarker(track, i);
    const text = "手机号码:--<br\>采集时间:" + track.time + "<br\>经度:" + track.lng + "<br\>纬度:" + track.lat;
    marker.addEventListener("click", function() {
      map.closeInfoWindow();
      openInfo(map, track, text)
    });
    if (marker.label) {
      marker.label.addEventListener("click", function() {
        map.closeInfoWindow();
        openInfo(map, track, text)
      });
      map.addOverlay(marker.label);
    }
    map.addOverlay(marker);
    if (i == data.length - 1) {
      map.centerAndZoom(point, 18);
      openInfo(map, track, text)
    }
  }
}

function createMarker(row, i) {
  const point = new BMap.Point(row.lng, row.lat);
  let marker;
  if (row.rssi) {
    marker = new BMap.Marker(point, {
      icon: locateIcon
    });
    setLabel(marker, row.rssi - 1);
  } else if (row.trust == 0) {
    // marker = new BMap.Circle(point, radius, circleOptions);
    // marker.label = new BMap.Marker(marker.getCenter(), {
    //   icon: fakeIcon
    // });
    marker = new BMap.Marker(point, {
      icon: fakeIcon
    });
    marker.label = new BMap.Circle(marker.getPosition(), radius, circleOptions);
    setLabel(marker, i);
  } else {
    marker = new BMap.Marker(point);
    setLabel(marker, i);
  }
  return marker;
}

function addLable(marker, i) {
  setLabel(marker.label, i);
}

function setLabel(marker, i) {
  const label = new BMap.Label(i + 1, {
    offset: new BMap.Size(2, 5)
  });
  label.setStyle({
    backgroundColor: "none",
    color: "black",
    border: '0px',
    borderRadius: "50%",
    height: "13px",
    width: "13px"
  });
  marker.setLabel(label);
}

function openInfo(map, row, text) {
  const center = new BMap.Point(row.lng, row.lat)
  map.setCenter(center);
  const opts = {
    width: 250,
    height: 100,
    title: 'IMSI:' + row.imsi
  }
  if (!text) {
    text = "手机号码:--<br\>初次上报时间:" + row.firstTime + "<br\>最近上报时间:" + row.time + "<br\>经纬度:" + row.lng + "," + row.lat;
  }
  const infoWindow = new BMap.InfoWindow(text, opts);
  map.openInfoWindow(infoWindow, center);
}

export {
  createMarker,
  paintTrack,
  openInfo,
  droneIcon,
  paintLocation
}