Предоставление Листовка в форме круга Карта атрибуция круг? - PullRequest
Новая
       87

Предоставление Листовка в форме круга Карта атрибуция круг?

0 голосов
/ 17 апреля 2020

Я создаю карту с помощью * Leaflet "Эта деталь, только что создала карту с Leaflet , сделала ее в форме круга Я хочу полностью узнать создателей этого удивительного инструмента и другие создатели тайлов ... Я хочу, чтобы атрибуция следовала за формой круга .

Может кто-нибудь помочь мне с моим кодом, показанным ниже?

Div 

***
<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 Ответ

1 голос
/ 17 апреля 2020

Вы можете создать элемент управления атрибуцией, а затем скопировать его контейнер в карту 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/

...