@ido-team/map
v1.2.122
Published
``` 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"], }, ], }; ```
Downloads
537
Maintainers
Keywords
Readme
地图 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);