如何将默认的leaflet.control替换为单个按钮的集合

Question

我的地图上有三个基础图层和三个带标记的图层。现在我使用标准传单控制在它们之间切换。我需要将它替换为地图底部每个图层的单个按钮组。它应该如下图所示：

有人可以告诉我如何更换默认的传单控件

<a href='/html/default.asp' class='w3-hide-small' title='HTML Tutorial'>HTML</a>
<a href='/css/default.asp' class='w3-hide-small' title='CSS Tutorial'>CSS</a>
<a href='/js/default.asp' class='w3-hide-small' title='JavaScript Tutorial'>JAVASCRIPT</a>
<a href='/sql/default.asp' class='w3-hide-small' title='SQL Tutorial'>SQL</a>
<a href='/php/default.asp' class='w3-hide-small' title='PHP Tutorial'>PHP</a>
<a href='/bootstrap/default.asp' class='w3-hide-small' title='Bootstrap Tutorial'>BOOTSTRAP</a>
<a href='/jquery/default.asp' class='w3-hide-small' title='jQuery Tutorial'>JQUERY</a>
<a href='/angular/default.asp' class='w3-hide-small' title='Angular Tutorial'>ANGULAR</a>
<a href='/xml/default.asp' class='w3-hide-small' title='XML Tutorial'>XML</a>

到自定义按钮组？ 这是我的小提琴：http://jsfiddle.net/anton9ov/eu1840f1/

另外，我需要在左上角的选择器中添加一个初始值。 JSON的第一个值现在就出现了，但我需要将其替换为“选择一个地方”。

Answer 1

要在模型中创建一个居中的控件，您可以调整@ghybs为上一个问题发布的this solution。基本上，您创建一个css类来在地图窗格中居中控件：

start1 <- list(alpha0=alpha0,sigma=sigma,alphas=alphas,betas=betas,n0=log(N-nrow(yscr)))
parnames(CSCR.RSF.intlik2.EXAMPLE) <- names(start)

out1 <- mle2(CSCR.RSF.intlik2.EXAMPLE,start=start1,method="SANN",optimizer="optim",
             data=list(yscr=yscr,K=K,X=X,trapcovs=trapcovs,Gden=dencovs[,1:2],Gdet=detcovs[,1:2],
                 ytel=ytel,stel=stel,dencovs=as.matrix(dencovs[,3:4]),detcovs=as.matrix(detcovs[,3:4]))
            )

然后创建一个新的占位符，该类附加到地图容器：

.leaflet-horizontalcenter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 10px;
}

.leaflet-horizontalcenter .leaflet-control {
  margin-bottom: 10px;
}

您可以使用任何您喜欢的方法来创建按钮，但this codepen example显示了将单选按钮设置为矩形框的相当简单的方法。使用这些按钮创建自定义控件将如下所示：

function addControlPlaceholders(map) {
  var corners = map._controlCorners,
    l = 'leaflet-',
    container = map._controlContainer;

  function createCorner(vSide, hSide) {
    var className = l + vSide + ' ' + l + hSide;
    corners[vSide + hSide] = L.DomUtil.create('div', className, container);
  }
  createCorner('horizontalcenter', 'bottom');
}
addControlPlaceholders(map);

这比标准图层控件方便一点，因为您必须手动输入按钮名称等，但是稍微多做一些工作，可以通过var buttonBar = L.control({ position: 'horizontalcenterbottom' }); buttonBar.onAdd = function(map) { //create div container for control var div = L.DomUtil.create('div', 'myButtonBar'); //prevent mouse events from propagating through to the map L.DomEvent.disableClickPropagation(div); //create custom radio buttons div.innerHTML = '<div class="switch-field noselect"><div class="switch-title">MAPS</div>' + '<input type="radio" id="switch_map1" name="map_switch" checked/>' + '<label for="switch_map1">Map 1</label>' + '<input type="radio" id="switch_map2" name="map_switch" />' + '<label for="switch_map2">Map 2</label>' + '<input type="radio" id="switch_map3" name="map_switch" />' + '<label for="switch_map3">Map 3</label></div>' + '<div class="switch-field noselect">' + '<input type="radio" id="switch_marker1" name="marker_switch" checked/>' + '<label for="switch_marker1">Marker 1</label>' + '<input type="radio" id="switch_marker2" name="marker_switch" />' + '<label for="switch_marker2">Marker 2</label>' + '<input type="radio" id="switch_marker3" name="marker_switch" />' + '<label for="switch_marker3">Marker 3</label>' + '<div class="switch-title">MARKERS</div></div>'; return div; }; buttonBar.addTo(map); 和{{1}以编程方式完成您已经创建的对象。如果你想在按钮周围创建一个框以在视觉上将它与地图隔离，你还可以添加一些像这样的CSS来设置为控件创建的div的样式：

baseLayers

最后，要在单击按钮时更改图层，请附加一些事件侦听器。由于您已经在使用jQuery，我们只是使用它：

overlays

其中.myButtonBar { background: white; box-shadow: 0 1px 7px rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; border-radius: 4px; text-align: center; padding: 0px 10px; position: relative; } 是一个函数，可以根据其$("#switch_map1").click(function() { switchLayer(baseLayers, "Map 1"); }); $("#switch_map2").click(function() { switchLayer(baseLayers, "Map 2"); }); $("#switch_map3").click(function() { switchLayer(baseLayers, "Map 3"); }); $("#switch_marker1").click(function() { switchLayer(overlays, "Marker 1"); }); $("#switch_marker2").click(function() { switchLayer(overlays, "Marker 2"); }); $("#switch_marker3").click(function() { switchLayer(overlays, "Marker 3"); }); 或switchLayer对象获取图层，然后将其添加到地图中并删除其他图层：

baseLayers

以下是所有这些在小提琴中合作：

http://jsfiddle.net/nathansnider/j0abypqf/