基于图片实现酷炫地图显示与互的方案。基于图片实现酷炫地图显示及互动的方案。

章版权由作者李晓晖同博客园共有,若转载请让大庭广众处于标明出处:http://www.cnblogs.com/naaoveGIS/

文章版权由作者李晓晖以及博客园共有,若转载请于大庭广众处于标明出处:http://www.cnblogs.com/naaoveGIS/

1. 背景

     
 目前大屏幕上出示酷炫地图的求日趋成风,我们如常的方案是应用arcmap对数码进行配图。但是,arcmap配图的局限性比较坏,并且针对不同需要,常规配图方案或反而给事情复杂化了。这里跟大家享受两独通过美工设计的图形来解决地图问题的案例。

1. 背景

     
 目前不胜屏幕及显得酷炫地图的要求日渐成风,我们如常的方案是采取arcmap对数码进行配图。但是,arcmap配图的局限性比较好,并且对不同需要,常规配图方案或者反而被工作复杂化了。这里与大家享用两独经美工设计的图样来缓解地图问题之案例。

2. 案例1——倾斜地图

    图片 1

    图片 2

     此示例中,需求总结出点儿沾:

    a.地图需要倾斜展示。

    b.地图上用为不同款式显得一些POI点。

   
如果盖传统方案来做,对地图配图后还需要针对二维地图框架的容器进行倾斜,并且针对所欲展示的POI数据坐标点进行倾斜转换,实现比较吃力。

   
仔细研究需要,其相设计上单发针对点数据POI的交互,切交互简单,而且于大屏的整体展示被,地图不欲来缩放平移需求。于是,我们好给来另外一种植实现思路:

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

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

   
c.设定图片左上角的地理坐标,确定图片的1个像素所代表的地理长度,然后针对POI地理坐标算有该于初图片及之图片坐标。

   
d.获得POI的本来图片坐标后,再使用倾斜角度算有当侧图片及的图片坐标,然后同利用DIV引入该POI的图标即可。 

2. 案例1——倾斜地图

    图片 3

    图片 4

     此示例中,需求总结发生个别点:

    a.地图需要倾斜展示。

    b.地图上需以不同式样展示一些POI点。

   
如果因为民俗方案来举行,对地图配图后尚待针对二维地图框架的器皿进行倾斜,并且对所用出示的POI数据坐标点进行倾斜转换,实现比较艰难。

   
仔细研究需要,其相设计达到才来针对点数据POI的相,切交互简单,而且以大屏的圆展示着,地图不待发出缩放平移需求。于是,我们得以让闹另外一种实现思路:

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

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

   
c.设定图片左上角的地理坐标,确定图片的1只像素所代表的地理长度,然后对POI地理坐标算有该以原始图片上的图样坐标。

   
d.获得POI的原本图片坐标后,再采取倾斜角度算有当倾斜图片上之图样坐标,然后同应用DIV引入该POI的图标即可。 

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

    同样,先叫闹设计稿:

   图片 5

   图片 6

    需求描述:

    a.带3D效果亮地图。

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

    c.行政中心点图标可以控制。

    难点分析:

   
按照上一个方案中的纯前端方法,在行政区划的当选高亮交互上发生必然难度。这里提出了另外一个方案:

   
a.将3D效果地图当做是诚心诚意地图,进行简易纠正,处理成包含地理坐标的真实性地图。 
  

    图片 7

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

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

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

    e.将履行行政中心点在GIS框架上折加展示。

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

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

    同样,先被闹设计稿:

   图片 8

   图片 9

    需求描述:

    a.带3D效果亮地图。

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

    c.行政中心点图标可以控制。

    难点分析:

   
按照上一个方案中的纯前端方法,在行政区划的当选高亮交互上发出早晚难度。这里提出了另外一个方案:

   
a.将3D效果地图当做是忠实地图,进行简要纠正,处理成包含地理坐标的真正地图。 
  

    图片 10

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

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

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

    e.将实行行政中心点于GIS框架上折加展示。

   
f.鼠标移动至行政点上后收获到行政点的屏幕坐标,利用DIV将规划好的气泡框结合于定义内容开展互动展示。

4. 总结

   
我们召开GIS的人头探望地图就是不禁的想用地图框架去贯彻,须知针对不同要求,解决方案得以是各式各样的。

    a.比如现在之echarts、highcharts在缓解简单地图显示上是大好用的。

    b.某些在线环境场合下,利用百度API或者高德API也是实用的。

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

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

 

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

                                                                    如果你看本文确实帮了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢
^_^

                                图片 11

4. 总结

   
我们开GIS的人张地图就是按捺不住的想用地图框架去实现,须知针对不同需求,解决方案得以是丑态百出的。

    a.比如现在的echarts、highcharts在化解简单地图显示上是大好用底。

    b.某些在线环境场合下,利用百度API或者高德API也是立竿见影的。

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

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

 

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

                                                                    如果你认为本文确实帮了若,可以微信扫一扫,进行小额的打赏和鼓励,谢谢
^_^

                                图片 12

相关文章