css 如何设置从带有Leaflet的geojson文件中获取的SVG的样式?

vd2z7a6w  于 2023-01-10  发布在  其他
关注(0)|答案(1)|浏览(170)

我可以显示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)
    });
7cwmlq89

7cwmlq891#

我能够解决这个问题添加以下内容。谢谢。

let map = L.map("map",{
    renderer: L.svg({
    padding:0
})

相关问题