我可以显示geojson文件中的Map。但是我写的CSS和实际的显示不匹配,如下面的img。
我写了如下CSS。我必须设置溢出可见。
body, #map {
overflow: visible;
zoom: 100%;
width: 1500px;
height: 1000px;
margin: 0px;
padding: 0px;
}
SVG的实际样式如下所示。
<body>
<div id="map" class="leaflet-container leaflet-touch leaflet-fade-anim" tabindex="0" style="position: relative;"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-pane leaflet-tile-pane"></div><div class="leaflet-pane leaflet-overlay-pane">
<svg pointer-events="none" width="1800" height="1200" viewBox="-150 -100 1800 1200" style="transform: translate3d(-150px, -100px, 0px);">
<g>~~~</g>
</svg>~~~
虽然我设置了width = 1500和height= 1000,但是为什么width= 1800和height= 1200呢?从geojson文件获取数据的代码如下所示。
$.getJSON("japan.geojson", function(data) {
let geojsonback = L.geoJson(data, {
onEachFeature: function (feature, layer) {
},
});
geojsonback.addTo(map);
});
我想匹配SVG和CSS的atcual风格我写的。
我已经尝试过添加像下面的风格,但它没有工作得很好。
const myPolygonStyle={
"width":1500,
"viewBox":"0 0 1500 1000"
}
$.getJSON("japan.geojson", function(data) {
let geojsonback = L.geoJson(data, {
style:myPolygonStyle,
onEachFeature: function (feature, layer) {
},
});
geojsonback.addTo(map);
console.log(geojsonback)
});
1条答案
按热度按时间7cwmlq891#
我能够解决这个问题添加以下内容。谢谢。