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

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

 

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

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

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

 

切片程序能够配置各类不一样的显示样式，能够配置出相似百度或者谷歌样式的地图。

 

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

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

 

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

  

 

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

 

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

地图中的全部点实现热感知功能，即地图上的每个点均可以点击查询。

 

 

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

 

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

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

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

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

   

6.标记周边一公里：能够设置一个距离，画出一个圆，实现周边显示。

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

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

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

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

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

点击返回事件。

 

 

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

 

 

 

 

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

 

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

 

 

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

 

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

 

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

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

 

 

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

  

 

 

 

 

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

 

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

 

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

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