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。


你可能感兴趣的:(js,开源,map)