给传单圆形地图一个圆形属性？答案

【问题标题】：Giving Leaflet Circle shaped Map a circle attribution?给传单圆形地图一个圆形属性？
【发布时间】：2020-04-17 12:17:27
【问题描述】：

我正在创建带有 *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);

非常感谢您抽出宝贵时间。

【问题讨论】：

标签： dictionary geometry leaflet shapes attribution

【解决方案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/

【讨论】：