@ido-team/map

地图 api 说明

地图配置项示例

IdoMap.mapOptions = {
  lat: 31.936722,
  lng: 120.050611,
  zoom: 11,
  layer: [
    {
      url: "http://t1.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=key",
      Subdomains: ["0", "1", "2", "3"],
    },
  ],
};

地图配置项详细

lat: number;
lng: number;
CRS?: "4490";
layer?: {
    url: string;
    Subdomains?: string[];
    maxZoom?: number;
    minZoom?: number;
    errorTileUrl?: string;
    attribution?: string;
  }[];
attribution?: string;

初始化

const mapInstance = new IdoMap("divId");

方法

创建点位 createMarkers

const collections = mapInstance.createMarkers([
  {
    id: "1", //唯一标识,可根据数据对比进行局部点位更新
    lat: "31.936722", //纬度
    lng: "120.050611", //经度,
    iconAnchor: [12, 0],
    className: "leaflet-div-icon",
    html: "XXXX公司",
    popupHtml:
      '<div style="background: #ffffff;"><a href=javascript:alert("当前企业:${obj.html}")>${obj.html}</a></div>',
    enterprise_id: "aaaa",
  },
  {
    id: "3", //唯一标识,可根据数据对比进行局部点位更新
    clickEvent: "alert('当前企业id:${obj.enterprise_id}')", //点击事件
    lat: "31.936722", //纬度
    lng: "120.050611", //经度,
    enterprise_id: "12345678",
  },
  {
    lat: "31.906707", //纬度
    lng: "120.151291", //经度,
    popupHtml: '<div style="background: #ffffff;">222</div>',
  },
]);

通过 geojson 生成图层/集合 createByGeoJson

const geoLayer = mapInstance.createByGeoJson(lineString, {
  style: { color: "red", weight: 1, dashArray: 3 },
  popupHtml: "多边形",
  enterprise_id: "2222",
  clickEvent: "alert('当前企业id:${obj.enterprise_id}')", //点击事件
});

创建图层 createLayer

const layer = mapInstance.createLayer(
  {
    layerType: "special_enterprise",
    collections
  }
);

为地图/图层添加图层/集合 addLayer

mapInstance.addLayer(layer);
或
mapInstance.addLayer(geoLayer,layer);