按照图片达成酷炫地图展现和彼此的方案

小说版权由作者李晓晖和搜狐共有,若转发请于分明处标明出处:http://www.cnblogs.com/naaoveGIS/

1. 背景

     
 方今大屏幕上呈现酷炫地图的急需日趋成风,大家例行的方案是使用arcmap对数码进行配图。可是,arcmap配图的局限性比较大,并且针对不一样须要,常规配图方案或然反而让事情复杂化了。那里跟我们享受多少个通过美工设计的图形来缓解地图难题的案例。

2. 案例1——倾斜地图

    图片 1

    图片 2

     此示例中,需要统计有两点:

    a.地图需要倾斜浮现。

    b.地图上要求以不一样方式浮现一些POI点。

   
即使以传统方案来做,对地图配图后还须要对二维地图框架的器皿举办倾斜,并且对所急需出示的POI数据坐标点举行倾斜转换,完成相比棘手。

   
仔细切磋要求,其交互设计上唯有针对点数据POI的相互,切交互简单,而且在大屏的完全浮现中,地图不必要有缩放平移必要。于是,我们得以交到此外一种完成思路:

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

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

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

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

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

    同样,先交付设计稿:

   图片 3

   图片 4

    须要描述:

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

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

    c.行政中央点图标可以操纵。

    难题分析:

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

   
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

相关文章