1
+ <!doctype html>
2
+ < head >
3
+ < meta charset ="utf-8 ">
4
+ < meta http-equiv ="X-UA-Compatible " content ="chrome=1 ">
5
+ < meta name ="viewport " content ="initial-scale=1.0, user-scalable=no, width=device-width ">
6
+ < style >
7
+ html ,
8
+ body ,
9
+ # container {
10
+ width : 100% ;
11
+ height : 100% ;
12
+ margin : 0px ;
13
+ }
14
+
15
+ # loadingTip {
16
+ position : absolute;
17
+ z-index : 9999 ;
18
+ top : 0 ;
19
+ left : 0 ;
20
+ padding : 3px 10px ;
21
+ background : red;
22
+ color : # fff ;
23
+ font-size : 14px ;
24
+ }
25
+ </ style >
26
+ < title > 快速入门</ title >
27
+ </ head >
28
+
29
+ < body >
30
+ < div id ="container "> </ div >
31
+ < script type ="text/javascript " src ='//webapi.amap.com/maps?v=1.4.4&key=9c89950bdfbcecd46f814309384655cd '> </ script >
32
+ <!-- UI组件库 1.0 -->
33
+ < script src ="//webapi.amap.com/ui/1.0/main.js?v=1.0.11 "> </ script >
34
+ < script type ="text/javascript ">
35
+ //创建地图
36
+ var map = new AMap . Map ( 'container' , {
37
+ zoom : 4
38
+ } ) ;
39
+
40
+ AMapUI . load ( [ 'ui/misc/PathSimplifier' , 'lib/$' ] , function ( PathSimplifier , $ ) {
41
+
42
+ if ( ! PathSimplifier . supportCanvas ) {
43
+ alert ( '当前环境不支持 Canvas!' ) ;
44
+ return ;
45
+ }
46
+
47
+ //just some colors
48
+ var colors = [
49
+ "#3366cc" , "#dc3912" , "#ff9900" , "#109618" , "#990099" , "#0099c6" , "#dd4477" , "#66aa00" ,
50
+ "#b82e2e" , "#316395" , "#994499" , "#22aa99" , "#aaaa11" , "#6633cc" , "#e67300" , "#8b0707" ,
51
+ "#651067" , "#329262" , "#5574a6" , "#3b3eac"
52
+ ] ;
53
+
54
+ var pathSimplifierIns = new PathSimplifier ( {
55
+ zIndex : 100 ,
56
+ //autoSetFitView:false,
57
+ map : map , //所属的地图实例
58
+
59
+ getPath : function ( pathData , pathIndex ) {
60
+
61
+ return pathData . path ;
62
+ } ,
63
+ getHoverTitle : function ( pathData , pathIndex , pointIndex ) {
64
+
65
+ if ( pointIndex >= 0 ) {
66
+ //point
67
+ return pathData . name + ',点:' + pointIndex + '/' + pathData . path . length ;
68
+ }
69
+
70
+ return pathData . name + ',点数量' + pathData . path . length ;
71
+ } ,
72
+ renderOptions : {
73
+ pathLineStyle : {
74
+ dirArrowStyle : true
75
+ } ,
76
+ getPathStyle : function ( pathItem , zoom ) {
77
+
78
+ var color = colors [ pathItem . pathIndex % colors . length ] ,
79
+ lineWidth = Math . round ( 4 * Math . pow ( 1.1 , zoom - 3 ) ) ;
80
+
81
+ return {
82
+ pathLineStyle : {
83
+ strokeStyle : color ,
84
+ lineWidth : lineWidth
85
+ } ,
86
+ pathLineSelectedStyle : {
87
+ lineWidth : lineWidth + 2
88
+ } ,
89
+ pathNavigatorStyle : {
90
+ fillStyle : color
91
+ }
92
+ } ;
93
+ }
94
+ }
95
+ } ) ;
96
+
97
+ window . pathSimplifierIns = pathSimplifierIns ;
98
+
99
+ $ ( '<div id="loadingTip">加载数据,请稍候...</div>' ) . appendTo ( document . body ) ;
100
+
101
+ $ . getJSON ( '/owntracks/get_datas' , function ( d ) {
102
+
103
+ if ( ! d || ! d . length ) {
104
+ $ ( "#loadingTip" ) . text ( "没有数据..." )
105
+ return ;
106
+ }
107
+ $ ( '#loadingTip' ) . remove ( ) ;
108
+ pathSimplifierIns . setData ( d ) ;
109
+
110
+ //initRoutesContainer(d);
111
+
112
+ function onload ( ) {
113
+ pathSimplifierIns . renderLater ( ) ;
114
+ }
115
+
116
+ function onerror ( e ) {
117
+ alert ( '图片加载失败!' ) ;
118
+ }
119
+
120
+ d . forEach ( function ( item , index ) {
121
+ var navg1 = pathSimplifierIns . createPathNavigator ( index , {
122
+ loop : true ,
123
+ speed : 1000000 ,
124
+ } ) ;
125
+
126
+ navg1 . start ( ) ;
127
+ } )
128
+
129
+ } ) ;
130
+ } ) ;
131
+ </ script >
132
+ </ body >
133
+
134
+
135
+ </ html>
0 commit comments