Question

我试图在浏览器上使用geoJSON绘制建筑物建筑形状

故事是：我想通过（udig或qgis）制作shapefile并将shapefile转换为geoJSON，然后通过shapefile在浏览器上创建形状。我准备好了可以制作shapefile并将其转换为geoJSON

我已经搜索过所有内容但只找到3个用于geoJSON的库（openlayer / Leaflet / Mapbox）。这些都是好的和有用的，但唯一的是他们都需要加载世界地图，我不想加载。我无法配置这些库来构建我的自定义地图。

Answer 1

我找到了Leaflet库的解决方案
这是示例代码

// a GeoJSON multipolygon
var mp = {
  "type": "Feature",
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [
        [
          [
            [101.2, 1.2], [101.8, 1.2], [101.8, 1.8], [101.2, 1.8], [101.2, 1.2]
          ],
          [
            [101.2, 1.2], [101.3, 1.2], [101.3, 1.3], [101.2, 1.3], [101.2, 1.2]
          ],
          [
            [101.6, 1.4], [101.7, 1.4], [101.7, 1.5], [101.6, 1.5], [101.6, 1.4]
          ],
          [
            [101.5, 1.6], [101.6, 1.6], [101.6, 1.7], [101.5, 1.7], [101.5, 1.6]
          ]
        ],
        [
          [
            [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]
          ],
          [
            [100.35, 0.35], [100.65, 0.35], [100.65, 0.65], [100.35, 0.65], [100.35, 0.35]
          ]
        ]
      ]
  },
  "properties": {
    "name": "MultiPolygon",
    "style": {
        color: "black",
        opacity: 1,
        fillColor: "white",
        fillOpacity: 1
    }
  }
};

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map', {
  center: [0.8, 100.9],
  zoom: 8
});
new L.GeoJSON(mp, {
  style: function(feature) {
      return feature.properties.style
  }
}).addTo(map);

和html

<div id="map" style="height:480px; width:360px;"></div>

别忘了加载Leaflet需要文件

使用geoJson绘制特定形状

1 个答案: