leaflet.js レイヤコントロール改々


ライブサンプル仮置き
http://jpusergis.site44.com/GSILayer70LayerControl2.html

前記事のレイヤコントロールをMax/Min判別で非表示に

Leafletレイヤ透過

L.Control.OpacityLayers2 = L.Control.Layers.extend({
    _addItem: function (obj) {
        var label = L.Control.Layers.prototype._addItem.call(this, obj);

        //レイヤIDをラベルにも
        label.layerId = L.stamp(obj.layer);
        var map = this._map;
        map.on('zoomend', this._onZoom, this);

        var zoom = map.getZoom();
        //レイヤに設定があるか確認
        if (obj.layer.options && obj.layer.options.maxZoom && obj.layer.options.minZoom) {
            if (zoom > obj.layer.options.maxZoom) {
                label.style.display = 'none';
            } else if (obj.layer.options.minZoom > zoom) {
                label.style.display = 'none';
            } else {
                label.style.display = 'block';
            } //end if
        } //end if

        if (!obj.overlay || !obj.layer.setOpacity) {
            return label;
        }
        input = document.createElement('input');
        input.type = 'range';
        input.min = 0;
        input.max = 100;
        input.value = 100;
        input.layerId = L.stamp(obj.layer);
        if (this._map.hasLayer(obj.layer)) {
            input.style.display = 'block';
        } else {
            input.style.display = 'none';
        }

        L.DomEvent.on(input, 'change', this._onInputClick, this);

        label.appendChild(input);
        return label;
    }, //end _addItem
    _onInputClick: function () {
        var i, input, obj,
                    inputs = this._form.getElementsByTagName('input'),
                    inputsLen = inputs.length;

        this._handlingClick = true;

        for (i = 0; i < inputsLen; i++) {
            input = inputs[i];

            obj = this._layers[input.layerId];

            if (input.type == 'range' && this._map.hasLayer(obj.layer)) {
                input.style.display = 'block';
                obj.layer.setOpacity(input.value / 100.0);
                continue;
            } else if (input.type == 'range' && !this._map.hasLayer(obj.layer)) {
                input.style.display = 'none';
                continue;
            }

            if (input.checked && !this._map.hasLayer(obj.layer)) {
                this._map.addLayer(obj.layer);

            } else if (!input.checked && this._map.hasLayer(obj.layer)) {
                this._map.removeLayer(obj.layer);
            } //end if
        } //end loop

        this._handlingClick = false;

        this._refocusOnMap();
    }, //end _onInputClick
    _onZoom: function () {
        var i, label, obj,
            lebelarray = this._form.getElementsByTagName('label'),
            labellen = lebelarray.length,
            map = this._map,
            zoom = map.getZoom();

        for (i = 0; i < labellen; i++) {
            label = lebelarray[i];
            obj = this._layers[label.layerId];

            //レイヤに設定があるか確認
            if (obj.layer.options && obj.layer.options.maxZoom && obj.layer.options.minZoom) {
                if (zoom > obj.layer.options.maxZoom) {
                    label.style.display = 'none';
                } else if (obj.layer.options.minZoom > zoom) {
                    label.style.display = 'none';
                } else {
                    label.style.display = 'block';
                } //end if
            } //end if

        }//end loop

    } //end onZoom
});
L.control.opacityLayers2 = function (baseLayers, overlays, options) {
        return new L.Control.OpacityLayers2(baseLayers, overlays, options);
};
カテゴリー: 開発 タグ: パーマリンク