osmbuildings结合leaflet的应用

osmbuildings应该出了很长时间了，最近玩leaflet偶然发现，觉得蛮好玩的就集成进来。

osmbuildings主页：http://osmbuildings.org/
github地址：https://github.com/kekscom/osmbuildings

介绍下具体实现过程：

一、数据准备

1.QGIS打开shape图形，保证投影为wgs84.

2. 准备必要字段roofColor, wallColor,height，分别为顶层颜色，墙面颜色，拔高。按需填入。其中roofColor，wallColor为文本格式如：rgb(255,0,0)。height为整形。

3. 导出图层为geojson格式，后缀改为.json

二、地图加载

1.下载：leaflet/openlayer+ OSMBuilding.js +jquery

2. 调用方式

$.getJSON(‘js/osmbuild/build.json’, getbuild);

        
function getbuild(json) {

          var osmb =
newOSMBuildings(map).setData(json);

         osmb.setStyle({ shadows:
false });

}

其中：map为地图，json为回调的数据。

3. 统一配色

osmb.setStyle({wallColor:’rgba(100,100, 250, 0.701961)’, roofColor:’rgb(220, 220, 50)’, shadows:true });

shadows是阴影开关。不配的会根据json中的字段值自动配色。

4. 动态添加单个建筑的例子

<script
src=“OSMBuildings-Leaflet.js”></script>

<script>

var map =
new L.Map(‘map’).setView([52.50440,13.33522],17);

var osmb =
new OSMBuildings(map);

var drawControl =new L.Control.Draw({

draw: { polyline:false, circle:false,marker:false }

});

map.addControl(drawControl);

map.on(‘draw:created’,
function (e) {

var feature = e.layer.toGeoJSON();

feature.properties = { color:‘#ffcc00’, height:100 };

var geoJson = { type:‘FeatureCollection’, features:[feature] };

osmb.setData(geoJson);

});

</script>

5. 深入的需要改动源码：如改变最小显示比例MIN_ZOOM=11。

转载自：https://blog.csdn.net/nanqidada/article/details/38517729