88bifa必发娱乐基于图片完成酷炫地图呈现和相互的方案

小说版权由小编李晓晖和今日头条共有,若转发请于鲜明处标明出处:http://www.cnblogs.com/naaoveGIS/

1. 背景

     
 近日大显示屏上显得酷炫地图的须求逐步成风,大家健康的方案是利用arcmap对数据开展配图。可是,arcmap配图的局限性相比大,并且针对不一致须要,常规配图方案只怕反而让事情复杂化了。那里跟大家享受五个经过美工设计的图纸来解决地图难点的案例。

2. 案例1——倾斜地图

    88bifa必发娱乐 1

    88bifa必发娱乐 2

     此示例中,须求计算有两点:

    a.地图必要倾斜展示。

    b.地图上急需以不一致形式显得一些POI点。

   
如果以古板方案来做,对地图配图后还索要对二维地图框架的容器进行倾斜,并且对所须求突显的POI数据坐标点举行倾斜转换,达成比较辛苦。

   
仔细探究要求,其交互设计上唯有针对点数据POI的互相,切交互简单,而且在大屏的全体显示中,地图不要求有缩放平移要求。于是,大家得以交给其余一种完毕思路:

    a.不用地图框架,前端用DIV引入原始未倾斜图片。

    b.用CSS控制该DIV的倾斜角度。

   
c.设定图片左上角的地理坐标,确定图片的二个像素所代表的地理长度,然后针对POI地理坐标算出其在原有图片上的图片坐标。

   
d.拿到POI的原始图片坐标后,再利用倾斜角度算出在倾斜图片上的图形坐标,然后同样利用DIV引入该POI的图标即可。 

3. 案例2——复杂交互的三维效果地图

    同样,先交付设计稿:

   88bifa必发娱乐 3

   88bifa必发娱乐 4

    须要描述:

    a.带3D效果显示地图。

    b.行政区划可以选中交互。

    c.行政主题点图标可以控制。

    难题分析:

   
依据上二个方案中的纯前端方法,在行政区划的当选高亮交互上有一定难度。这里提议了此外一个方案:

   
a.将3D效果地图当做是真性地图,进行简短改正,处理成包涵地理坐标的实在地图。 
  

    88bifa必发娱乐 5

    b.基于更正后的图样,将行政区划矢量化。

    c.将地理图片切图,并用GIS框架加载。

    d.将处理好的矢量化行政数据以矢量图层叠加,响应交互。

88bifa必发娱乐,    e.将行行政中央点在GIS框架上叠加浮现。

   
f.鼠标移动到行政点上后取得到行政点的显示屏坐标,利用DIV将筹划好的气泡框结合自定义内容展开互动体现。

4. 总结

   
大家做GIS的人来看地图就不由自主的想用地图框架去完毕,须知针对不一致须求,消除方案得以是洋相百出的。

    a.比如未来的echarts、highcharts在缓解简单地图突显上是很好用的。

    b.有个别在线环境场馆下,利用百度API或许高德API也是行得通的。

    c.特定复杂气象,利用图片直接处理也是1个途径。

    d.真不行,配图加上地理框架再上。

 

   
                  —–欢迎转载,但保留版权,请于鲜明处标明出处:http://www.cnblogs.com/naaoveGIS/

                                                                    假若你认为本文确实辅助了你,可以微信扫一扫,举办小额的打赏和鞭策,谢谢^_^

                                88bifa必发娱乐 6

相关文章