初中地理根据图片达成酷炫地图展现和互动的方案

作品版权由作者李晓晖和新浪共有,若转载请于鲜明处标明出处:http://www.cnblogs.com/naaoveGIS/

1. 背景

     
 如今大屏幕上显示酷炫地图的必要日益成风,我们如常的方案是应用arcmap对数码进行配图。不过,arcmap配图的局限性相比较大,并且针对不一致须要,常规配图方案可能反而让事情复杂化了。那里跟大家享受三个通过美工设计的图纸来缓解地图难点的案例。

2. 案例1——倾斜地图

    初中地理 1

    初中地理 2

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

    a.地图需要倾斜突显。

    b.地图上急需以差距方式显得一些POI点。

   
假使以观念方案来做,对地图配图后还须求对二维地图框架的器皿举行倾斜,并且对所急需出示的POI数据坐标点进行倾斜转换,完结比较坚苦。

   
仔细研讨需要,其交互设计上只有针对点数据POI的互动,切交互不难,而且在大屏的共同体浮现中,地图不须要有缩放平移须求。于是,大家可以提交此外一种完成思路:

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

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

   
c.设定图片左上角的地理坐标,鲜明图片的三个像素所代表的地理长度,然后针对POI地理坐标算出其在本来图片上的图纸坐标。

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

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

    同样,先付给设计稿:

   初中地理 3

   初中地理 4

    须求描述:

    a.带3D效果体现地图。

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

    c.行政中央点图标可以决定。

    难点分析:

   
根据上2个方案中的纯前端方法,在行政区划的入选高亮交互上有一定难度。那里提议了别的二个方案:

   
a.将3D效果地图当做是动真格的地图,举办简易考订,处理成蕴含地理坐标的真人真事地图。 
  

    初中地理 5

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

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

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

    e.将行行政大旨点在GIS框架上叠加展示。

初中地理,   
f.鼠标移动到行政点上后拿走到行政点的显示器坐标,利用DIV将规划好的气泡框结合自定义内容进行交互浮现。

4. 总结

   
我们做GIS的人收看地图就不禁的想用地图框架去完成,须知针对差距要求,消除方案得以是不以为奇的。

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

    b.某个在线环境场地下,利用百度API大概高德API也是一蹴而就的。

    c.特定复杂气象,利用图片直接处理也是一个门路。

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

 

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

                                                                    假使您觉得本文确实接济了您,可以微信扫一扫,进行小额的打赏和鞭策,多谢^_^

                                初中地理 6

相关文章