Windows-Windows下使用Linux系统(WSL)

Posted zjffun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Windows-Windows下使用Linux系统(WSL)相关的知识,希望对你有一定的参考价值。

有两种方法,一种直接改 CSS,一种是通过继承拓展 popup。

方法一:改 CSS

下面是一个将原有样式清空的设置(可能清的不全,只是提供个思路)

.l-popup {
  &--no-style {
    /* 用不了 &#{&} 这种写法*/
    .leaflet-popup-close-button.leaflet-popup-close-button {
      display: none;
    }
    .leaflet-popup-tip-container.leaflet-popup-tip-container {
      display: none;
    }
    .leaflet-popup-content-wrapper.leaflet-popup-content-wrapper {
      background: transparent;
      border-radius: 0;
      padding: 0;
      .leaflet-popup-content.leaflet-popup-content {
        margin: 0;
      }
    }
  }
}

方法二:拓展 popup

这种方式可以让 leaflet 在生成 popup 的创建 DOM 的时期就进行控制,但拓展的 popup 默认不会在 bindPopup 时使用,还应该拓展一个 bindPopup。

例如:Leaflet custom popup

// create custom popup
L.CustomPopup = L.Popup.extend({
    _initLayout: function () {
        var prefix = \'leaflet-popup\',
            container = this._container = L.DomUtil.create(\'div\',
                prefix + \' \' + (this.options.className || \'\') +
                \' leaflet-zoom-animated\');

        var wrapper = container;
        this._contentNode = L.DomUtil.create(\'div\', prefix + \'-content\', wrapper);

        L.DomEvent
            .disableClickPropagation(wrapper)
            .disableScrollPropagation(this._contentNode)
            .on(wrapper, \'contextmenu\', L.DomEvent.stopPropagation);
    },
});

// add bindCustomPopup
L.Layer.include({

    // @method bindPopup(content: String|htmlElement|Function|Popup, options?: Popup options): this
    // Binds a popup to the layer with the passed `content` and sets up the
    // neccessary event listeners. If a `Function` is passed it will receive
    // the layer as the first argument and should return a `String` or `HTMLElement`.
    bindCustomPopup: function (content, options) {

        if (content instanceof L.Popup) {
            L.setOptions(content, options);
            this._popup = content;
            content._source = this;
        } else {
            if (!this._popup || options) {
                this._popup = new L.CustomPopup(options, this);
            }
            this._popup.setContent(content);
        }

        if (!this._popupHandlersAdded) {
            this.on({
                click: this._openPopup,
                remove: this.closePopup,
                move: this._movePopup
            });
            this._popupHandlersAdded = true;
        }

        return this;
    }
});

// using
var mymap = L.map(\'mapid\').setView([51.505, -0.09], 13);

L.tileLayer(\'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}\', {
    attribution: \'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>\',
    maxZoom: 18,
    id: \'mapbox.streets\',
    accessToken: \'your.mapbox.access.token\'
}).addTo(mymap);

var marker = L.marker([51.5, -0.09]).addTo(mymap);
marker.bindCustomPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

var popup = (new L.CustomPopup({ className: \'custom-popup\' }))
    .setLatLng([51.51, -0.09])
    .setContent(\'<p>Hello world!<br />This is a nice popup.</p>\')
    .openOn(mymap);

以上是关于Windows-Windows下使用Linux系统(WSL)的主要内容,如果未能解决你的问题,请参考以下文章

Linux环境下使用JFS文件系统

linux命令行下使用vboxmanage安装linux系统

Linux系统下RPM命令和yum的使用

linux下crontab命令的使用

Linux下使用NMON监控分析系统性能

Linux系统下使用源码包安装httpd