Leaflet.js使用总结

1.加载地图

var map = L.map("mapDiv", {
    center: [42.31, 84.41],
    zoom: 6,
    minZoom: 3,
    zoomControl: false,
    attributionControl: false
});

2.添加一个arcgis的动态图层

提示：要使用到一个插件esri-leaflet.js

var envLayer = L.esri.dynamicMapLayer({
    url: MAP_URL,
    opacity: 1,
    zIndex: 1,
});
map.addLayer(envLayer);

3.添加marker点

3.1div的marker

/**
多个点组合图层
*/
var icon = L.divIcon({
    // html: '<div style="width:8px;height:8px;"></div>',
    html: m.val,
    className: 'marker-style',
});
var marker = L.marker([m.lat, m.lon], {
    // title: m.val,
    zIndexOffset: 1000,
    icon: icon,
    riseOnHover: true
})
//事件监听
marker.on('click', function(event) {
    
})
markers.push(marker);
_markerLayer[key] = L.layerGroup(markers);
Map.addLayer(_markerLayer[key]);

3.2 circle的marker

data.forEach(function(m) {
    var circle = L.circle([m.latitude, m.longitude], 6000, {
        color: 'red', //颜色
        fillColor: '#f03',
        fillOpacity: 0.4, //透明度
        stationNo: m.stationNo
    });
    circle.on('click', function(event) {
        
    })
    markers.push(circle);
})
_markerLayer[key] = L.layerGroup(markers);
Map.addLayer(_markerLayer[key]);

4.添加图片图层

var imageBounds = [ //边界大小
    [json[0].lat, json[0].lon],
    [json[len].lat, json[len].lon]
];
_sbtObecjt['mapKey'] = L.imageOverlay(_canvas.toDataURL(), imageBounds, {
    opacity: .5,
    zIndex: 2
});
Map.addLayer(_sbtObecjt['mapKey']);

5.添加风场数据

提示： 需要插件leaflet-velocity.js

velocityLayer[mapKey] = L.velocityLayer({
    displayValues: true,//提示数值
    displayOptions: {
        velocityType: '', //提示字符
        emptyString: '', //空数据提示字符
        displayPosition: 'bottomleft',
        displayEmptyString: 'No Data!!!',
        angleConvention: 'bearingCW'
    },
    data: data,
    colorScale: [
        "rgb(89,248,30)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)",
        "rgb(255,255, 255)"
    ],
    maxVelocity: 10
});
velocityLayer[mapKey].addTo(Map);
//data数据格式
[
    {
        "header":{
            "discipline":0,
            "disciplineName":"Meteorological products",
            "gribEdition":2,
            "gribLength":27759,
            "center":7,
            "centerName":"US National Weather Service - NCEP(WMC)",
            "parameterNumber":2,
            "parameterNumberName":"U-component_of_wind",
            "parameterUnit":"m.s-1",
            "surface1Type":103,
            "surface1TypeName":"Specified height level above ground",
            "surface1Value":10.0,
            ...
        },
        "data":[
            -2.12,
            -2.27,
            -2.41,
            ...
        ]
    }
]