leaflet二维的使用

初始化地图

initMap = (ele = "map") => {

  reset();

  let center = [39.26483631134033, 110.12098789215088];

  let map = (window.map = L.map(ele, {

    crs: L.CRS.EPSG4326,

    zoomControl: false,

    minZoom: 14,

    zoomSnap: 0.1,

    // bearing: 30,

    // rotate: true,

    // touchRotate: true,

    // rotateControl: {

    //   closeOnZeroBearing: false

    // }

  }).setView(center, 16));

  addAllLayer();

  setCarSize();

  map.on('zoom', () => {

    setCarSize();

    setLineSize();

  });

  return map;

};

画多边形

addRange = (latlngs, color = "#e86d48", fillOpacity = 0.5) => {

  var polygon = L.polygon(latlngs, {

    color: color,

    weight: 2,

    fillColor: color,

    fillOpacity,

  });

  return polygon;

};

画线

addLine = (

  latlngs,

  color = "#ffffff",

  opacity = 1,

  weight = 2,

  dashArray = 2

) => {

  var polyline = L.polyline(latlngs, {

    color,

    weight,

    dashArray,

    opacity,

    lineCap: 'butt',

    lineJoin: 'butt'

  });

  return polyline;

  // zoom the map to the polyline

  //   map.fitBounds(polyline.getBounds())

};

添加icon

addMarker = (id, position, imageType) => {

  let marker = L.marker(position, {

    id,

    icon: L.icon({

      iconUrl: config[imageType],

      iconSize: [carSize, carSize * 2],

      // popupAnchor: [-3, -76],

    }),

  });

  marker.setRotationOrigin("center center");

  return marker;

};

添加标签

addLabel = (id, position, content) => {

  let label = L.marker(position, {

    id,

    icon: L.divIcon({

      className: "div_car_label",

      html: `<div class="car">

        <span>${content}</span>

      </div>`,

    }),

  });

  return label;

};

添加文字

addText = (id, position, content) => {

  let label = L.marker(position, {

    id,

    icon: L.divIcon({

      className: "div_text",

      html: `<div class="" style="width:max-content;font-weight: 500;

      color:#fff;padding: 3px 7px;font-size:12px;">

          ${content}

      </div>`,

    }),

  });

  return label;

};

添加场地文字

addParkText = (id, position, content) => {

  let label = L.marker(position, {

    id,

    icon: L.divIcon({

      className: "div_text",

      html: `<div class="" style="width:max-content;color:#ffffff;font-weight: 500;padding: 3px 7px;font-size:12px;">

          ${content}

      </div>`,

    }),

  });

  return label;

};

添加圆点

addCirclePoint = (position) => {

  let circle = L.circle(position, {

    color: "green",

    opacity: 1,

    fillOpacity: 0.8,

    radius: 1,

  });

  return circle;

};