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. 动态添加单个建筑的例子

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


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