用geoJson绘制特定形状

draw specific shape with geoJson

本文关键字：geoJson 绘制      更新时间：2023-09-26

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

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

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

我用传单库找到了解决方案
这是的样本代码

// 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>

不要忘记加载传单要求文件

相关文章：