Question

我的网页既包含使用Sigma JS创建的网络图（http://sigmajs.org/），也包含与网络图对应的Leaflet地图。网络图具有与传单地图类似的功能，您可以使用单击按钮来拖动屏幕，更多的是放大和缩小。

我希望我的页面具有更具凝聚力的外观，因此我希望网络图上的放大和缩小按钮看起来与Leaflet地图上的按钮相同。我喜欢Leaflet按钮的外观，所以我想要做的是在网络图中重新创建Leaflet按钮。显然，我可以从头开始复制按钮，然后自己制作设计按钮所需的所有CSS。但我是一个html / CSS n00b，所以我想更有效的方法是找到传单用来创建按钮并将其复制到Sigma JS CSS中的CSS。

我的问题是我似乎无法找到所有使用的CSS。我想也有可能，鉴于我是新手，还有其他的事情就是设计除了CSS之外的按钮。以下是我迄今为止在http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css找到的内容，我认为缩放按钮所需的一切都位于此处。我想我不知道加号和减号来自哪里，等等：

        font: bold 18px 'Lucida Console', Monaco, monospace;
        text-indent: 1px;
        border: 2px dotted #38f;
        background: rgba(255,255,255,0.5);

Answer 1

如果您在同一站点上使用传单和sigmajs，因此无论如何都要加载传单css，只需使用现有类创建按钮：

<div class="leaflet-control leaflet-bar">
    <a class="leaflet-control-zoom-in" href="#" title="Zoom in">+</a>
    <a class="leaflet-control-zoom-in" href="#" title="Zoom out">-</a>
</div>

（正如你可以看到+和 - 不是用css创建的，而是在html中创建的）

如果您还没有在页面上加载leaflet.css，只需找到并将我在下面使用的类从leaflet.css复制到您的css文件中。

请参阅this fiddle。

在非Leaflet应用程序（Sigma JS）中重新创建放大/缩小按钮？

1 个答案: