chunmap是开源的跨平台GIS软件。
- 支持高德腾讯等瓦片地图显示
- 支持丰富的地图样式配置
- 支持地图数据编辑
地图控件
在Html页面中增加div来显示地图
<div id="mapRoot" style="width: 100%; height: 1000px;"></div>并在代码运行前调用下列代码来配置
var env = fan.std.CaseInsensitiveMap.make();
env.set('fwt.window.root', "mapRoot");
fan.std.Env.cur().$setVars(env);
配置刷新回调
//数据加载完成后刷新地图界面的回调
var unsafeMap = fan.std.Unsafe.make(map);
var callback = fan.sys.Func.make$closure(
{},
function()
{
fan.vaseWindow.Toolkit.cur().callLater(0,fan.sys.Func.make$closure(
{},
function()
{
unsafeMap.val().ctrl().refresh();
return;
}));
return;
});
fan.concurrent.Actor.locals().set("chunmapTaster.TileDataSource.callback",fan.sys.ObjUtil.coerce(callback,fan.sys.Obj.$type.toNullable()));
增加图层
//新建图层
var layer0 = fan.chunmapView.VectorLayer.makeUri(fan.std.Uri.fromStr("c11.tsv"));
map.ctrl().layers().add(layer0);
//为图层设置样式
var sym = fan.chunmapView.SimplePolygonSym.make();
sym.brush$(fan.vaseGraphics.Color.fromStr("#cc66bc"));
sym.strokeBrush$(fan.vaseGraphics.Color.fromStr("#445544"));
layer0.symbolizers$(fan.sys.List.makeFromJs([sym]));
使用选择工具
//使用要素选择工具
map.ctrl().setCurrentTool(fan.sys.ObjUtil.$with(fan.chunmapCtrl.PickTool.make(),fan.sys.Func.make$closure(
{},
function(it)
{
it.onSelectChange$(fan.sys.Func.make$closure(
{},
function(fs)
{
fan.sys.ObjUtil.echo(fs.first());
return;
}));
return;
})));自带很多工具，包括框选，测距，形状编辑等工具。
显示地图
//显示窗口
var frame = fan.vaseGui.Frame.make();
frame.add(map);
frame.show();效果图如下。因为chrome中本地文件没法ajax访问，所以需要放入web服务器才能运行。示例的地图数据比较大，所以有点卡。
数据准备
只支持加载tsv格式的数据，shpfile数据可以使用自带的chunmapEditor编辑工具来转换。
下载地址：https://github.com/chunquedong/chunmap/releases；
