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

Posted 2023-03-17

【中文标题】给传单圆形地图一个圆形属性？

【英文标题】：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);        

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

【参考方案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/