基于Html+js实现的瓦片式的Webgis栅格地图管理平台

基于Html+js实现的Webgis栅格平台



成都领君科技提供的基于HTML5+js开发的瓦片式地图发布平台，适用于几乎所有浏览器(IE6+，遨游，火狐，搜狗，谷歌，360，世界之窗，Opera等)。功能模块包括如下两个部分：矢量地图生成切片工具和前台javascript调用切片开发包。

一、 提供矢量数据生成切片处理工具。

原始数据可以是mif数据或者shp数据，数据的组织格式可以是一个工程地图，也可以是多个工程地图，切片程序可以自动组合多个工程展现出一幅完整的地图。原始数据要经过数据处理程序处理成切片程序需要的格式，以此加快切片速度。(数据处理程序也由底层开发,读取矢量数据，矩形切割)

切片程序可以配置各种不同的显示样式，可以配置出类似百度或者谷歌样式的地图。

切片程序可以分块切割地图，即按照每个格子来切割地图，这样，可以实现多台电脑切割不同的位置，切割完成，拷贝到一起既可无缝连接。

同时，也可以选取一个范围进行切割，例如：地图更新了某一块区域或某一条道路，可以只对这个范围的数据进行切割，切完的图片自动和以前的图片拼接。切割的图片为256*256，大小一般为 3到10K。

切片程序也可以对于专题图层进行切割，生成透明PNG文件。

二、 基于Javascript前台调用切片，在浏览器上实现地图显示



前台调用使用javascript和div动态异步加载地图切片，实现地图展示，

地图中的所有点实现热感知功能，即地图上的每一个点都可以点击查询。

1.热点感知功能：鼠标移动到地图上任意图标上时自动提示，点击返回事件。

2.放大、缩小：可拉框放大缩小地图

3.测距：可以在测距的同时放大缩小拖动地图

4.测面：可以在测面的同时放大缩小拖动地图

5.图片标记：可以添加自定义图片，鼠标移动到上面变成手指状，点击返回事件。

6.标记周边一千米：可以设置一个距离，画出一个圆，实现周边显示。

：
7.文字标记：可在提示框上面动态标注一个字，点击返回事件。

8.文本标注：可以标注一行文字，点击返回事件。

9.可移动图标：可以用鼠标选中图标，并移动该图标，移动结束返回事件。

10.图上取点: 可在图上点击某个位置，返回当前点坐标。

11.矢量点：可以动态添加一个小圆点，鼠标移动到上面自动变色，

点击返回事件。

12.矢量线：可以动态添加一条线，鼠标移动到上面自动变色，点击返回事件。

13.改变线色：可以调用接口动态改变线的颜色。



14．矢量面：可以动态添加一个面，鼠标移动到上面自动变色，点击返回事件。

15.改变面色：可以调用接口动态改变面的颜色。

16.学校专题、商场专题：可以动态添加透明图层，图层中的所有点有热感知功能。鼠标移动到上面变成可点击状，点击返回事件。

17.画线、画面、画矩形：可在地图上画一条线或者一个面，返回线或者面的点集合。

鼠标移动到上面自动变色提示，点击返回事件。

同时，可以对当鼠标移动到线或面上的时候，可以动态编辑线和面。调用接口，返回编辑对象的点列。

18.删除：可以指定删除添加的点，线，面，图标，图层等

备注：地图加载实现异步加载，即图片下载到本地缓存后才加载到网页中。放大缩小时候，实现过渡效果，美化显示。有效控制浏览器内存使用量，加快显示速度。移动地图或定位地图时，都有自动滑动效果。

添加标注图标时，可以把多个图标组合到一个文件中，通过接口函数可以从文件中取某一个图标进行标注。

例如：从图片集合中取 进行标注