Tilemill + tilestream + mapbox.js 自制地图

感谢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

Tilemill + tilestream + mapbox.js 自制地图相关推荐

如何使用mapbox选择拾取地图要素
如何使用mapbox选择拾取地图要素前言需要引入的js.css 如何加载地图如何使用地图空间选择要素效果 demo下载地址前言你好! 最近在研究地图元素和客户端交互的方法,我将项目中的应用 ...
【MAPBOX基础功能】07、mapbox添加跟随地图的自定义面板到地图上
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
007：Mapbox GL实现地图地点搜索定位功能
第007个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中实现地图地点搜索定位功能直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果文章目录示例效果配 ...
人类一败涂地做图教程_人类一败涂地地图制作教程创意工坊自制地图方法
人类一败涂地怎么制作地图?地图怎么自制?人类一败涂地地图制作教程.在全新版本中,这款游戏支持自制地图,玩家可以自己创建地图,并且多人联机,玩家可以进行最多8人的自定义房间游戏.利用创意工坊方便地交换创 ...
高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
我的世界服务器展示自定义图片,我的世界装逼小技巧怎么在自制地图中显示自己的头像...
我的世界装逼小技巧怎么在自制地图中显示自己的头像.那下面给大家分享的是我的世界玩家教你怎么在你的地图中显示的是你的头像,希望大家喜欢. 游戏园我的世界官方群:325049520或256070479欢 ...
031：Mapbox GL实现地图导航功能，可选择起始点、路线、通行方式
第031个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中实现地图导航功能,可选择起始点.路线.通行方式. 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
js重庆市地图网页代码
下载地址 js重庆市地图网页代码,基于echarts实现的重庆地图. dd:
AMap JS 高德地图，修改渲染图层层级
AMap高德地图,修改渲染图层层级问题官网方法手动方法更改层级演示最后问题前端使用 AMap JS 高德地图时,覆盖物绘制线条(AMap.Polyline),会覆盖住下方的路段名称,路段 ...

Tilemill + tilestream + mapbox.js 自制地图

Tilemill + tilestream + mapbox.js 自制地图相关推荐

最新文章

热门文章