Tilemill + tilestream + mapbox.js 自制地图
2014-02-18 21:04
253 查看
感谢Mapbox,带来了一整套完整的地图方案。
你可以把你的地图放在Mapbox的网站上。也可以使用他们提供的开源软件自己架设地图服务。
Mapbox的地图方案包括web,ios和android。 不过android目前属于不成熟阶段。但是相信很快就会成熟起来。
一个比较舒服的地图自制流程如下:
Qgis 处理各种GIS数据,导出为shp或GeoJson等格式 ==> TileMill 生成 .mbtile ==> tilestream 在线地图服务 或 直接由Android/IOS SDK 渲染地图。
QGIS的使用推荐教程:http://www.qgistutorials.com/en/
TileMill教程:https://www.mapbox.com/tilemill/docs/crashcourse/introduction/
TileStream的资料稍微少些,这里重点讲下。
首先,假设你在TileMill教程中导出的地图文件为abc.mbtile
存放在/Users/fangjian/Documents/MapBox/export
假设你已经安装了nodejs ,然后安装tilestream.
sudo npm install -g tilestream
装好以后启动服务
tilestream --tiles=/Users/fangjian/Documents/MapBox/export
更多设置参见: http://linuxdev.dk/articles/tilestream-openlayers-and-drupal-7
这个时候访问:http://localhost:8888
已经可以看到地图了。点地图图标进入到地图页面后,点“i"图标可以看到这个地图服务的网址。如:http://localhost:8888/v2/abc/{z}/{x}/{y}.png
下面把这个范例拿来用:https://www.mapbox.com/mapbox.js/example/v1.0.0/external-layers/
保存为mapbox.html
其中的网址部分改成:var stamenLayer = L.tileLayer('http://localhost:8888/v2/abc/{z}/{x}/{y}.png'
打开mapbox.html,就可以看到地图了。
如果使用mapbox.js
对应的tilejson为 http://localhost:8888/v2/abc.json
如果想解包为纯静态的图片,用mbutil https://github.com/mapbox/mbutil
sudo easy_install mbutil
mb-util abc.mbtiles abc
abc/metadata.json为tilejson文件
abc/z/x/y.png是瓦片文件
abc/z/x/y.grid.json是UTFGRID文件
进一步了解详见 http://blog.thematicmapping.org/2012/11/exploring-mapbox-stack-mbtiles-tilejson.html
你可以把你的地图放在Mapbox的网站上。也可以使用他们提供的开源软件自己架设地图服务。
Mapbox的地图方案包括web,ios和android。 不过android目前属于不成熟阶段。但是相信很快就会成熟起来。
一个比较舒服的地图自制流程如下:
Qgis 处理各种GIS数据,导出为shp或GeoJson等格式 ==> TileMill 生成 .mbtile ==> tilestream 在线地图服务 或 直接由Android/IOS SDK 渲染地图。
QGIS的使用推荐教程:http://www.qgistutorials.com/en/
TileMill教程:https://www.mapbox.com/tilemill/docs/crashcourse/introduction/
TileStream的资料稍微少些,这里重点讲下。
首先,假设你在TileMill教程中导出的地图文件为abc.mbtile
存放在/Users/fangjian/Documents/MapBox/export
假设你已经安装了nodejs ,然后安装tilestream.
sudo npm install -g tilestream
装好以后启动服务
tilestream --tiles=/Users/fangjian/Documents/MapBox/export
更多设置参见: http://linuxdev.dk/articles/tilestream-openlayers-and-drupal-7
这个时候访问:http://localhost:8888
已经可以看到地图了。点地图图标进入到地图页面后,点“i"图标可以看到这个地图服务的网址。如:http://localhost:8888/v2/abc/{z}/{x}/{y}.png
下面把这个范例拿来用:https://www.mapbox.com/mapbox.js/example/v1.0.0/external-layers/
保存为mapbox.html
其中的网址部分改成:var stamenLayer = L.tileLayer('http://localhost:8888/v2/abc/{z}/{x}/{y}.png'
打开mapbox.html,就可以看到地图了。
如果使用mapbox.js
对应的tilejson为 http://localhost:8888/v2/abc.json
如果想解包为纯静态的图片,用mbutil https://github.com/mapbox/mbutil
sudo easy_install mbutil
mb-util abc.mbtiles abc
abc/metadata.json为tilejson文件
abc/z/x/y.png是瓦片文件
abc/z/x/y.grid.json是UTFGRID文件
进一步了解详见 http://blog.thematicmapping.org/2012/11/exploring-mapbox-stack-mbtiles-tilejson.html
相关文章推荐
- Tilemill + tilestream + mapbox.js 自制地图
- MapBox TileMill
- cocos2d-js 实现双指缩放地图效果 和 单点移动效果
- 关于Node.js里面的Transform Stream类型
- Node.js学习 - Stream
- node.js 的stream(流)和模块系
- [js]调用google,51ditu和mapbar的地图API
- node.js之流学习(Stream)
- <cocos2d-x for wp7>使用cocos2d-x制作基于Tile地图的游戏:加入敌人和战斗(三)
- <cocos2d-x for wp7>使用cocos2d-x制作基于Tile地图的游戏:不一样的战斗(回合制战斗)(四)
- js 调用百度地图api并在地图上进行打点添加标注
- GIS理论(墨卡托投影、地理坐标系、地面分辨率、地图比例尺、Bing Maps Tile System)
- IClient for js开发之地图的加载
- 自制游戏 util.js
- (二)ArcGIS JS 加载动态地图服务
- js 简单的自制分组(类似于分页) 结合mvc3
- JS各种表以及地图
- node.js中流(Stream)的深度剖析
- (四)ArcGIS JS 加载切片地图服务
- 1-1:(翻译)如何使用cocos2d制作基于tile地图的游戏教程:第一部分