• 【Leafletjs】5.L.Control 自定义一个Control


    L.Control

    所有leaflet控制的基础类。继承自IControl接口。 你可以这样添加控件:

    control.addTo(map);
    // the same as
    map.addControl(control);

    构造器

    构造器使用描述
    L.Control( <Control options> options? ) new L.Control()
    L.control()
    通过给定的选项创建一个控制。

    Options

    选项类型默认值描述
    position String 'topright' 控制初始的位置(在地图的某一角)。参见 control positions.

    Methods

    方法返回值描述
    setPosition( <String> position ) this 设置控制的位置。参见 control positions.
    getPosition() String 返回控制的当前位置。
    addTo( <Map> map ) this 将控制添加到地图上。
    removeFrom( <Map> map ) this 将控制从地图上移除。
    getContainer() HTMLElement 返回 the HTML container of the control.

    Control Positions(控制的位置)

    Control positions (map corner to put a control to) are set using strings. Margins between controls and the map border are set with CSS, so that you can easily override them.

    Position描述
    'topleft' 地图的左上角。
    'topright' 地图的右上角。
    'bottomleft' 地图的左下角。
    'bottomright' 地图的右下角。

    下面讲下如何创建一个自定义控件

    基本模板:

    L.Control.XXX= L.Control.extend({
        //在此定义参数    
    options: {
    },
    //在此初始化 initialize:
    function (options) { L.Util.extend(this.options, options); }, onAdd: function (map) { //可在此添加控件内容 } });

    以此模板创建一个简单图例控件

    L.Control.Legend = L.Control.extend({
        options: {
            position: 'topright' //初始位置
    
        },
        initialize: function (options) {
            L.Util.extend(this.options, options);
    
        },
        onAdd: function (map) {
    //创建一个class为leaflet-control-clegend的div
    this._container = L.DomUtil.create('div', 'leaflet-control-clegend');
    //创建一个图片要素
    var legendimg = document.createElement('img'); legendimg.id = 'leaflet-control-clegend'; legendimg.type = 'img'; legendimg.src = "../../Content/legend.png"; this._legendimg = legendimg; //创建一个关闭控件的按钮 var closebutton = document.createElement('a'); closebutton.id = 'leaflet-control-geosearch-close'; closebutton.className = 'glyphicon glyphicon-remove'; this._closebutton = closebutton; this._container.appendChild(this._closebutton); this._container.appendChild(this._legendimg); //注册关闭事件 L.DomEvent.addListener(this._closebutton, 'click', this._onCloseControl, this); return this._container; }, _onCloseControl: function () { this._map.options.Legend = false; this.removeFrom(this._map); }, });

    在定义一些样式后效果如下

    高级一点可以定义如下扁平样式的:

     

  • 相关阅读:
    Android CheckBox的监听事件
    sqlite实现用户数据储存
    论面向服务架构设计及其应用
    聊聊架构阅读笔记(3)
    第九周学习总结
    pip下载报错cannot import name 'FormatControl'
    第八周学习总结
    聊聊架构阅读笔记(2)
    阅读笔记
    第七周学习总结
  • 原文地址:https://www.cnblogs.com/shitao/p/3614191.html
Copyright © 2020-2023  润新知