0

我正在用 *Leaflet 创建一个地图” 这个细节，刚刚用Leaflet创建了一个地图，把它做成圆形 我想充分认识这个很棒的工具的创造者和其他瓷砖的创造者......我希望归属地遵循圆形。

有人可以帮助我使用下面显示的代码吗？

分区

***
<div id="carteJour"></div>

风格

          /* style et forme de ma carte*/
  #carteJour {
  margin-top: 10%;
  width: 700px; 
  height: 700px; 
  border-radius: 350px; 
  position: absolute; 
  z-index: 500;
  text-align: center;  
  left: 50%;
  top: 29%;
  transform: translate(-50%, -50%);
  border-style: dashed;
  border-radius: 50%;}

瓦片层链接

     L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
   attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
   subdomains: 'abcd',
   minZoom: 1,
   maxZoom: 23,
 }).addTo(mymap);

非常感谢您抽出时间。

4

1 回答 1

1

您可以创建一个归因控件，然后将其容器复制到地图 div 中，使其居中。

var map = L.map('map',{
  attributionControl: false, //Disable the autogenerated attribution 
}).setView([52.06, 7.40], 10);

L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var attrControl = L.control.attribution(); //Create own attribution
attrControl.addTo(map);

//Copy the generated attribution into the map div, so it can be centered
var container = attrControl.getContainer();
map.getContainer().appendChild(container);

#map {
  width: 500px;
  height: 500px;
  position: absolute;
  z-index: 500;
  text-align: center;
  left: 50%;
  border-style: dashed;
  border-radius: 50%;
  margin-left: -250px; /* Half of the width */
}

.leaflet-control-attribution.leaflet-control{
  display: block;
  position: absolute;
  width: 100%;
  bottom: 20px;
  text-align: center;
}

.leaflet-bottom.leaflet-right > .leaflet-control-attribution.leaflet-control{
  display: none;
}

示例：https ://jsfiddle.net/falkedesign/enq07ty5/

于 2020-04-17T15:02:27.923 回答