Commit a12d7762f68c58f8f53f487cce9b47b50beb70d7
1 parent
c75b7510
1.云平台http相关链接换成https
Showing
14 changed files
with
5886 additions
and
5886 deletions
src/main/resources/static/assets/css/TrafficControl.css
| 1 | -.maplibTc { | |
| 2 | - font-size: 12px; | |
| 3 | - width: 253px; | |
| 4 | - padding: 8px 5px 8px 8px; | |
| 5 | - background: #3B3F51; | |
| 6 | - position: absolute; | |
| 7 | - color: white; | |
| 8 | - box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 | |
| 9 | - rgba(0, 0, 0, 0.19); | |
| 10 | - top: 63px; | |
| 11 | -} | |
| 12 | - | |
| 13 | -.maplibTc a { | |
| 14 | - text-decoration: none; | |
| 15 | -} | |
| 16 | - | |
| 17 | -.maplibTcColor { | |
| 18 | - background: url("../img/tools_menu.png") no-repeat scroll 128px -86px | |
| 19 | - transparent; | |
| 20 | - font-weight: bold; | |
| 21 | - margin-bottom: 9px; | |
| 22 | - height: 18px; | |
| 23 | -} | |
| 24 | - | |
| 25 | -.maplibTcUpdate { | |
| 26 | - float: left; | |
| 27 | - width: 13px; | |
| 28 | - height: 14px; | |
| 29 | - background: url(../img/tools_menu.png) no-repeat -12px -19px; | |
| 30 | - margin-left: 5px; | |
| 31 | - cursor: pointer; | |
| 32 | - margin-top: 2px; | |
| 33 | -} | |
| 34 | - | |
| 35 | -.maplibTcView { | |
| 36 | - float: right; | |
| 37 | - color: #26c281; | |
| 38 | - text-decoration: none; | |
| 39 | - line-height: 15px; | |
| 40 | - *line-height: 18px | |
| 41 | -} | |
| 42 | - | |
| 43 | -a.maplibTcView:hover { | |
| 44 | - color: #C6DDD3; | |
| 45 | -} | |
| 46 | - | |
| 47 | -a.maplibTcView:focus { | |
| 48 | - color: #26c281; | |
| 49 | -} | |
| 50 | - | |
| 51 | -.maplibTcCurTime { | |
| 52 | - float: left; | |
| 53 | - color: #ddd; | |
| 54 | -} | |
| 55 | - | |
| 56 | -.maplibTcTime { | |
| 57 | - height: 20px; | |
| 58 | - padding: 5px 3px 0 0; | |
| 59 | -} | |
| 60 | - | |
| 61 | -.maplibTcWeekDay { | |
| 62 | - height: 22px; | |
| 63 | - color: #6688CA; | |
| 64 | - padding: 3px 0; | |
| 65 | -} | |
| 66 | - | |
| 67 | -.maplibTcWeekDay a { | |
| 68 | - color: #6688CA; | |
| 69 | - padding: 3px 2px; | |
| 70 | -} | |
| 71 | - | |
| 72 | -.maplibTcWeekDay ul { | |
| 73 | - float: left; | |
| 74 | - margin: 0; | |
| 75 | - padding: 0; | |
| 76 | -} | |
| 77 | - | |
| 78 | -.maplibTcWeekDay span { | |
| 79 | - float: left; | |
| 80 | - line-height: 23px; | |
| 81 | -} | |
| 82 | - | |
| 83 | -.maplibTcWeekDay li { | |
| 84 | - float: left; | |
| 85 | - padding: 0 6px; | |
| 86 | - list-style: none; | |
| 87 | - line-height: 23px; | |
| 88 | -} | |
| 89 | - | |
| 90 | -.maplibTcRule { | |
| 91 | - background: url("../img/bar.png") no-repeat scroll 0 10px transparent; | |
| 92 | - width: 195px; | |
| 93 | - float: left; | |
| 94 | - margin-left: 20px; | |
| 95 | - *margin-left: 10px; | |
| 96 | -} | |
| 97 | - | |
| 98 | -.maplibTcRuleTxt { | |
| 99 | - float: left; | |
| 100 | - line-height: 44px; | |
| 101 | -} | |
| 102 | - | |
| 103 | -.maplibTcClear { | |
| 104 | - clear: both; | |
| 105 | -} | |
| 106 | - | |
| 107 | -.maplibTcTimeBox { | |
| 108 | - color: #6688CA; | |
| 109 | - margin-left: 137.5px; | |
| 110 | - font-size: 11px; | |
| 111 | - overflow: hidden; | |
| 112 | -} | |
| 113 | - | |
| 114 | -.maplibTcTimeline { | |
| 115 | - height: 34px; | |
| 116 | -} | |
| 117 | - | |
| 118 | -.maplibTcTimelinePrev { | |
| 119 | - overflow: hidden; | |
| 120 | - width: 9px; | |
| 121 | - height: 9px; | |
| 122 | - cursor: pointer; | |
| 123 | - float: left; | |
| 124 | - margin-top: 3px | |
| 125 | -} | |
| 126 | - | |
| 127 | -.maplibTcTimelineNext { | |
| 128 | - overflow: hidden; | |
| 129 | - width: 11px; | |
| 130 | - *width: 10px; | |
| 131 | - height: 9px; | |
| 132 | - cursor: pointer; | |
| 133 | - float: right; | |
| 134 | - margin-top: 3px | |
| 135 | -} | |
| 136 | - | |
| 137 | -.maplibTcTimeMove { | |
| 138 | - width: 9px; | |
| 139 | - height: 18px; | |
| 140 | - background: url("../img/tools_menu.png") no-repeat scroll 0pt -32px | |
| 141 | - transparent; | |
| 142 | - float: left; | |
| 143 | - cursor: pointer; | |
| 144 | - margin-left: 137.5px; | |
| 145 | - margin-top: 0px; | |
| 146 | -} | |
| 147 | - | |
| 148 | -.maplibTcHide { | |
| 149 | - display: none; | |
| 150 | -} | |
| 151 | - | |
| 152 | -.maplibTcBtn_deskTop { | |
| 153 | - background: url(http://api.map.baidu.com/images/bgs.gif) no-repeat | |
| 154 | - scroll 0px -271px transparent; | |
| 155 | - cursor: pointer; | |
| 156 | - height: 22px; | |
| 157 | - width: 73px; | |
| 158 | - z-index: 10; | |
| 159 | - position: absolute; | |
| 160 | -} | |
| 161 | - | |
| 162 | -.maplibTcBtn_mobile { | |
| 163 | - background: url(http://api.map.baidu.com/images/traffic_bgs.png) | |
| 164 | - rgba(255, 255, 255, 0.8) no-repeat scroll -30px 0px; | |
| 165 | - border: 1px solid #AFAFAF; | |
| 166 | - background-size: 60px 30px; | |
| 167 | - cursor: pointer; | |
| 168 | - height: 30px; | |
| 169 | - width: 30px; | |
| 170 | - z-index: 10; | |
| 171 | - position: absolute; | |
| 172 | -} | |
| 173 | - | |
| 174 | -.maplibTcBtn_deskTop { | |
| 175 | - background-position: 0px -249px | |
| 176 | -} | |
| 177 | - | |
| 178 | -.maplibTcBtnOff_mobile { | |
| 179 | - background-position: 0px 0px; | |
| 180 | -} | |
| 181 | - | |
| 182 | -.maplibTcColon { | |
| 183 | - float: left; | |
| 184 | -} | |
| 185 | - | |
| 186 | -.maplibTcOn { | |
| 187 | - background: #E6EFF8; | |
| 188 | -} | |
| 189 | - | |
| 190 | -.maplibTcClose { | |
| 191 | - background: url("../img/tools_menu.png") no-repeat scroll 2px -19px | |
| 192 | - transparent; | |
| 193 | - border: 0 none; | |
| 194 | - cursor: pointer; | |
| 195 | - height: 12px; | |
| 196 | - position: absolute; | |
| 197 | - right: 7px; | |
| 198 | - top: 9px; | |
| 199 | - width: 15px; | |
| 200 | -} | |
| 201 | - | |
| 202 | -/*s--------------交通流量-----------------*/ | |
| 203 | -.maplibTfctr { | |
| 204 | - min-width: 9em; | |
| 205 | - height: 2.2em; | |
| 206 | - display: -webkit-box; | |
| 207 | - -webkit-box-align: center; | |
| 208 | - -webkit-border-radius: 0.3em; | |
| 209 | - border: .1em solid #989898; | |
| 210 | - -webkit-box-sizing: border-box; | |
| 211 | - background-color: #fff; | |
| 212 | - font-size: 14px; | |
| 213 | -} | |
| 214 | - | |
| 215 | -.maplibTfctrHide { | |
| 216 | - display: none; | |
| 217 | -} | |
| 218 | - | |
| 219 | -.maplibTfctr_c { | |
| 220 | - -webkit-box-flex: 1; | |
| 221 | -} | |
| 222 | - | |
| 223 | -.maplibTfctr_status { | |
| 224 | - width: 4em; | |
| 225 | - margin-right: .45em; | |
| 226 | -} | |
| 227 | - | |
| 228 | -.maplibTfctr_status span { | |
| 229 | - display: inline-block; | |
| 230 | - margin-left: .3em; | |
| 231 | - font-size: 14px; | |
| 232 | -} | |
| 233 | - | |
| 234 | -.maplibTfctr div,.maplibTfctr span { | |
| 235 | - -webkit-box-sizing: border-box; | |
| 236 | -} | |
| 237 | - | |
| 238 | -.maplibTfctr_l { | |
| 239 | - margin: 0 .15em; | |
| 240 | -} | |
| 241 | - | |
| 242 | -.maplibY { | |
| 243 | - background: #ffae00; | |
| 244 | -} | |
| 245 | - | |
| 246 | -.maplibR { | |
| 247 | - background: #ff0000; | |
| 248 | -} | |
| 249 | - | |
| 250 | -.maplibG { | |
| 251 | - background: #1fba00; | |
| 252 | -} | |
| 1 | +.maplibTc { | |
| 2 | + font-size: 12px; | |
| 3 | + width: 253px; | |
| 4 | + padding: 8px 5px 8px 8px; | |
| 5 | + background: #3B3F51; | |
| 6 | + position: absolute; | |
| 7 | + color: white; | |
| 8 | + box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 | |
| 9 | + rgba(0, 0, 0, 0.19); | |
| 10 | + top: 63px; | |
| 11 | +} | |
| 12 | + | |
| 13 | +.maplibTc a { | |
| 14 | + text-decoration: none; | |
| 15 | +} | |
| 16 | + | |
| 17 | +.maplibTcColor { | |
| 18 | + background: url("../img/tools_menu.png") no-repeat scroll 128px -86px | |
| 19 | + transparent; | |
| 20 | + font-weight: bold; | |
| 21 | + margin-bottom: 9px; | |
| 22 | + height: 18px; | |
| 23 | +} | |
| 24 | + | |
| 25 | +.maplibTcUpdate { | |
| 26 | + float: left; | |
| 27 | + width: 13px; | |
| 28 | + height: 14px; | |
| 29 | + background: url(../img/tools_menu.png) no-repeat -12px -19px; | |
| 30 | + margin-left: 5px; | |
| 31 | + cursor: pointer; | |
| 32 | + margin-top: 2px; | |
| 33 | +} | |
| 34 | + | |
| 35 | +.maplibTcView { | |
| 36 | + float: right; | |
| 37 | + color: #26c281; | |
| 38 | + text-decoration: none; | |
| 39 | + line-height: 15px; | |
| 40 | + *line-height: 18px | |
| 41 | +} | |
| 42 | + | |
| 43 | +a.maplibTcView:hover { | |
| 44 | + color: #C6DDD3; | |
| 45 | +} | |
| 46 | + | |
| 47 | +a.maplibTcView:focus { | |
| 48 | + color: #26c281; | |
| 49 | +} | |
| 50 | + | |
| 51 | +.maplibTcCurTime { | |
| 52 | + float: left; | |
| 53 | + color: #ddd; | |
| 54 | +} | |
| 55 | + | |
| 56 | +.maplibTcTime { | |
| 57 | + height: 20px; | |
| 58 | + padding: 5px 3px 0 0; | |
| 59 | +} | |
| 60 | + | |
| 61 | +.maplibTcWeekDay { | |
| 62 | + height: 22px; | |
| 63 | + color: #6688CA; | |
| 64 | + padding: 3px 0; | |
| 65 | +} | |
| 66 | + | |
| 67 | +.maplibTcWeekDay a { | |
| 68 | + color: #6688CA; | |
| 69 | + padding: 3px 2px; | |
| 70 | +} | |
| 71 | + | |
| 72 | +.maplibTcWeekDay ul { | |
| 73 | + float: left; | |
| 74 | + margin: 0; | |
| 75 | + padding: 0; | |
| 76 | +} | |
| 77 | + | |
| 78 | +.maplibTcWeekDay span { | |
| 79 | + float: left; | |
| 80 | + line-height: 23px; | |
| 81 | +} | |
| 82 | + | |
| 83 | +.maplibTcWeekDay li { | |
| 84 | + float: left; | |
| 85 | + padding: 0 6px; | |
| 86 | + list-style: none; | |
| 87 | + line-height: 23px; | |
| 88 | +} | |
| 89 | + | |
| 90 | +.maplibTcRule { | |
| 91 | + background: url("../img/bar.png") no-repeat scroll 0 10px transparent; | |
| 92 | + width: 195px; | |
| 93 | + float: left; | |
| 94 | + margin-left: 20px; | |
| 95 | + *margin-left: 10px; | |
| 96 | +} | |
| 97 | + | |
| 98 | +.maplibTcRuleTxt { | |
| 99 | + float: left; | |
| 100 | + line-height: 44px; | |
| 101 | +} | |
| 102 | + | |
| 103 | +.maplibTcClear { | |
| 104 | + clear: both; | |
| 105 | +} | |
| 106 | + | |
| 107 | +.maplibTcTimeBox { | |
| 108 | + color: #6688CA; | |
| 109 | + margin-left: 137.5px; | |
| 110 | + font-size: 11px; | |
| 111 | + overflow: hidden; | |
| 112 | +} | |
| 113 | + | |
| 114 | +.maplibTcTimeline { | |
| 115 | + height: 34px; | |
| 116 | +} | |
| 117 | + | |
| 118 | +.maplibTcTimelinePrev { | |
| 119 | + overflow: hidden; | |
| 120 | + width: 9px; | |
| 121 | + height: 9px; | |
| 122 | + cursor: pointer; | |
| 123 | + float: left; | |
| 124 | + margin-top: 3px | |
| 125 | +} | |
| 126 | + | |
| 127 | +.maplibTcTimelineNext { | |
| 128 | + overflow: hidden; | |
| 129 | + width: 11px; | |
| 130 | + *width: 10px; | |
| 131 | + height: 9px; | |
| 132 | + cursor: pointer; | |
| 133 | + float: right; | |
| 134 | + margin-top: 3px | |
| 135 | +} | |
| 136 | + | |
| 137 | +.maplibTcTimeMove { | |
| 138 | + width: 9px; | |
| 139 | + height: 18px; | |
| 140 | + background: url("../img/tools_menu.png") no-repeat scroll 0pt -32px | |
| 141 | + transparent; | |
| 142 | + float: left; | |
| 143 | + cursor: pointer; | |
| 144 | + margin-left: 137.5px; | |
| 145 | + margin-top: 0px; | |
| 146 | +} | |
| 147 | + | |
| 148 | +.maplibTcHide { | |
| 149 | + display: none; | |
| 150 | +} | |
| 151 | + | |
| 152 | +.maplibTcBtn_deskTop { | |
| 153 | + background: url(//api.map.baidu.com/images/bgs.gif) no-repeat | |
| 154 | + scroll 0px -271px transparent; | |
| 155 | + cursor: pointer; | |
| 156 | + height: 22px; | |
| 157 | + width: 73px; | |
| 158 | + z-index: 10; | |
| 159 | + position: absolute; | |
| 160 | +} | |
| 161 | + | |
| 162 | +.maplibTcBtn_mobile { | |
| 163 | + background: url(//api.map.baidu.com/images/traffic_bgs.png) | |
| 164 | + rgba(255, 255, 255, 0.8) no-repeat scroll -30px 0px; | |
| 165 | + border: 1px solid #AFAFAF; | |
| 166 | + background-size: 60px 30px; | |
| 167 | + cursor: pointer; | |
| 168 | + height: 30px; | |
| 169 | + width: 30px; | |
| 170 | + z-index: 10; | |
| 171 | + position: absolute; | |
| 172 | +} | |
| 173 | + | |
| 174 | +.maplibTcBtn_deskTop { | |
| 175 | + background-position: 0px -249px | |
| 176 | +} | |
| 177 | + | |
| 178 | +.maplibTcBtnOff_mobile { | |
| 179 | + background-position: 0px 0px; | |
| 180 | +} | |
| 181 | + | |
| 182 | +.maplibTcColon { | |
| 183 | + float: left; | |
| 184 | +} | |
| 185 | + | |
| 186 | +.maplibTcOn { | |
| 187 | + background: #E6EFF8; | |
| 188 | +} | |
| 189 | + | |
| 190 | +.maplibTcClose { | |
| 191 | + background: url("../img/tools_menu.png") no-repeat scroll 2px -19px | |
| 192 | + transparent; | |
| 193 | + border: 0 none; | |
| 194 | + cursor: pointer; | |
| 195 | + height: 12px; | |
| 196 | + position: absolute; | |
| 197 | + right: 7px; | |
| 198 | + top: 9px; | |
| 199 | + width: 15px; | |
| 200 | +} | |
| 201 | + | |
| 202 | +/*s--------------交通流量-----------------*/ | |
| 203 | +.maplibTfctr { | |
| 204 | + min-width: 9em; | |
| 205 | + height: 2.2em; | |
| 206 | + display: -webkit-box; | |
| 207 | + -webkit-box-align: center; | |
| 208 | + -webkit-border-radius: 0.3em; | |
| 209 | + border: .1em solid #989898; | |
| 210 | + -webkit-box-sizing: border-box; | |
| 211 | + background-color: #fff; | |
| 212 | + font-size: 14px; | |
| 213 | +} | |
| 214 | + | |
| 215 | +.maplibTfctrHide { | |
| 216 | + display: none; | |
| 217 | +} | |
| 218 | + | |
| 219 | +.maplibTfctr_c { | |
| 220 | + -webkit-box-flex: 1; | |
| 221 | +} | |
| 222 | + | |
| 223 | +.maplibTfctr_status { | |
| 224 | + width: 4em; | |
| 225 | + margin-right: .45em; | |
| 226 | +} | |
| 227 | + | |
| 228 | +.maplibTfctr_status span { | |
| 229 | + display: inline-block; | |
| 230 | + margin-left: .3em; | |
| 231 | + font-size: 14px; | |
| 232 | +} | |
| 233 | + | |
| 234 | +.maplibTfctr div,.maplibTfctr span { | |
| 235 | + -webkit-box-sizing: border-box; | |
| 236 | +} | |
| 237 | + | |
| 238 | +.maplibTfctr_l { | |
| 239 | + margin: 0 .15em; | |
| 240 | +} | |
| 241 | + | |
| 242 | +.maplibY { | |
| 243 | + background: #ffae00; | |
| 244 | +} | |
| 245 | + | |
| 246 | +.maplibR { | |
| 247 | + background: #ff0000; | |
| 248 | +} | |
| 249 | + | |
| 250 | +.maplibG { | |
| 251 | + background: #1fba00; | |
| 252 | +} | |
| 253 | 253 | /*e--------------交通流量-----------------*/ |
| 254 | 254 | \ No newline at end of file | ... | ... |
src/main/resources/static/assets/js/baidu/TextIconOverlay.js
| 1 | -/** | |
| 2 | - * @fileoverview 此类表示地图上的一个覆盖物，该覆盖物由文字和图标组成，从Overlay继承。 | |
| 3 | - * 主入口类是<a href="symbols/BMapLib.TextIconOverlay.html">TextIconOverlay</a>， | |
| 4 | - * 基于Baidu Map API 1.2。 | |
| 5 | - * | |
| 6 | - * @author Baidu Map Api Group | |
| 7 | - * @version 1.2 | |
| 8 | - */ | |
| 9 | - | |
| 10 | - | |
| 11 | - /** | |
| 12 | - * @namespace BMap的所有library类均放在BMapLib命名空间下 | |
| 13 | - */ | |
| 14 | -var BMapLib = window.BMapLib = BMapLib || {}; | |
| 15 | - | |
| 16 | -(function () { | |
| 17 | - | |
| 18 | - /** | |
| 19 | - * 声明baidu包 | |
| 20 | - */ | |
| 21 | - var T, | |
| 22 | - baidu = T = baidu || {version: "1.3.8"}; | |
| 23 | - | |
| 24 | - (function (){ | |
| 25 | - //提出guid，防止在与老版本Tangram混用时 | |
| 26 | - //在下一行错误的修改window[undefined] | |
| 27 | - baidu.guid = "$BAIDU$"; | |
| 28 | - | |
| 29 | - //Tangram可能被放在闭包中 | |
| 30 | - //一些页面级别唯一的属性，需要挂载在window[baidu.guid]上 | |
| 31 | - window[baidu.guid] = window[baidu.guid] || {}; | |
| 32 | - | |
| 33 | - /** | |
| 34 | - * @ignore | |
| 35 | - * @namespace baidu.dom 操作dom的方法。 | |
| 36 | - */ | |
| 37 | - baidu.dom = baidu.dom || {}; | |
| 38 | - | |
| 39 | - | |
| 40 | - /** | |
| 41 | - * 从文档中获取指定的DOM元素 | |
| 42 | - * @name baidu.dom.g | |
| 43 | - * @function | |
| 44 | - * @grammar baidu.dom.g(id) | |
| 45 | - * @param {string|HTMLElement} id 元素的id或DOM元素 | |
| 46 | - * @shortcut g,T.G | |
| 47 | - * @meta standard | |
| 48 | - * @see baidu.dom.q | |
| 49 | - * | |
| 50 | - * @returns {HTMLElement|null} 获取的元素，查找不到时返回null,如果参数不合法，直接返回参数 | |
| 51 | - */ | |
| 52 | - baidu.dom.g = function (id) { | |
| 53 | - if ('string' == typeof id || id instanceof String) { | |
| 54 | - return document.getElementById(id); | |
| 55 | - } else if (id && id.nodeName && (id.nodeType == 1 || id.nodeType == 9)) { | |
| 56 | - return id; | |
| 57 | - } | |
| 58 | - return null; | |
| 59 | - }; | |
| 60 | - | |
| 61 | - // 声明快捷方法 | |
| 62 | - baidu.g = baidu.G = baidu.dom.g; | |
| 63 | - | |
| 64 | - /** | |
| 65 | - * 获取目标元素所属的document对象 | |
| 66 | - * @name baidu.dom.getDocument | |
| 67 | - * @function | |
| 68 | - * @grammar baidu.dom.getDocument(element) | |
| 69 | - * @param {HTMLElement|string} element 目标元素或目标元素的id | |
| 70 | - * @meta standard | |
| 71 | - * @see baidu.dom.getWindow | |
| 72 | - * | |
| 73 | - * @returns {HTMLDocument} 目标元素所属的document对象 | |
| 74 | - */ | |
| 75 | - baidu.dom.getDocument = function (element) { | |
| 76 | - element = baidu.dom.g(element); | |
| 77 | - return element.nodeType == 9 ? element : element.ownerDocument || element.document; | |
| 78 | - }; | |
| 79 | - | |
| 80 | - /** | |
| 81 | - * @ignore | |
| 82 | - * @namespace baidu.lang 对语言层面的封装，包括类型判断、模块扩展、继承基类以及对象自定义事件的支持。 | |
| 83 | - */ | |
| 84 | - baidu.lang = baidu.lang || {}; | |
| 85 | - | |
| 86 | - /** | |
| 87 | - * 判断目标参数是否string类型或String对象 | |
| 88 | - * @name baidu.lang.isString | |
| 89 | - * @function | |
| 90 | - * @grammar baidu.lang.isString(source) | |
| 91 | - * @param {Any} source 目标参数 | |
| 92 | - * @shortcut isString | |
| 93 | - * @meta standard | |
| 94 | - * @see baidu.lang.isObject,baidu.lang.isNumber,baidu.lang.isArray,baidu.lang.isElement,baidu.lang.isBoolean,baidu.lang.isDate | |
| 95 | - * | |
| 96 | - * @returns {boolean} 类型判断结果 | |
| 97 | - */ | |
| 98 | - baidu.lang.isString = function (source) { | |
| 99 | - return '[object String]' == Object.prototype.toString.call(source); | |
| 100 | - }; | |
| 101 | - | |
| 102 | - // 声明快捷方法 | |
| 103 | - baidu.isString = baidu.lang.isString; | |
| 104 | - | |
| 105 | - /** | |
| 106 | - * 从文档中获取指定的DOM元素 | |
| 107 | - * **内部方法** | |
| 108 | - * | |
| 109 | - * @param {string|HTMLElement} id 元素的id或DOM元素 | |
| 110 | - * @meta standard | |
| 111 | - * @return {HTMLElement} DOM元素，如果不存在，返回null，如果参数不合法，直接返回参数 | |
| 112 | - */ | |
| 113 | - baidu.dom._g = function (id) { | |
| 114 | - if (baidu.lang.isString(id)) { | |
| 115 | - return document.getElementById(id); | |
| 116 | - } | |
| 117 | - return id; | |
| 118 | - }; | |
| 119 | - | |
| 120 | - // 声明快捷方法 | |
| 121 | - baidu._g = baidu.dom._g; | |
| 122 | - | |
| 123 | - /** | |
| 124 | - * @ignore | |
| 125 | - * @namespace baidu.browser 判断浏览器类型和特性的属性。 | |
| 126 | - */ | |
| 127 | - baidu.browser = baidu.browser || {}; | |
| 128 | - | |
| 129 | - if (/msie (\d+\.\d)/i.test(navigator.userAgent)) { | |
| 130 | - //IE 8下，以documentMode为准 | |
| 131 | - //在百度模板中，可能会有$，防止冲突，将$1 写成 \x241 | |
| 132 | - /** | |
| 133 | - * 判断是否为ie浏览器 | |
| 134 | - * @property ie ie版本号 | |
| 135 | - * @grammar baidu.browser.ie | |
| 136 | - * @meta standard | |
| 137 | - * @shortcut ie | |
| 138 | - * @see baidu.browser.firefox,baidu.browser.safari,baidu.browser.opera,baidu.browser.chrome,baidu.browser.maxthon | |
| 139 | - */ | |
| 140 | - baidu.browser.ie = baidu.ie = document.documentMode || + RegExp['\x241']; | |
| 141 | - } | |
| 142 | - | |
| 143 | - /** | |
| 144 | - * 获取目标元素的computed style值。如果元素的样式值不能被浏览器计算，则会返回空字符串（IE） | |
| 145 | - * | |
| 146 | - * @author berg | |
| 147 | - * @name baidu.dom.getComputedStyle | |
| 148 | - * @function | |
| 149 | - * @grammar baidu.dom.getComputedStyle(element, key) | |
| 150 | - * @param {HTMLElement|string} element 目标元素或目标元素的id | |
| 151 | - * @param {string} key 要获取的样式名 | |
| 152 | - * | |
| 153 | - * @see baidu.dom.getStyle | |
| 154 | - * | |
| 155 | - * @returns {string} 目标元素的computed style值 | |
| 156 | - */ | |
| 157 | - | |
| 158 | - baidu.dom.getComputedStyle = function(element, key){ | |
| 159 | - element = baidu.dom._g(element); | |
| 160 | - var doc = baidu.dom.getDocument(element), | |
| 161 | - styles; | |
| 162 | - if (doc.defaultView && doc.defaultView.getComputedStyle) { | |
| 163 | - styles = doc.defaultView.getComputedStyle(element, null); | |
| 164 | - if (styles) { | |
| 165 | - return styles[key] || styles.getPropertyValue(key); | |
| 166 | - } | |
| 167 | - } | |
| 168 | - return ''; | |
| 169 | - }; | |
| 170 | - | |
| 171 | - /** | |
| 172 | - * 提供给setStyle与getStyle使用 | |
| 173 | - */ | |
| 174 | - baidu.dom._styleFixer = baidu.dom._styleFixer || {}; | |
| 175 | - | |
| 176 | - /** | |
| 177 | - * 提供给setStyle与getStyle使用 | |
| 178 | - */ | |
| 179 | - baidu.dom._styleFilter = baidu.dom._styleFilter || []; | |
| 180 | - | |
| 181 | - /** | |
| 182 | - * 为获取和设置样式的过滤器 | |
| 183 | - * @private | |
| 184 | - * @meta standard | |
| 185 | - */ | |
| 186 | - baidu.dom._styleFilter.filter = function (key, value, method) { | |
| 187 | - for (var i = 0, filters = baidu.dom._styleFilter, filter; filter = filters[i]; i++) { | |
| 188 | - if (filter = filter[method]) { | |
| 189 | - value = filter(key, value); | |
| 190 | - } | |
| 191 | - } | |
| 192 | - return value; | |
| 193 | - }; | |
| 194 | - | |
| 195 | - /** | |
| 196 | - * @ignore | |
| 197 | - * @namespace baidu.string 操作字符串的方法。 | |
| 198 | - */ | |
| 199 | - baidu.string = baidu.string || {}; | |
| 200 | - | |
| 201 | - /** | |
| 202 | - * 将目标字符串进行驼峰化处理 | |
| 203 | - * @name baidu.string.toCamelCase | |
| 204 | - * @function | |
| 205 | - * @grammar baidu.string.toCamelCase(source) | |
| 206 | - * @param {string} source 目标字符串 | |
| 207 | - * @remark | |
| 208 | - * 支持单词以“-_”分隔 | |
| 209 | - * @meta standard | |
| 210 | - * | |
| 211 | - * @returns {string} 驼峰化处理后的字符串 | |
| 212 | - */ | |
| 213 | - baidu.string.toCamelCase = function (source) { | |
| 214 | - //提前判断，提高getStyle等的效率 thanks xianwei | |
| 215 | - if (source.indexOf('-') < 0 && source.indexOf('_') < 0) { | |
| 216 | - return source; | |
| 217 | - } | |
| 218 | - return source.replace(/[-_][^-_]/g, function (match) { | |
| 219 | - return match.charAt(1).toUpperCase(); | |
| 220 | - }); | |
| 221 | - }; | |
| 222 | - | |
| 223 | - /** | |
| 224 | - * 获取目标元素的样式值 | |
| 225 | - * @name baidu.dom.getStyle | |
| 226 | - * @function | |
| 227 | - * @grammar baidu.dom.getStyle(element, key) | |
| 228 | - * @param {HTMLElement|string} element 目标元素或目标元素的id | |
| 229 | - * @param {string} key 要获取的样式名 | |
| 230 | - * @remark | |
| 231 | - * | |
| 232 | - * 为了精简代码，本模块默认不对任何浏览器返回值进行归一化处理（如使用getStyle时，不同浏览器下可能返回rgb颜色或hex颜色），也不会修复浏览器的bug和差异性（如设置IE的float属性叫styleFloat，firefox则是cssFloat）。<br /> | |
| 233 | - * baidu.dom._styleFixer和baidu.dom._styleFilter可以为本模块提供支持。<br /> | |
| 234 | - * 其中_styleFilter能对颜色和px进行归一化处理，_styleFixer能对display，float，opacity，textOverflow的浏览器兼容性bug进行处理。 | |
| 235 | - * @shortcut getStyle | |
| 236 | - * @meta standard | |
| 237 | - * @see baidu.dom.setStyle,baidu.dom.setStyles, baidu.dom.getComputedStyle | |
| 238 | - * | |
| 239 | - * @returns {string} 目标元素的样式值 | |
| 240 | - */ | |
| 241 | - baidu.dom.getStyle = function (element, key) { | |
| 242 | - var dom = baidu.dom; | |
| 243 | - | |
| 244 | - element = dom.g(element); | |
| 245 | - key = baidu.string.toCamelCase(key); | |
| 246 | - //computed style, then cascaded style, then explicitly set style. | |
| 247 | - var value = element.style[key] || | |
| 248 | - (element.currentStyle ? element.currentStyle[key] : "") || | |
| 249 | - dom.getComputedStyle(element, key); | |
| 250 | - | |
| 251 | - // 在取不到值的时候，用fixer进行修正 | |
| 252 | - if (!value) { | |
| 253 | - var fixer = dom._styleFixer[key]; | |
| 254 | - if(fixer){ | |
| 255 | - value = fixer.get ? fixer.get(element) : baidu.dom.getStyle(element, fixer); | |
| 256 | - } | |
| 257 | - } | |
| 258 | - | |
| 259 | - /* 检查结果过滤器 */ | |
| 260 | - if (fixer = dom._styleFilter) { | |
| 261 | - value = fixer.filter(key, value, 'get'); | |
| 262 | - } | |
| 263 | - | |
| 264 | - return value; | |
| 265 | - }; | |
| 266 | - | |
| 267 | - // 声明快捷方法 | |
| 268 | - baidu.getStyle = baidu.dom.getStyle; | |
| 269 | - | |
| 270 | - | |
| 271 | - if (/opera\/(\d+\.\d)/i.test(navigator.userAgent)) { | |
| 272 | - /** | |
| 273 | - * 判断是否为opera浏览器 | |
| 274 | - * @property opera opera版本号 | |
| 275 | - * @grammar baidu.browser.opera | |
| 276 | - * @meta standard | |
| 277 | - * @see baidu.browser.ie,baidu.browser.firefox,baidu.browser.safari,baidu.browser.chrome | |
| 278 | - */ | |
| 279 | - baidu.browser.opera = + RegExp['\x241']; | |
| 280 | - } | |
| 281 | - | |
| 282 | - /** | |
| 283 | - * 判断是否为webkit内核 | |
| 284 | - * @property isWebkit | |
| 285 | - * @grammar baidu.browser.isWebkit | |
| 286 | - * @meta standard | |
| 287 | - * @see baidu.browser.isGecko | |
| 288 | - */ | |
| 289 | - baidu.browser.isWebkit = /webkit/i.test(navigator.userAgent); | |
| 290 | - | |
| 291 | - /** | |
| 292 | - * 判断是否为gecko内核 | |
| 293 | - * @property isGecko | |
| 294 | - * @grammar baidu.browser.isGecko | |
| 295 | - * @meta standard | |
| 296 | - * @see baidu.browser.isWebkit | |
| 297 | - */ | |
| 298 | - baidu.browser.isGecko = /gecko/i.test(navigator.userAgent) && !/like gecko/i.test(navigator.userAgent); | |
| 299 | - | |
| 300 | - /** | |
| 301 | - * 判断是否严格标准的渲染模式 | |
| 302 | - * @property isStrict | |
| 303 | - * @grammar baidu.browser.isStrict | |
| 304 | - * @meta standard | |
| 305 | - */ | |
| 306 | - baidu.browser.isStrict = document.compatMode == "CSS1Compat"; | |
| 307 | - | |
| 308 | - /** | |
| 309 | - * 获取目标元素相对于整个文档左上角的位置 | |
| 310 | - * @name baidu.dom.getPosition | |
| 311 | - * @function | |
| 312 | - * @grammar baidu.dom.getPosition(element) | |
| 313 | - * @param {HTMLElement|string} element 目标元素或目标元素的id | |
| 314 | - * @meta standard | |
| 315 | - * | |
| 316 | - * @returns {Object} 目标元素的位置，键值为top和left的Object。 | |
| 317 | - */ | |
| 318 | - baidu.dom.getPosition = function (element) { | |
| 319 | - element = baidu.dom.g(element); | |
| 320 | - var doc = baidu.dom.getDocument(element), | |
| 321 | - browser = baidu.browser, | |
| 322 | - getStyle = baidu.dom.getStyle, | |
| 323 | - // Gecko 1.9版本以下用getBoxObjectFor计算位置 | |
| 324 | - // 但是某些情况下是有bug的 | |
| 325 | - // 对于这些有bug的情况 | |
| 326 | - // 使用递归查找的方式 | |
| 327 | - BUGGY_GECKO_BOX_OBJECT = browser.isGecko > 0 && | |
| 328 | - doc.getBoxObjectFor && | |
| 329 | - getStyle(element, 'position') == 'absolute' && | |
| 330 | - (element.style.top === '' || element.style.left === ''), | |
| 331 | - pos = {"left":0,"top":0}, | |
| 332 | - viewport = (browser.ie && !browser.isStrict) ? doc.body : doc.documentElement, | |
| 333 | - parent, | |
| 334 | - box; | |
| 335 | - | |
| 336 | - if(element == viewport){ | |
| 337 | - return pos; | |
| 338 | - } | |
| 339 | - | |
| 340 | - if(element.getBoundingClientRect){ // IE and Gecko 1.9+ | |
| 341 | - | |
| 342 | - //当HTML或者BODY有border width时, 原生的getBoundingClientRect返回值是不符合预期的 | |
| 343 | - //考虑到通常情况下 HTML和BODY的border只会设成0px,所以忽略该问题. | |
| 344 | - box = element.getBoundingClientRect(); | |
| 345 | - | |
| 346 | - pos.left = Math.floor(box.left) + Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft); | |
| 347 | - pos.top = Math.floor(box.top) + Math.max(doc.documentElement.scrollTop, doc.body.scrollTop); | |
| 348 | - | |
| 349 | - // IE会给HTML元素添加一个border，默认是medium（2px） | |
| 350 | - // 但是在IE 6 7 的怪异模式下，可以被html { border: 0; } 这条css规则覆盖 | |
| 351 | - // 在IE7的标准模式下，border永远是2px，这个值通过clientLeft 和 clientTop取得 | |
| 352 | - // 但是。。。在IE 6 7的怪异模式，如果用户使用css覆盖了默认的medium | |
| 353 | - // clientTop和clientLeft不会更新 | |
| 354 | - pos.left -= doc.documentElement.clientLeft; | |
| 355 | - pos.top -= doc.documentElement.clientTop; | |
| 356 | - | |
| 357 | - var htmlDom = doc.body, | |
| 358 | - // 在这里，不使用element.style.borderLeftWidth，只有computedStyle是可信的 | |
| 359 | - htmlBorderLeftWidth = parseInt(getStyle(htmlDom, 'borderLeftWidth')), | |
| 360 | - htmlBorderTopWidth = parseInt(getStyle(htmlDom, 'borderTopWidth')); | |
| 361 | - if(browser.ie && !browser.isStrict){ | |
| 362 | - pos.left -= isNaN(htmlBorderLeftWidth) ? 2 : htmlBorderLeftWidth; | |
| 363 | - pos.top -= isNaN(htmlBorderTopWidth) ? 2 : htmlBorderTopWidth; | |
| 364 | - } | |
| 365 | - } else { | |
| 366 | - // safari/opera/firefox | |
| 367 | - parent = element; | |
| 368 | - | |
| 369 | - do { | |
| 370 | - pos.left += parent.offsetLeft; | |
| 371 | - pos.top += parent.offsetTop; | |
| 372 | - | |
| 373 | - // safari里面，如果遍历到了一个fixed的元素，后面的offset都不准了 | |
| 374 | - if (browser.isWebkit > 0 && getStyle(parent, 'position') == 'fixed') { | |
| 375 | - pos.left += doc.body.scrollLeft; | |
| 376 | - pos.top += doc.body.scrollTop; | |
| 377 | - break; | |
| 378 | - } | |
| 379 | - | |
| 380 | - parent = parent.offsetParent; | |
| 381 | - } while (parent && parent != element); | |
| 382 | - | |
| 383 | - // 对body offsetTop的修正 | |
| 384 | - if(browser.opera > 0 || (browser.isWebkit > 0 && getStyle(element, 'position') == 'absolute')){ | |
| 385 | - pos.top -= doc.body.offsetTop; | |
| 386 | - } | |
| 387 | - | |
| 388 | - // 计算除了body的scroll | |
| 389 | - parent = element.offsetParent; | |
| 390 | - while (parent && parent != doc.body) { | |
| 391 | - pos.left -= parent.scrollLeft; | |
| 392 | - // see https://bugs.opera.com/show_bug.cgi?id=249965 | |
| 393 | - if (!browser.opera || parent.tagName != 'TR') { | |
| 394 | - pos.top -= parent.scrollTop; | |
| 395 | - } | |
| 396 | - parent = parent.offsetParent; | |
| 397 | - } | |
| 398 | - } | |
| 399 | - | |
| 400 | - return pos; | |
| 401 | - }; | |
| 402 | - | |
| 403 | - /** | |
| 404 | - * @ignore | |
| 405 | - * @namespace baidu.event 屏蔽浏览器差异性的事件封装。 | |
| 406 | - * @property target 事件的触发元素 | |
| 407 | - * @property pageX 鼠标事件的鼠标x坐标 | |
| 408 | - * @property pageY 鼠标事件的鼠标y坐标 | |
| 409 | - * @property keyCode 键盘事件的键值 | |
| 410 | - */ | |
| 411 | - baidu.event = baidu.event || {}; | |
| 412 | - | |
| 413 | - /** | |
| 414 | - * 事件监听器的存储表 | |
| 415 | - * @private | |
| 416 | - * @meta standard | |
| 417 | - */ | |
| 418 | - baidu.event._listeners = baidu.event._listeners || []; | |
| 419 | - | |
| 420 | - /** | |
| 421 | - * 为目标元素添加事件监听器 | |
| 422 | - * @name baidu.event.on | |
| 423 | - * @function | |
| 424 | - * @grammar baidu.event.on(element, type, listener) | |
| 425 | - * @param {HTMLElement|string|window} element 目标元素或目标元素id | |
| 426 | - * @param {string} type 事件类型 | |
| 427 | - * @param {Function} listener 需要添加的监听器 | |
| 428 | - * @remark | |
| 429 | - * | |
| 430 | - 1. 不支持跨浏览器的鼠标滚轮事件监听器添加<br> | |
| 431 | - 2. 改方法不为监听器灌入事件对象，以防止跨iframe事件挂载的事件对象获取失败 | |
| 432 | - | |
| 433 | - * @shortcut on | |
| 434 | - * @meta standard | |
| 435 | - * @see baidu.event.un | |
| 436 | - * | |
| 437 | - * @returns {HTMLElement|window} 目标元素 | |
| 438 | - */ | |
| 439 | - baidu.event.on = function (element, type, listener) { | |
| 440 | - type = type.replace(/^on/i, ''); | |
| 441 | - element = baidu.dom._g(element); | |
| 442 | - | |
| 443 | - var realListener = function (ev) { | |
| 444 | - // 1. 这里不支持EventArgument, 原因是跨frame的事件挂载 | |
| 445 | - // 2. element是为了修正this | |
| 446 | - listener.call(element, ev); | |
| 447 | - }, | |
| 448 | - lis = baidu.event._listeners, | |
| 449 | - filter = baidu.event._eventFilter, | |
| 450 | - afterFilter, | |
| 451 | - realType = type; | |
| 452 | - type = type.toLowerCase(); | |
| 453 | - // filter过滤 | |
| 454 | - if(filter && filter[type]){ | |
| 455 | - afterFilter = filter[type](element, type, realListener); | |
| 456 | - realType = afterFilter.type; | |
| 457 | - realListener = afterFilter.listener; | |
| 458 | - } | |
| 459 | - | |
| 460 | - // 事件监听器挂载 | |
| 461 | - if (element.addEventListener) { | |
| 462 | - element.addEventListener(realType, realListener, false); | |
| 463 | - } else if (element.attachEvent) { | |
| 464 | - element.attachEvent('on' + realType, realListener); | |
| 465 | - } | |
| 466 | - | |
| 467 | - // 将监听器存储到数组中 | |
| 468 | - lis[lis.length] = [element, type, listener, realListener, realType]; | |
| 469 | - return element; | |
| 470 | - }; | |
| 471 | - | |
| 472 | - // 声明快捷方法 | |
| 473 | - baidu.on = baidu.event.on; | |
| 474 | - | |
| 475 | - /** | |
| 476 | - * 返回一个当前页面的唯一标识字符串。 | |
| 477 | - * @name baidu.lang.guid | |
| 478 | - * @function | |
| 479 | - * @grammar baidu.lang.guid() | |
| 480 | - * @version 1.1.1 | |
| 481 | - * @meta standard | |
| 482 | - * | |
| 483 | - * @returns {String} 当前页面的唯一标识字符串 | |
| 484 | - */ | |
| 485 | - | |
| 486 | - (function(){ | |
| 487 | - //不直接使用window，可以提高3倍左右性能 | |
| 488 | - var guid = window[baidu.guid]; | |
| 489 | - | |
| 490 | - baidu.lang.guid = function() { | |
| 491 | - return "TANGRAM__" + (guid._counter ++).toString(36); | |
| 492 | - }; | |
| 493 | - | |
| 494 | - guid._counter = guid._counter || 1; | |
| 495 | - })(); | |
| 496 | - | |
| 497 | - /** | |
| 498 | - * 所有类的实例的容器 | |
| 499 | - * key为每个实例的guid | |
| 500 | - * @meta standard | |
| 501 | - */ | |
| 502 | - | |
| 503 | - window[baidu.guid]._instances = window[baidu.guid]._instances || {}; | |
| 504 | - | |
| 505 | - /** | |
| 506 | - * 判断目标参数是否为function或Function实例 | |
| 507 | - * @name baidu.lang.isFunction | |
| 508 | - * @function | |
| 509 | - * @grammar baidu.lang.isFunction(source) | |
| 510 | - * @param {Any} source 目标参数 | |
| 511 | - * @version 1.2 | |
| 512 | - * @see baidu.lang.isString,baidu.lang.isObject,baidu.lang.isNumber,baidu.lang.isArray,baidu.lang.isElement,baidu.lang.isBoolean,baidu.lang.isDate | |
| 513 | - * @meta standard | |
| 514 | - * @returns {boolean} 类型判断结果 | |
| 515 | - */ | |
| 516 | - baidu.lang.isFunction = function (source) { | |
| 517 | - // chrome下,'function' == typeof /a/ 为true. | |
| 518 | - return '[object Function]' == Object.prototype.toString.call(source); | |
| 519 | - }; | |
| 520 | - | |
| 521 | - /** | |
| 522 | - * | |
| 523 | - * @ignore | |
| 524 | - * @class Tangram继承机制提供的一个基类，用户可以通过继承baidu.lang.Class来获取它的属性及方法。 | |
| 525 | - * @name baidu.lang.Class | |
| 526 | - * @grammar baidu.lang.Class(guid) | |
| 527 | - * @param {string} guid 对象的唯一标识 | |
| 528 | - * @meta standard | |
| 529 | - * @remark baidu.lang.Class和它的子类的实例均包含一个全局唯一的标识guid。guid是在构造函数中生成的，因此，继承自baidu.lang.Class的类应该直接或者间接调用它的构造函数。<br>baidu.lang.Class的构造函数中产生guid的方式可以保证guid的唯一性，及每个实例都有一个全局唯一的guid。 | |
| 530 | - * @meta standard | |
| 531 | - * @see baidu.lang.inherits,baidu.lang.Event | |
| 532 | - */ | |
| 533 | - baidu.lang.Class = function(guid) { | |
| 534 | - this.guid = guid || baidu.lang.guid(); | |
| 535 | - window[baidu.guid]._instances[this.guid] = this; | |
| 536 | - }; | |
| 537 | - window[baidu.guid]._instances = window[baidu.guid]._instances || {}; | |
| 538 | - | |
| 539 | - /** | |
| 540 | - * 释放对象所持有的资源，主要是自定义事件。 | |
| 541 | - * @name dispose | |
| 542 | - * @grammar obj.dispose() | |
| 543 | - */ | |
| 544 | - baidu.lang.Class.prototype.dispose = function(){ | |
| 545 | - delete window[baidu.guid]._instances[this.guid]; | |
| 546 | - | |
| 547 | - for(var property in this){ | |
| 548 | - if (!baidu.lang.isFunction(this[property])) { | |
| 549 | - delete this[property]; | |
| 550 | - } | |
| 551 | - } | |
| 552 | - this.disposed = true; | |
| 553 | - }; | |
| 554 | - | |
| 555 | - /** | |
| 556 | - * 重载了默认的toString方法，使得返回信息更加准确一些。 | |
| 557 | - * @return {string} 对象的String表示形式 | |
| 558 | - */ | |
| 559 | - baidu.lang.Class.prototype.toString = function(){ | |
| 560 | - return "[object " + (this._className || "Object" ) + "]"; | |
| 561 | - }; | |
| 562 | - | |
| 563 | - /** | |
| 564 | - * @ignore | |
| 565 | - * @class 自定义的事件对象。 | |
| 566 | - * @name baidu.lang.Event | |
| 567 | - * @grammar baidu.lang.Event(type[, target]) | |
| 568 | - * @param {string} type 事件类型名称。为了方便区分事件和一个普通的方法，事件类型名称必须以"on"(小写)开头。 | |
| 569 | - * @param {Object} [target]触发事件的对象 | |
| 570 | - * @meta standard | |
| 571 | - * @remark 引入该模块，会自动为Class引入3个事件扩展方法：addEventListener、removeEventListener和dispatchEvent。 | |
| 572 | - * @meta standard | |
| 573 | - * @see baidu.lang.Class | |
| 574 | - */ | |
| 575 | - baidu.lang.Event = function (type, target) { | |
| 576 | - this.type = type; | |
| 577 | - this.returnValue = true; | |
| 578 | - this.target = target || null; | |
| 579 | - this.currentTarget = null; | |
| 580 | - }; | |
| 581 | - | |
| 582 | - /** | |
| 583 | - * 注册对象的事件监听器。引入baidu.lang.Event后，Class的子类实例才会获得该方法。 | |
| 584 | - * @grammar obj.addEventListener(type, handlers[, key]) | |
| 585 | - * @param {string} type 自定义事件的名称 | |
| 586 | - * @param {Function} handler 自定义事件被触发时应该调用的回调函数 | |
| 587 | - * @param {string} [key] 为事件监听函数指定的名称，可在移除时使用。如果不提供，方法会默认为它生成一个全局唯一的key。 | |
| 588 | - * @remark 事件类型区分大小写。如果自定义事件名称不是以小写"on"开头，该方法会给它加上"on"再进行判断，即"click"和"onclick"会被认为是同一种事件。 | |
| 589 | - */ | |
| 590 | - baidu.lang.Class.prototype.addEventListener = function (type, handler, key) { | |
| 591 | - if (!baidu.lang.isFunction(handler)) { | |
| 592 | - return; | |
| 593 | - } | |
| 594 | - | |
| 595 | - !this.__listeners && (this.__listeners = {}); | |
| 596 | - | |
| 597 | - var t = this.__listeners, id; | |
| 598 | - if (typeof key == "string" && key) { | |
| 599 | - if (/[^\w\-]/.test(key)) { | |
| 600 | - throw("nonstandard key:" + key); | |
| 601 | - } else { | |
| 602 | - handler.hashCode = key; | |
| 603 | - id = key; | |
| 604 | - } | |
| 605 | - } | |
| 606 | - type.indexOf("on") != 0 && (type = "on" + type); | |
| 607 | - | |
| 608 | - typeof t[type] != "object" && (t[type] = {}); | |
| 609 | - id = id || baidu.lang.guid(); | |
| 610 | - handler.hashCode = id; | |
| 611 | - t[type][id] = handler; | |
| 612 | - }; | |
| 613 | - | |
| 614 | - /** | |
| 615 | - * 移除对象的事件监听器。引入baidu.lang.Event后，Class的子类实例才会获得该方法。 | |
| 616 | - * @grammar obj.removeEventListener(type, handlers) | |
| 617 | - * @param {string} type 事件类型 | |
| 618 | - * @param {Function|string} handler 要移除的事件监听函数或者监听函数的key | |
| 619 | - * @remark 如果第二个参数handler没有被绑定到对应的自定义事件中，什么也不做。 | |
| 620 | - */ | |
| 621 | - baidu.lang.Class.prototype.removeEventListener = function (type, handler) { | |
| 622 | - if (typeof handler != "undefined") { | |
| 623 | - if ( (baidu.lang.isFunction(handler) && ! (handler = handler.hashCode)) | |
| 624 | - || (! baidu.lang.isString(handler)) | |
| 625 | - ){ | |
| 626 | - return; | |
| 627 | - } | |
| 628 | - } | |
| 629 | - | |
| 630 | - !this.__listeners && (this.__listeners = {}); | |
| 631 | - | |
| 632 | - type.indexOf("on") != 0 && (type = "on" + type); | |
| 633 | - | |
| 634 | - var t = this.__listeners; | |
| 635 | - if (!t[type]) { | |
| 636 | - return; | |
| 637 | - } | |
| 638 | - if (typeof handler != "undefined") { | |
| 639 | - t[type][handler] && delete t[type][handler]; | |
| 640 | - } else { | |
| 641 | - for(var guid in t[type]){ | |
| 642 | - delete t[type][guid]; | |
| 643 | - } | |
| 644 | - } | |
| 645 | - }; | |
| 646 | - | |
| 647 | - /** | |
| 648 | - * 派发自定义事件，使得绑定到自定义事件上面的函数都会被执行。引入baidu.lang.Event后，Class的子类实例才会获得该方法。 | |
| 649 | - * @grammar obj.dispatchEvent(event, options) | |
| 650 | - * @param {baidu.lang.Event|String} event Event对象，或事件名称(1.1.1起支持) | |
| 651 | - * @param {Object} options 扩展参数,所含属性键值会扩展到Event对象上(1.2起支持) | |
| 652 | - * @remark 处理会调用通过addEventListenr绑定的自定义事件回调函数之外，还会调用直接绑定到对象上面的自定义事件。例如：<br> | |
| 653 | - myobj.onMyEvent = function(){}<br> | |
| 654 | - myobj.addEventListener("onMyEvent", function(){}); | |
| 655 | - */ | |
| 656 | - baidu.lang.Class.prototype.dispatchEvent = function (event, options) { | |
| 657 | - if (baidu.lang.isString(event)) { | |
| 658 | - event = new baidu.lang.Event(event); | |
| 659 | - } | |
| 660 | - !this.__listeners && (this.__listeners = {}); | |
| 661 | - | |
| 662 | - // 20100603 添加本方法的第二个参数，将 options extend到event中去传递 | |
| 663 | - options = options || {}; | |
| 664 | - for (var i in options) { | |
| 665 | - event[i] = options[i]; | |
| 666 | - } | |
| 667 | - | |
| 668 | - var i, t = this.__listeners, p = event.type; | |
| 669 | - event.target = event.target || this; | |
| 670 | - event.currentTarget = this; | |
| 671 | - | |
| 672 | - p.indexOf("on") != 0 && (p = "on" + p); | |
| 673 | - | |
| 674 | - baidu.lang.isFunction(this[p]) && this[p].apply(this, arguments); | |
| 675 | - | |
| 676 | - if (typeof t[p] == "object") { | |
| 677 | - for (i in t[p]) { | |
| 678 | - t[p][i].apply(this, arguments); | |
| 679 | - } | |
| 680 | - } | |
| 681 | - return event.returnValue; | |
| 682 | - }; | |
| 683 | - | |
| 684 | - | |
| 685 | - baidu.lang.inherits = function (subClass, superClass, className) { | |
| 686 | - var key, proto, | |
| 687 | - selfProps = subClass.prototype, | |
| 688 | - clazz = new Function(); | |
| 689 | - | |
| 690 | - clazz.prototype = superClass.prototype; | |
| 691 | - proto = subClass.prototype = new clazz(); | |
| 692 | - for (key in selfProps) { | |
| 693 | - proto[key] = selfProps[key]; | |
| 694 | - } | |
| 695 | - subClass.prototype.constructor = subClass; | |
| 696 | - subClass.superClass = superClass.prototype; | |
| 697 | - | |
| 698 | - // 类名标识，兼容Class的toString，基本没用 | |
| 699 | - if ("string" == typeof className) { | |
| 700 | - proto._className = className; | |
| 701 | - } | |
| 702 | - }; | |
| 703 | - // 声明快捷方法 | |
| 704 | - baidu.inherits = baidu.lang.inherits; | |
| 705 | - })(); | |
| 706 | - | |
| 707 | - | |
| 708 | - /** | |
| 709 | - | |
| 710 | - * 图片的路径 | |
| 711 | - | |
| 712 | - * @private | |
| 713 | - * @type {String} | |
| 714 | - | |
| 715 | - */ | |
| 716 | - var _IMAGE_PATH = 'http://api.map.baidu.com/library/TextIconOverlay/1.2/src/images/m'; | |
| 717 | - | |
| 718 | - /** | |
| 719 | - | |
| 720 | - * 图片的后缀名 | |
| 721 | - | |
| 722 | - * @private | |
| 723 | - * @type {String} | |
| 724 | - | |
| 725 | - */ | |
| 726 | - var _IMAGE_EXTENSION = 'png'; | |
| 727 | - | |
| 728 | - /** | |
| 729 | - *@exports TextIconOverlay as BMapLib.TextIconOverlay | |
| 730 | - */ | |
| 731 | - var TextIconOverlay = | |
| 732 | - /** | |
| 733 | - * TextIconOverlay | |
| 734 | - * @class 此类表示地图上的一个覆盖物，该覆盖物由文字和图标组成，从Overlay继承。文字通常是数字（0-9）或字母（A-Z ），而文字与图标之间有一定的映射关系。 | |
| 735 | - *该覆盖物适用于以下类似的场景：需要在地图上添加一系列覆盖物，这些覆盖物之间用不同的图标和文字来区分，文字可能表示了该覆盖物的某一属性值，根据该文字和一定的映射关系，自动匹配相应颜色和大小的图标。 | |
| 736 | - * | |
| 737 | - *@constructor | |
| 738 | - *@param {Point} position 表示一个经纬度坐标位置。 | |
| 739 | - *@param {String} text 表示该覆盖物显示的文字信息。 | |
| 740 | - *@param {Json Object} options 可选参数，可选项包括：<br /> | |
| 741 | - *"<b>styles</b>":{Array<IconStyle>} 一组图标风格。单个图表风格包括以下几个属性：<br /> | |
| 742 | - * url {String} 图片的url地址。(必选)<br /> | |
| 743 | - * size {Size} 图片的大小。（必选）<br /> | |
| 744 | - * anchor {Size} 图标定位在地图上的位置相对于图标左上角的偏移值，默认偏移值为图标的中心位置。（可选）<br /> | |
| 745 | - * offset {Size} 图片相对于可视区域的偏移值，此功能的作用等同于CSS中的background-position属性。（可选）<br /> | |
| 746 | - * textSize {Number} 文字的大小。（可选，默认10）<br /> | |
| 747 | - * textColor {String} 文字的颜色。（可选，默认black）<br /> | |
| 748 | - */ | |
| 749 | - BMapLib.TextIconOverlay = function(position, text, options){ | |
| 750 | - this._position = position; | |
| 751 | - this._text = text; | |
| 752 | - this._options = options || {}; | |
| 753 | - this._styles = this._options['styles'] || []; | |
| 754 | - (!this._styles.length) && this._setupDefaultStyles(); | |
| 755 | - }; | |
| 756 | - | |
| 757 | - T.lang.inherits(TextIconOverlay, BMap.Overlay, "TextIconOverlay"); | |
| 758 | - | |
| 759 | - TextIconOverlay.prototype._setupDefaultStyles = function(){ | |
| 760 | - var sizes = [53, 56, 66, 78, 90]; | |
| 761 | - for(var i = 0, size; size = sizes[i]; i++){ | |
| 762 | - this._styles.push({ | |
| 763 | - url:_IMAGE_PATH + i + '.' + _IMAGE_EXTENSION, | |
| 764 | - size: new BMap.Size(size, size) | |
| 765 | - }); | |
| 766 | - }//for循环的简洁写法 | |
| 767 | - }; | |
| 768 | - | |
| 769 | - /** | |
| 770 | - *继承Overlay的intialize方法，自定义覆盖物时必须。 | |
| 771 | - *@param {Map} map BMap.Map的实例化对象。 | |
| 772 | - *@return {HTMLElement} 返回覆盖物对应的HTML元素。 | |
| 773 | - */ | |
| 774 | - TextIconOverlay.prototype.initialize = function(map){ | |
| 775 | - this._map = map; | |
| 776 | - | |
| 777 | - this._domElement = document.createElement('div'); | |
| 778 | - this._updateCss(); | |
| 779 | - this._updateText(); | |
| 780 | - this._updatePosition(); | |
| 781 | - | |
| 782 | - this._bind(); | |
| 783 | - | |
| 784 | - this._map.getPanes().markerMouseTarget.appendChild(this._domElement); | |
| 785 | - return this._domElement; | |
| 786 | - }; | |
| 787 | - | |
| 788 | - /** | |
| 789 | - *继承Overlay的draw方法，自定义覆盖物时必须。 | |
| 790 | - *@return 无返回值。 | |
| 791 | - */ | |
| 792 | - TextIconOverlay.prototype.draw = function(){ | |
| 793 | - this._map && this._updatePosition(); | |
| 794 | - }; | |
| 795 | - | |
| 796 | - /** | |
| 797 | - *获取该覆盖物上的文字。 | |
| 798 | - *@return {String} 该覆盖物上的文字。 | |
| 799 | - */ | |
| 800 | - TextIconOverlay.prototype.getText = function(){ | |
| 801 | - return this._text; | |
| 802 | - }; | |
| 803 | - | |
| 804 | - /** | |
| 805 | - *设置该覆盖物上的文字。 | |
| 806 | - *@param {String} text 要设置的文字，通常是字母A-Z或数字0-9。 | |
| 807 | - *@return 无返回值。 | |
| 808 | - */ | |
| 809 | - TextIconOverlay.prototype.setText = function(text){ | |
| 810 | - if(text && (!this._text || (this._text.toString() != text.toString()))){ | |
| 811 | - this._text = text; | |
| 812 | - this._updateText(); | |
| 813 | - this._updateCss(); | |
| 814 | - this._updatePosition(); | |
| 815 | - } | |
| 816 | - }; | |
| 817 | - | |
| 818 | - /** | |
| 819 | - *获取该覆盖物的位置。 | |
| 820 | - *@return {Point} 该覆盖物的经纬度坐标。 | |
| 821 | - */ | |
| 822 | - TextIconOverlay.prototype.getPosition = function () { | |
| 823 | - return this._position; | |
| 824 | - }; | |
| 825 | - | |
| 826 | - /** | |
| 827 | - *设置该覆盖物的位置。 | |
| 828 | - *@param {Point} position 要设置的经纬度坐标。 | |
| 829 | - *@return 无返回值。 | |
| 830 | - */ | |
| 831 | - TextIconOverlay.prototype.setPosition = function (position) { | |
| 832 | - if(position && (!this._position || !this._position.equals(position))){ | |
| 833 | - this._position = position; | |
| 834 | - this._updatePosition(); | |
| 835 | - } | |
| 836 | - }; | |
| 837 | - | |
| 838 | - /** | |
| 839 | - *由文字信息获取风格数组的对应索引值。 | |
| 840 | - *内部默认的对应函数为文字转换为数字除以10的结果，比如文字8返回索引0，文字25返回索引2. | |
| 841 | - *如果需要自定义映射关系，请覆盖该函数。 | |
| 842 | - *@param {String} text 文字。 | |
| 843 | - *@param {Array<IconStyle>} styles 一组图标风格。 | |
| 844 | - *@return {Number} 对应的索引值。 | |
| 845 | - */ | |
| 846 | - TextIconOverlay.prototype.getStyleByText = function(text, styles){ | |
| 847 | - var count = parseInt(text); | |
| 848 | - var index = parseInt(count / 10); | |
| 849 | - index = Math.max(0, index); | |
| 850 | - index = Math.min(index, styles.length - 1); | |
| 851 | - return styles[index]; | |
| 852 | - } | |
| 853 | - | |
| 854 | - /** | |
| 855 | - *更新相应的CSS。 | |
| 856 | - *@return 无返回值。 | |
| 857 | - */ | |
| 858 | - TextIconOverlay.prototype._updateCss = function(){ | |
| 859 | - var style = this.getStyleByText(this._text, this._styles); | |
| 860 | - this._domElement.style.cssText = this._buildCssText(style); | |
| 861 | - }; | |
| 862 | - | |
| 863 | - /** | |
| 864 | - *更新覆盖物的显示文字。 | |
| 865 | - *@return 无返回值。 | |
| 866 | - */ | |
| 867 | - TextIconOverlay.prototype._updateText = function(){ | |
| 868 | - if (this._domElement) { | |
| 869 | - this._domElement.innerHTML = this._text; | |
| 870 | - } | |
| 871 | - }; | |
| 872 | - | |
| 873 | - /** | |
| 874 | - *调整覆盖物在地图上的位置更新覆盖物的显示文字。 | |
| 875 | - *@return 无返回值。 | |
| 876 | - */ | |
| 877 | - TextIconOverlay.prototype._updatePosition = function(){ | |
| 878 | - if (this._domElement && this._position) { | |
| 879 | - var style = this._domElement.style; | |
| 880 | - var pixelPosition= this._map.pointToOverlayPixel(this._position); | |
| 881 | - pixelPosition.x -= Math.ceil(parseInt(style.width) / 2); | |
| 882 | - pixelPosition.y -= Math.ceil(parseInt(style.height) / 2); | |
| 883 | - style.left = pixelPosition.x + "px"; | |
| 884 | - style.top = pixelPosition.y + "px"; | |
| 885 | - } | |
| 886 | - }; | |
| 887 | - | |
| 888 | - /** | |
| 889 | - * 为该覆盖物的HTML元素构建CSS | |
| 890 | - * @param {IconStyle} 一个图标的风格。 | |
| 891 | - * @return {String} 构建完成的CSSTEXT。 | |
| 892 | - */ | |
| 893 | - TextIconOverlay.prototype._buildCssText = function(style) { | |
| 894 | - //根据style来确定一些默认值 | |
| 895 | - var url = style['url']; | |
| 896 | - var size = style['size']; | |
| 897 | - var anchor = style['anchor']; | |
| 898 | - var offset = style['offset']; | |
| 899 | - var textColor = style['textColor'] || 'black'; | |
| 900 | - var textSize = style['textSize'] || 10; | |
| 901 | - | |
| 902 | - var csstext = []; | |
| 903 | - if (T.browser["ie"] < 7) { | |
| 904 | - csstext.push('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(' + | |
| 905 | - 'sizingMethod=scale,src="' + url + '");'); | |
| 906 | - } else { | |
| 907 | - csstext.push('background-image:url(' + url + ');'); | |
| 908 | - var backgroundPosition = '0 0'; | |
| 909 | - (offset instanceof BMap.Size) && (backgroundPosition = offset.width + 'px' + ' ' + offset.height + 'px'); | |
| 910 | - csstext.push('background-position:' + backgroundPosition + ';'); | |
| 911 | - } | |
| 912 | - | |
| 913 | - if (size instanceof BMap.Size){ | |
| 914 | - if (anchor instanceof BMap.Size) { | |
| 915 | - if (anchor.height > 0 && anchor.height < size.height) { | |
| 916 | - csstext.push('height:' + (size.height - anchor.height) + 'px; padding-top:' + anchor.height + 'px;'); | |
| 917 | - } | |
| 918 | - if(anchor.width > 0 && anchor.width < size.width){ | |
| 919 | - csstext.push('width:' + (size.width - anchor.width) + 'px; padding-left:' + anchor.width + 'px;'); | |
| 920 | - } | |
| 921 | - } else { | |
| 922 | - csstext.push('height:' + size.height + 'px; line-height:' + size.height + 'px;'); | |
| 923 | - csstext.push('width:' + size.width + 'px; text-align:center;'); | |
| 924 | - } | |
| 925 | - } | |
| 926 | - | |
| 927 | - csstext.push('cursor:pointer; color:' + textColor + '; position:absolute; font-size:' + | |
| 928 | - textSize + 'px; font-family:Arial,sans-serif; font-weight:bold'); | |
| 929 | - return csstext.join(''); | |
| 930 | - }; | |
| 931 | - | |
| 932 | - | |
| 933 | - /** | |
| 934 | - | |
| 935 | - * 当鼠标点击该覆盖物时会触发该事件 | |
| 936 | - | |
| 937 | - * @name TextIconOverlay#click | |
| 938 | - | |
| 939 | - * @event | |
| 940 | - | |
| 941 | - * @param {Event Object} e 回调函数会返回event参数，包括以下返回值： | |
| 942 | - | |
| 943 | - * <br />"<b>type</b> : {String} 事件类型 | |
| 944 | - | |
| 945 | - * <br />"<b>target</b>：{BMapLib.TextIconOverlay} 事件目标 | |
| 946 | - | |
| 947 | - * | |
| 948 | - | |
| 949 | - */ | |
| 950 | - | |
| 951 | - /** | |
| 952 | - | |
| 953 | - * 当鼠标进入该覆盖物区域时会触发该事件 | |
| 954 | - | |
| 955 | - * @name TextIconOverlay#mouseover | |
| 956 | - | |
| 957 | - * @event | |
| 958 | - * @param {Event Object} e 回调函数会返回event参数，包括以下返回值： | |
| 959 | - | |
| 960 | - * <br />"<b>type</b> : {String} 事件类型 | |
| 961 | - | |
| 962 | - * <br />"<b>target</b>：{BMapLib.TextIconOverlay} 事件目标 | |
| 963 | - | |
| 964 | - * <br />"<b>point</b> : {BMap.Point} 最新添加上的节点BMap.Point对象 | |
| 965 | - | |
| 966 | - * <br />"<b>pixel</b>：{BMap.pixel} 最新添加上的节点BMap.Pixel对象 | |
| 967 | - | |
| 968 | - * | |
| 969 | - | |
| 970 | - * @example <b>参考示例：</b><br /> | |
| 971 | - | |
| 972 | - * myTextIconOverlay.addEventListener("mouseover", function(e) { alert(e.point); }); | |
| 973 | - | |
| 974 | - */ | |
| 975 | - | |
| 976 | - /** | |
| 977 | - | |
| 978 | - * 当鼠标离开该覆盖物区域时会触发该事件 | |
| 979 | - | |
| 980 | - * @name TextIconOverlay#mouseout | |
| 981 | - | |
| 982 | - * @event | |
| 983 | - | |
| 984 | - * @param {Event Object} e 回调函数会返回event参数，包括以下返回值： | |
| 985 | - | |
| 986 | - * <br />"<b>type</b> : {String} 事件类型 | |
| 987 | - | |
| 988 | - * <br />"<b>target</b>：{BMapLib.TextIconOverlay} 事件目标 | |
| 989 | - | |
| 990 | - * <br />"<b>point</b> : {BMap.Point} 最新添加上的节点BMap.Point对象 | |
| 991 | - | |
| 992 | - * <br />"<b>pixel</b>：{BMap.pixel} 最新添加上的节点BMap.Pixel对象 | |
| 993 | - | |
| 994 | - * | |
| 995 | - | |
| 996 | - * @example <b>参考示例：</b><br /> | |
| 997 | - | |
| 998 | - * myTextIconOverlay.addEventListener("mouseout", function(e) { alert(e.point); }); | |
| 999 | - | |
| 1000 | - */ | |
| 1001 | - | |
| 1002 | - | |
| 1003 | - /** | |
| 1004 | - * 为该覆盖物绑定一系列事件 | |
| 1005 | - * 当前支持click mouseover mouseout | |
| 1006 | - * @return 无返回值。 | |
| 1007 | - */ | |
| 1008 | - TextIconOverlay.prototype._bind = function(){ | |
| 1009 | - if (!this._domElement){ | |
| 1010 | - return; | |
| 1011 | - } | |
| 1012 | - | |
| 1013 | - var me = this; | |
| 1014 | - var map = this._map; | |
| 1015 | - | |
| 1016 | - var BaseEvent = T.lang.Event; | |
| 1017 | - function eventExtend(e, be){ | |
| 1018 | - var elem = e.srcElement || e.target; | |
| 1019 | - var x = e.clientX || e.pageX; | |
| 1020 | - var y = e.clientY || e.pageY; | |
| 1021 | - if (e && be && x && y && elem){ | |
| 1022 | - var offset = T.dom.getPosition(map.getContainer()); | |
| 1023 | - be.pixel = new BMap.Pixel(x - offset.left, y - offset.top); | |
| 1024 | - be.point = map.pixelToPoint(be.pixel); | |
| 1025 | - } | |
| 1026 | - return be; | |
| 1027 | - }//给事件参数增加pixel和point两个值 | |
| 1028 | - | |
| 1029 | - T.event.on(this._domElement,"mouseover", function(e){ | |
| 1030 | - me.dispatchEvent(eventExtend(e, new BaseEvent("onmouseover"))); | |
| 1031 | - }); | |
| 1032 | - T.event.on(this._domElement,"mouseout", function(e){ | |
| 1033 | - me.dispatchEvent(eventExtend(e, new BaseEvent("onmouseout"))); | |
| 1034 | - }); | |
| 1035 | - T.event.on(this._domElement,"click", function(e){ | |
| 1036 | - me.dispatchEvent(eventExtend(e, new BaseEvent("onclick"))); | |
| 1037 | - }); | |
| 1038 | - }; | |
| 1039 | - | |
| 1 | +/** | |
| 2 | + * @fileoverview 此类表示地图上的一个覆盖物，该覆盖物由文字和图标组成，从Overlay继承。 | |
| 3 | + * 主入口类是<a href="symbols/BMapLib.TextIconOverlay.html">TextIconOverlay</a>， | |
| 4 | + * 基于Baidu Map API 1.2。 | |
| 5 | + * | |
| 6 | + * @author Baidu Map Api Group | |
| 7 | + * @version 1.2 | |
| 8 | + */ | |
| 9 | + | |
| 10 | + | |
| 11 | + /** | |
| 12 | + * @namespace BMap的所有library类均放在BMapLib命名空间下 | |
| 13 | + */ | |
| 14 | +var BMapLib = window.BMapLib = BMapLib || {}; | |
| 15 | + | |
| 16 | +(function () { | |
| 17 | + | |
| 18 | + /** | |
| 19 | + * 声明baidu包 | |
| 20 | + */ | |
| 21 | + var T, | |
| 22 | + baidu = T = baidu || {version: "1.3.8"}; | |
| 23 | + | |
| 24 | + (function (){ | |
| 25 | + //提出guid，防止在与老版本Tangram混用时 | |
| 26 | + //在下一行错误的修改window[undefined] | |
| 27 | + baidu.guid = "$BAIDU$"; | |
| 28 | + | |
| 29 | + //Tangram可能被放在闭包中 | |
| 30 | + //一些页面级别唯一的属性，需要挂载在window[baidu.guid]上 | |
| 31 | + window[baidu.guid] = window[baidu.guid] || {}; | |
| 32 | + | |
| 33 | + /** | |
| 34 | + * @ignore | |
| 35 | + * @namespace baidu.dom 操作dom的方法。 | |
| 36 | + */ | |
| 37 | + baidu.dom = baidu.dom || {}; | |
| 38 | + | |
| 39 | + | |
| 40 | + /** | |
| 41 | + * 从文档中获取指定的DOM元素 | |
| 42 | + * @name baidu.dom.g | |
| 43 | + * @function | |
| 44 | + * @grammar baidu.dom.g(id) | |
| 45 | + * @param {string|HTMLElement} id 元素的id或DOM元素 | |
| 46 | + * @shortcut g,T.G | |
| 47 | + * @meta standard | |
| 48 | + * @see baidu.dom.q | |
| 49 | + * | |
| 50 | + * @returns {HTMLElement|null} 获取的元素，查找不到时返回null,如果参数不合法，直接返回参数 | |
| 51 | + */ | |
| 52 | + baidu.dom.g = function (id) { | |
| 53 | + if ('string' == typeof id || id instanceof String) { | |
| 54 | + return document.getElementById(id); | |
| 55 | + } else if (id && id.nodeName && (id.nodeType == 1 || id.nodeType == 9)) { | |
| 56 | + return id; | |
| 57 | + } | |
| 58 | + return null; | |
| 59 | + }; | |
| 60 | + | |
| 61 | + // 声明快捷方法 | |
| 62 | + baidu.g = baidu.G = baidu.dom.g; | |
| 63 | + | |
| 64 | + /** | |
| 65 | + * 获取目标元素所属的document对象 | |
| 66 | + * @name baidu.dom.getDocument | |
| 67 | + * @function | |
| 68 | + * @grammar baidu.dom.getDocument(element) | |
| 69 | + * @param {HTMLElement|string} element 目标元素或目标元素的id | |
| 70 | + * @meta standard | |
| 71 | + * @see baidu.dom.getWindow | |
| 72 | + * | |
| 73 | + * @returns {HTMLDocument} 目标元素所属的document对象 | |
| 74 | + */ | |
| 75 | + baidu.dom.getDocument = function (element) { | |
| 76 | + element = baidu.dom.g(element); | |
| 77 | + return element.nodeType == 9 ? element : element.ownerDocument || element.document; | |
| 78 | + }; | |
| 79 | + | |
| 80 | + /** | |
| 81 | + * @ignore | |
| 82 | + * @namespace baidu.lang 对语言层面的封装，包括类型判断、模块扩展、继承基类以及对象自定义事件的支持。 | |
| 83 | + */ | |
| 84 | + baidu.lang = baidu.lang || {}; | |
| 85 | + | |
| 86 | + /** | |
| 87 | + * 判断目标参数是否string类型或String对象 | |
| 88 | + * @name baidu.lang.isString | |
| 89 | + * @function | |
| 90 | + * @grammar baidu.lang.isString(source) | |
| 91 | + * @param {Any} source 目标参数 | |
| 92 | + * @shortcut isString | |
| 93 | + * @meta standard | |
| 94 | + * @see baidu.lang.isObject,baidu.lang.isNumber,baidu.lang.isArray,baidu.lang.isElement,baidu.lang.isBoolean,baidu.lang.isDate | |
| 95 | + * | |
| 96 | + * @returns {boolean} 类型判断结果 | |
| 97 | + */ | |
| 98 | + baidu.lang.isString = function (source) { | |
| 99 | + return '[object String]' == Object.prototype.toString.call(source); | |
| 100 | + }; | |
| 101 | + | |
| 102 | + // 声明快捷方法 | |
| 103 | + baidu.isString = baidu.lang.isString; | |
| 104 | + | |
| 105 | + /** | |
| 106 | + * 从文档中获取指定的DOM元素 | |
| 107 | + * **内部方法** | |
| 108 | + * | |
| 109 | + * @param {string|HTMLElement} id 元素的id或DOM元素 | |
| 110 | + * @meta standard | |
| 111 | + * @return {HTMLElement} DOM元素，如果不存在，返回null，如果参数不合法，直接返回参数 | |
| 112 | + */ | |
| 113 | + baidu.dom._g = function (id) { | |
| 114 | + if (baidu.lang.isString(id)) { | |
| 115 | + return document.getElementById(id); | |
| 116 | + } | |
| 117 | + return id; | |
| 118 | + }; | |
| 119 | + | |
| 120 | + // 声明快捷方法 | |
| 121 | + baidu._g = baidu.dom._g; | |
| 122 | + | |
| 123 | + /** | |
| 124 | + * @ignore | |
| 125 | + * @namespace baidu.browser 判断浏览器类型和特性的属性。 | |
| 126 | + */ | |
| 127 | + baidu.browser = baidu.browser || {}; | |
| 128 | + | |
| 129 | + if (/msie (\d+\.\d)/i.test(navigator.userAgent)) { | |
| 130 | + //IE 8下，以documentMode为准 | |
| 131 | + //在百度模板中，可能会有$，防止冲突，将$1 写成 \x241 | |
| 132 | + /** | |
| 133 | + * 判断是否为ie浏览器 | |
| 134 | + * @property ie ie版本号 | |
| 135 | + * @grammar baidu.browser.ie | |
| 136 | + * @meta standard | |
| 137 | + * @shortcut ie | |
| 138 | + * @see baidu.browser.firefox,baidu.browser.safari,baidu.browser.opera,baidu.browser.chrome,baidu.browser.maxthon | |
| 139 | + */ | |
| 140 | + baidu.browser.ie = baidu.ie = document.documentMode || + RegExp['\x241']; | |
| 141 | + } | |
| 142 | + | |
| 143 | + /** | |
| 144 | + * 获取目标元素的computed style值。如果元素的样式值不能被浏览器计算，则会返回空字符串（IE） | |
| 145 | + * | |
| 146 | + * @author berg | |
| 147 | + * @name baidu.dom.getComputedStyle | |
| 148 | + * @function | |
| 149 | + * @grammar baidu.dom.getComputedStyle(element, key) | |
| 150 | + * @param {HTMLElement|string} element 目标元素或目标元素的id | |
| 151 | + * @param {string} key 要获取的样式名 | |
| 152 | + * | |
| 153 | + * @see baidu.dom.getStyle | |
| 154 | + * | |
| 155 | + * @returns {string} 目标元素的computed style值 | |
| 156 | + */ | |
| 157 | + | |
| 158 | + baidu.dom.getComputedStyle = function(element, key){ | |
| 159 | + element = baidu.dom._g(element); | |
| 160 | + var doc = baidu.dom.getDocument(element), | |
| 161 | + styles; | |
| 162 | + if (doc.defaultView && doc.defaultView.getComputedStyle) { | |
| 163 | + styles = doc.defaultView.getComputedStyle(element, null); | |
| 164 | + if (styles) { | |
| 165 | + return styles[key] || styles.getPropertyValue(key); | |
| 166 | + } | |
| 167 | + } | |
| 168 | + return ''; | |
| 169 | + }; | |
| 170 | + | |
| 171 | + /** | |
| 172 | + * 提供给setStyle与getStyle使用 | |
| 173 | + */ | |
| 174 | + baidu.dom._styleFixer = baidu.dom._styleFixer || {}; | |
| 175 | + | |
| 176 | + /** | |
| 177 | + * 提供给setStyle与getStyle使用 | |
| 178 | + */ | |
| 179 | + baidu.dom._styleFilter = baidu.dom._styleFilter || []; | |
| 180 | + | |
| 181 | + /** | |
| 182 | + * 为获取和设置样式的过滤器 | |
| 183 | + * @private | |
| 184 | + * @meta standard | |
| 185 | + */ | |
| 186 | + baidu.dom._styleFilter.filter = function (key, value, method) { | |
| 187 | + for (var i = 0, filters = baidu.dom._styleFilter, filter; filter = filters[i]; i++) { | |
| 188 | + if (filter = filter[method]) { | |
| 189 | + value = filter(key, value); | |
| 190 | + } | |
| 191 | + } | |
| 192 | + return value; | |
| 193 | + }; | |
| 194 | + | |
| 195 | + /** | |
| 196 | + * @ignore | |
| 197 | + * @namespace baidu.string 操作字符串的方法。 | |
| 198 | + */ | |
| 199 | + baidu.string = baidu.string || {}; | |
| 200 | + | |
| 201 | + /** | |
| 202 | + * 将目标字符串进行驼峰化处理 | |
| 203 | + * @name baidu.string.toCamelCase | |
| 204 | + * @function | |
| 205 | + * @grammar baidu.string.toCamelCase(source) | |
| 206 | + * @param {string} source 目标字符串 | |
| 207 | + * @remark | |
| 208 | + * 支持单词以“-_”分隔 | |
| 209 | + * @meta standard | |
| 210 | + * | |
| 211 | + * @returns {string} 驼峰化处理后的字符串 | |
| 212 | + */ | |
| 213 | + baidu.string.toCamelCase = function (source) { | |
| 214 | + //提前判断，提高getStyle等的效率 thanks xianwei | |
| 215 | + if (source.indexOf('-') < 0 && source.indexOf('_') < 0) { | |
| 216 | + return source; | |
| 217 | + } | |
| 218 | + return source.replace(/[-_][^-_]/g, function (match) { | |
| 219 | + return match.charAt(1).toUpperCase(); | |
| 220 | + }); | |
| 221 | + }; | |
| 222 | + | |
| 223 | + /** | |
| 224 | + * 获取目标元素的样式值 | |
| 225 | + * @name baidu.dom.getStyle | |
| 226 | + * @function | |
| 227 | + * @grammar baidu.dom.getStyle(element, key) | |
| 228 | + * @param {HTMLElement|string} element 目标元素或目标元素的id | |
| 229 | + * @param {string} key 要获取的样式名 | |
| 230 | + * @remark | |
| 231 | + * | |
| 232 | + * 为了精简代码，本模块默认不对任何浏览器返回值进行归一化处理（如使用getStyle时，不同浏览器下可能返回rgb颜色或hex颜色），也不会修复浏览器的bug和差异性（如设置IE的float属性叫styleFloat，firefox则是cssFloat）。<br /> | |
| 233 | + * baidu.dom._styleFixer和baidu.dom._styleFilter可以为本模块提供支持。<br /> | |
| 234 | + * 其中_styleFilter能对颜色和px进行归一化处理，_styleFixer能对display，float，opacity，textOverflow的浏览器兼容性bug进行处理。 | |
| 235 | + * @shortcut getStyle | |
| 236 | + * @meta standard | |
| 237 | + * @see baidu.dom.setStyle,baidu.dom.setStyles, baidu.dom.getComputedStyle | |
| 238 | + * | |
| 239 | + * @returns {string} 目标元素的样式值 | |
| 240 | + */ | |
| 241 | + baidu.dom.getStyle = function (element, key) { | |
| 242 | + var dom = baidu.dom; | |
| 243 | + | |
| 244 | + element = dom.g(element); | |
| 245 | + key = baidu.string.toCamelCase(key); | |
| 246 | + //computed style, then cascaded style, then explicitly set style. | |
| 247 | + var value = element.style[key] || | |
| 248 | + (element.currentStyle ? element.currentStyle[key] : "") || | |
| 249 | + dom.getComputedStyle(element, key); | |
| 250 | + | |
| 251 | + // 在取不到值的时候，用fixer进行修正 | |
| 252 | + if (!value) { | |
| 253 | + var fixer = dom._styleFixer[key]; | |
| 254 | + if(fixer){ | |
| 255 | + value = fixer.get ? fixer.get(element) : baidu.dom.getStyle(element, fixer); | |
| 256 | + } | |
| 257 | + } | |
| 258 | + | |
| 259 | + /* 检查结果过滤器 */ | |
| 260 | + if (fixer = dom._styleFilter) { | |
| 261 | + value = fixer.filter(key, value, 'get'); | |
| 262 | + } | |
| 263 | + | |
| 264 | + return value; | |
| 265 | + }; | |
| 266 | + | |
| 267 | + // 声明快捷方法 | |
| 268 | + baidu.getStyle = baidu.dom.getStyle; | |
| 269 | + | |
| 270 | + | |
| 271 | + if (/opera\/(\d+\.\d)/i.test(navigator.userAgent)) { | |
| 272 | + /** | |
| 273 | + * 判断是否为opera浏览器 | |
| 274 | + * @property opera opera版本号 | |
| 275 | + * @grammar baidu.browser.opera | |
| 276 | + * @meta standard | |
| 277 | + * @see baidu.browser.ie,baidu.browser.firefox,baidu.browser.safari,baidu.browser.chrome | |
| 278 | + */ | |
| 279 | + baidu.browser.opera = + RegExp['\x241']; | |
| 280 | + } | |
| 281 | + | |
| 282 | + /** | |
| 283 | + * 判断是否为webkit内核 | |
| 284 | + * @property isWebkit | |
| 285 | + * @grammar baidu.browser.isWebkit | |
| 286 | + * @meta standard | |
| 287 | + * @see baidu.browser.isGecko | |
| 288 | + */ | |
| 289 | + baidu.browser.isWebkit = /webkit/i.test(navigator.userAgent); | |
| 290 | + | |
| 291 | + /** | |
| 292 | + * 判断是否为gecko内核 | |
| 293 | + * @property isGecko | |
| 294 | + * @grammar baidu.browser.isGecko | |
| 295 | + * @meta standard | |
| 296 | + * @see baidu.browser.isWebkit | |
| 297 | + */ | |
| 298 | + baidu.browser.isGecko = /gecko/i.test(navigator.userAgent) && !/like gecko/i.test(navigator.userAgent); | |
| 299 | + | |
| 300 | + /** | |
| 301 | + * 判断是否严格标准的渲染模式 | |
| 302 | + * @property isStrict | |
| 303 | + * @grammar baidu.browser.isStrict | |
| 304 | + * @meta standard | |
| 305 | + */ | |
| 306 | + baidu.browser.isStrict = document.compatMode == "CSS1Compat"; | |
| 307 | + | |
| 308 | + /** | |
| 309 | + * 获取目标元素相对于整个文档左上角的位置 | |
| 310 | + * @name baidu.dom.getPosition | |
| 311 | + * @function | |
| 312 | + * @grammar baidu.dom.getPosition(element) | |
| 313 | + * @param {HTMLElement|string} element 目标元素或目标元素的id | |
| 314 | + * @meta standard | |
| 315 | + * | |
| 316 | + * @returns {Object} 目标元素的位置，键值为top和left的Object。 | |
| 317 | + */ | |
| 318 | + baidu.dom.getPosition = function (element) { | |
| 319 | + element = baidu.dom.g(element); | |
| 320 | + var doc = baidu.dom.getDocument(element), | |
| 321 | + browser = baidu.browser, | |
| 322 | + getStyle = baidu.dom.getStyle, | |
| 323 | + // Gecko 1.9版本以下用getBoxObjectFor计算位置 | |
| 324 | + // 但是某些情况下是有bug的 | |
| 325 | + // 对于这些有bug的情况 | |
| 326 | + // 使用递归查找的方式 | |
| 327 | + BUGGY_GECKO_BOX_OBJECT = browser.isGecko > 0 && | |
| 328 | + doc.getBoxObjectFor && | |
| 329 | + getStyle(element, 'position') == 'absolute' && | |
| 330 | + (element.style.top === '' || element.style.left === ''), | |
| 331 | + pos = {"left":0,"top":0}, | |
| 332 | + viewport = (browser.ie && !browser.isStrict) ? doc.body : doc.documentElement, | |
| 333 | + parent, | |
| 334 | + box; | |
| 335 | + | |
| 336 | + if(element == viewport){ | |
| 337 | + return pos; | |
| 338 | + } | |
| 339 | + | |
| 340 | + if(element.getBoundingClientRect){ // IE and Gecko 1.9+ | |
| 341 | + | |
| 342 | + //当HTML或者BODY有border width时, 原生的getBoundingClientRect返回值是不符合预期的 | |
| 343 | + //考虑到通常情况下 HTML和BODY的border只会设成0px,所以忽略该问题. | |
| 344 | + box = element.getBoundingClientRect(); | |
| 345 | + | |
| 346 | + pos.left = Math.floor(box.left) + Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft); | |
| 347 | + pos.top = Math.floor(box.top) + Math.max(doc.documentElement.scrollTop, doc.body.scrollTop); | |
| 348 | + | |
| 349 | + // IE会给HTML元素添加一个border，默认是medium（2px） | |
| 350 | + // 但是在IE 6 7 的怪异模式下，可以被html { border: 0; } 这条css规则覆盖 | |
| 351 | + // 在IE7的标准模式下，border永远是2px，这个值通过clientLeft 和 clientTop取得 | |
| 352 | + // 但是。。。在IE 6 7的怪异模式，如果用户使用css覆盖了默认的medium | |
| 353 | + // clientTop和clientLeft不会更新 | |
| 354 | + pos.left -= doc.documentElement.clientLeft; | |
| 355 | + pos.top -= doc.documentElement.clientTop; | |
| 356 | + | |
| 357 | + var htmlDom = doc.body, | |
| 358 | + // 在这里，不使用element.style.borderLeftWidth，只有computedStyle是可信的 | |
| 359 | + htmlBorderLeftWidth = parseInt(getStyle(htmlDom, 'borderLeftWidth')), | |
| 360 | + htmlBorderTopWidth = parseInt(getStyle(htmlDom, 'borderTopWidth')); | |
| 361 | + if(browser.ie && !browser.isStrict){ | |
| 362 | + pos.left -= isNaN(htmlBorderLeftWidth) ? 2 : htmlBorderLeftWidth; | |
| 363 | + pos.top -= isNaN(htmlBorderTopWidth) ? 2 : htmlBorderTopWidth; | |
| 364 | + } | |
| 365 | + } else { | |
| 366 | + // safari/opera/firefox | |
| 367 | + parent = element; | |
| 368 | + | |
| 369 | + do { | |
| 370 | + pos.left += parent.offsetLeft; | |
| 371 | + pos.top += parent.offsetTop; | |
| 372 | + | |
| 373 | + // safari里面，如果遍历到了一个fixed的元素，后面的offset都不准了 | |
| 374 | + if (browser.isWebkit > 0 && getStyle(parent, 'position') == 'fixed') { | |
| 375 | + pos.left += doc.body.scrollLeft; | |
| 376 | + pos.top += doc.body.scrollTop; | |
| 377 | + break; | |
| 378 | + } | |
| 379 | + | |
| 380 | + parent = parent.offsetParent; | |
| 381 | + } while (parent && parent != element); | |
| 382 | + | |
| 383 | + // 对body offsetTop的修正 | |
| 384 | + if(browser.opera > 0 || (browser.isWebkit > 0 && getStyle(element, 'position') == 'absolute')){ | |
| 385 | + pos.top -= doc.body.offsetTop; | |
| 386 | + } | |
| 387 | + | |
| 388 | + // 计算除了body的scroll | |
| 389 | + parent = element.offsetParent; | |
| 390 | + while (parent && parent != doc.body) { | |
| 391 | + pos.left -= parent.scrollLeft; | |
| 392 | + // see https://bugs.opera.com/show_bug.cgi?id=249965 | |
| 393 | + if (!browser.opera || parent.tagName != 'TR') { | |
| 394 | + pos.top -= parent.scrollTop; | |
| 395 | + } | |
| 396 | + parent = parent.offsetParent; | |
| 397 | + } | |
| 398 | + } | |
| 399 | + | |
| 400 | + return pos; | |
| 401 | + }; | |
| 402 | + | |
| 403 | + /** | |
| 404 | + * @ignore | |
| 405 | + * @namespace baidu.event 屏蔽浏览器差异性的事件封装。 | |
| 406 | + * @property target 事件的触发元素 | |
| 407 | + * @property pageX 鼠标事件的鼠标x坐标 | |
| 408 | + * @property pageY 鼠标事件的鼠标y坐标 | |
| 409 | + * @property keyCode 键盘事件的键值 | |
| 410 | + */ | |
| 411 | + baidu.event = baidu.event || {}; | |
| 412 | + | |
| 413 | + /** | |
| 414 | + * 事件监听器的存储表 | |
| 415 | + * @private | |
| 416 | + * @meta standard | |
| 417 | + */ | |
| 418 | + baidu.event._listeners = baidu.event._listeners || []; | |
| 419 | + | |
| 420 | + /** | |
| 421 | + * 为目标元素添加事件监听器 | |
| 422 | + * @name baidu.event.on | |
| 423 | + * @function | |
| 424 | + * @grammar baidu.event.on(element, type, listener) | |
| 425 | + * @param {HTMLElement|string|window} element 目标元素或目标元素id | |
| 426 | + * @param {string} type 事件类型 | |
| 427 | + * @param {Function} listener 需要添加的监听器 | |
| 428 | + * @remark | |
| 429 | + * | |
| 430 | + 1. 不支持跨浏览器的鼠标滚轮事件监听器添加<br> | |
| 431 | + 2. 改方法不为监听器灌入事件对象，以防止跨iframe事件挂载的事件对象获取失败 | |
| 432 | + | |
| 433 | + * @shortcut on | |
| 434 | + * @meta standard | |
| 435 | + * @see baidu.event.un | |
| 436 | + * | |
| 437 | + * @returns {HTMLElement|window} 目标元素 | |
| 438 | + */ | |
| 439 | + baidu.event.on = function (element, type, listener) { | |
| 440 | + type = type.replace(/^on/i, ''); | |
| 441 | + element = baidu.dom._g(element); | |
| 442 | + | |
| 443 | + var realListener = function (ev) { | |
| 444 | + // 1. 这里不支持EventArgument, 原因是跨frame的事件挂载 | |
| 445 | + // 2. element是为了修正this | |
| 446 | + listener.call(element, ev); | |
| 447 | + }, | |
| 448 | + lis = baidu.event._listeners, | |
| 449 | + filter = baidu.event._eventFilter, | |
| 450 | + afterFilter, | |
| 451 | + realType = type; | |
| 452 | + type = type.toLowerCase(); | |
| 453 | + // filter过滤 | |
| 454 | + if(filter && filter[type]){ | |
| 455 | + afterFilter = filter[type](element, type, realListener); | |
| 456 | + realType = afterFilter.type; | |
| 457 | + realListener = afterFilter.listener; | |
| 458 | + } | |
| 459 | + | |
| 460 | + // 事件监听器挂载 | |
| 461 | + if (element.addEventListener) { | |
| 462 | + element.addEventListener(realType, realListener, false); | |
| 463 | + } else if (element.attachEvent) { | |
| 464 | + element.attachEvent('on' + realType, realListener); | |
| 465 | + } | |
| 466 | + | |
| 467 | + // 将监听器存储到数组中 | |
| 468 | + lis[lis.length] = [element, type, listener, realListener, realType]; | |
| 469 | + return element; | |
| 470 | + }; | |
| 471 | + | |
| 472 | + // 声明快捷方法 | |
| 473 | + baidu.on = baidu.event.on; | |
| 474 | + | |
| 475 | + /** | |
| 476 | + * 返回一个当前页面的唯一标识字符串。 | |
| 477 | + * @name baidu.lang.guid | |
| 478 | + * @function | |
| 479 | + * @grammar baidu.lang.guid() | |
| 480 | + * @version 1.1.1 | |
| 481 | + * @meta standard | |
| 482 | + * | |
| 483 | + * @returns {String} 当前页面的唯一标识字符串 | |
| 484 | + */ | |
| 485 | + | |
| 486 | + (function(){ | |
| 487 | + //不直接使用window，可以提高3倍左右性能 | |
| 488 | + var guid = window[baidu.guid]; | |
| 489 | + | |
| 490 | + baidu.lang.guid = function() { | |
| 491 | + return "TANGRAM__" + (guid._counter ++).toString(36); | |
| 492 | + }; | |
| 493 | + | |
| 494 | + guid._counter = guid._counter || 1; | |
| 495 | + })(); | |
| 496 | + | |
| 497 | + /** | |
| 498 | + * 所有类的实例的容器 | |
| 499 | + * key为每个实例的guid | |
| 500 | + * @meta standard | |
| 501 | + */ | |
| 502 | + | |
| 503 | + window[baidu.guid]._instances = window[baidu.guid]._instances || {}; | |
| 504 | + | |
| 505 | + /** | |
| 506 | + * 判断目标参数是否为function或Function实例 | |
| 507 | + * @name baidu.lang.isFunction | |
| 508 | + * @function | |
| 509 | + * @grammar baidu.lang.isFunction(source) | |
| 510 | + * @param {Any} source 目标参数 | |
| 511 | + * @version 1.2 | |
| 512 | + * @see baidu.lang.isString,baidu.lang.isObject,baidu.lang.isNumber,baidu.lang.isArray,baidu.lang.isElement,baidu.lang.isBoolean,baidu.lang.isDate | |
| 513 | + * @meta standard | |
| 514 | + * @returns {boolean} 类型判断结果 | |
| 515 | + */ | |
| 516 | + baidu.lang.isFunction = function (source) { | |
| 517 | + // chrome下,'function' == typeof /a/ 为true. | |
| 518 | + return '[object Function]' == Object.prototype.toString.call(source); | |
| 519 | + }; | |
| 520 | + | |
| 521 | + /** | |
| 522 | + * | |
| 523 | + * @ignore | |
| 524 | + * @class Tangram继承机制提供的一个基类，用户可以通过继承baidu.lang.Class来获取它的属性及方法。 | |
| 525 | + * @name baidu.lang.Class | |
| 526 | + * @grammar baidu.lang.Class(guid) | |
| 527 | + * @param {string} guid 对象的唯一标识 | |
| 528 | + * @meta standard | |
| 529 | + * @remark baidu.lang.Class和它的子类的实例均包含一个全局唯一的标识guid。guid是在构造函数中生成的，因此，继承自baidu.lang.Class的类应该直接或者间接调用它的构造函数。<br>baidu.lang.Class的构造函数中产生guid的方式可以保证guid的唯一性，及每个实例都有一个全局唯一的guid。 | |
| 530 | + * @meta standard | |
| 531 | + * @see baidu.lang.inherits,baidu.lang.Event | |
| 532 | + */ | |
| 533 | + baidu.lang.Class = function(guid) { | |
| 534 | + this.guid = guid || baidu.lang.guid(); | |
| 535 | + window[baidu.guid]._instances[this.guid] = this; | |
| 536 | + }; | |
| 537 | + window[baidu.guid]._instances = window[baidu.guid]._instances || {}; | |
| 538 | + | |
| 539 | + /** | |
| 540 | + * 释放对象所持有的资源，主要是自定义事件。 | |
| 541 | + * @name dispose | |
| 542 | + * @grammar obj.dispose() | |
| 543 | + */ | |
| 544 | + baidu.lang.Class.prototype.dispose = function(){ | |
| 545 | + delete window[baidu.guid]._instances[this.guid]; | |
| 546 | + | |
| 547 | + for(var property in this){ | |
| 548 | + if (!baidu.lang.isFunction(this[property])) { | |
| 549 | + delete this[property]; | |
| 550 | + } | |
| 551 | + } | |
| 552 | + this.disposed = true; | |
| 553 | + }; | |
| 554 | + | |
| 555 | + /** | |
| 556 | + * 重载了默认的toString方法，使得返回信息更加准确一些。 | |
| 557 | + * @return {string} 对象的String表示形式 | |
| 558 | + */ | |
| 559 | + baidu.lang.Class.prototype.toString = function(){ | |
| 560 | + return "[object " + (this._className || "Object" ) + "]"; | |
| 561 | + }; | |
| 562 | + | |
| 563 | + /** | |
| 564 | + * @ignore | |
| 565 | + * @class 自定义的事件对象。 | |
| 566 | + * @name baidu.lang.Event | |
| 567 | + * @grammar baidu.lang.Event(type[, target]) | |
| 568 | + * @param {string} type 事件类型名称。为了方便区分事件和一个普通的方法，事件类型名称必须以"on"(小写)开头。 | |
| 569 | + * @param {Object} [target]触发事件的对象 | |
| 570 | + * @meta standard | |
| 571 | + * @remark 引入该模块，会自动为Class引入3个事件扩展方法：addEventListener、removeEventListener和dispatchEvent。 | |
| 572 | + * @meta standard | |
| 573 | + * @see baidu.lang.Class | |
| 574 | + */ | |
| 575 | + baidu.lang.Event = function (type, target) { | |
| 576 | + this.type = type; | |
| 577 | + this.returnValue = true; | |
| 578 | + this.target = target || null; | |
| 579 | + this.currentTarget = null; | |
| 580 | + }; | |
| 581 | + | |
| 582 | + /** | |
| 583 | + * 注册对象的事件监听器。引入baidu.lang.Event后，Class的子类实例才会获得该方法。 | |
| 584 | + * @grammar obj.addEventListener(type, handlers[, key]) | |
| 585 | + * @param {string} type 自定义事件的名称 | |
| 586 | + * @param {Function} handler 自定义事件被触发时应该调用的回调函数 | |
| 587 | + * @param {string} [key] 为事件监听函数指定的名称，可在移除时使用。如果不提供，方法会默认为它生成一个全局唯一的key。 | |
| 588 | + * @remark 事件类型区分大小写。如果自定义事件名称不是以小写"on"开头，该方法会给它加上"on"再进行判断，即"click"和"onclick"会被认为是同一种事件。 | |
| 589 | + */ | |
| 590 | + baidu.lang.Class.prototype.addEventListener = function (type, handler, key) { | |
| 591 | + if (!baidu.lang.isFunction(handler)) { | |
| 592 | + return; | |
| 593 | + } | |
| 594 | + | |
| 595 | + !this.__listeners && (this.__listeners = {}); | |
| 596 | + | |
| 597 | + var t = this.__listeners, id; | |
| 598 | + if (typeof key == "string" && key) { | |
| 599 | + if (/[^\w\-]/.test(key)) { | |
| 600 | + throw("nonstandard key:" + key); | |
| 601 | + } else { | |
| 602 | + handler.hashCode = key; | |
| 603 | + id = key; | |
| 604 | + } | |
| 605 | + } | |
| 606 | + type.indexOf("on") != 0 && (type = "on" + type); | |
| 607 | + | |
| 608 | + typeof t[type] != "object" && (t[type] = {}); | |
| 609 | + id = id || baidu.lang.guid(); | |
| 610 | + handler.hashCode = id; | |
| 611 | + t[type][id] = handler; | |
| 612 | + }; | |
| 613 | + | |
| 614 | + /** | |
| 615 | + * 移除对象的事件监听器。引入baidu.lang.Event后，Class的子类实例才会获得该方法。 | |
| 616 | + * @grammar obj.removeEventListener(type, handlers) | |
| 617 | + * @param {string} type 事件类型 | |
| 618 | + * @param {Function|string} handler 要移除的事件监听函数或者监听函数的key | |
| 619 | + * @remark 如果第二个参数handler没有被绑定到对应的自定义事件中，什么也不做。 | |
| 620 | + */ | |
| 621 | + baidu.lang.Class.prototype.removeEventListener = function (type, handler) { | |
| 622 | + if (typeof handler != "undefined") { | |
| 623 | + if ( (baidu.lang.isFunction(handler) && ! (handler = handler.hashCode)) | |
| 624 | + || (! baidu.lang.isString(handler)) | |
| 625 | + ){ | |
| 626 | + return; | |
| 627 | + } | |
| 628 | + } | |
| 629 | + | |
| 630 | + !this.__listeners && (this.__listeners = {}); | |
| 631 | + | |
| 632 | + type.indexOf("on") != 0 && (type = "on" + type); | |
| 633 | + | |
| 634 | + var t = this.__listeners; | |
| 635 | + if (!t[type]) { | |
| 636 | + return; | |
| 637 | + } | |
| 638 | + if (typeof handler != "undefined") { | |
| 639 | + t[type][handler] && delete t[type][handler]; | |
| 640 | + } else { | |
| 641 | + for(var guid in t[type]){ | |
| 642 | + delete t[type][guid]; | |
| 643 | + } | |
| 644 | + } | |
| 645 | + }; | |
| 646 | + | |
| 647 | + /** | |
| 648 | + * 派发自定义事件，使得绑定到自定义事件上面的函数都会被执行。引入baidu.lang.Event后，Class的子类实例才会获得该方法。 | |
| 649 | + * @grammar obj.dispatchEvent(event, options) | |
| 650 | + * @param {baidu.lang.Event|String} event Event对象，或事件名称(1.1.1起支持) | |
| 651 | + * @param {Object} options 扩展参数,所含属性键值会扩展到Event对象上(1.2起支持) | |
| 652 | + * @remark 处理会调用通过addEventListenr绑定的自定义事件回调函数之外，还会调用直接绑定到对象上面的自定义事件。例如：<br> | |
| 653 | + myobj.onMyEvent = function(){}<br> | |
| 654 | + myobj.addEventListener("onMyEvent", function(){}); | |
| 655 | + */ | |
| 656 | + baidu.lang.Class.prototype.dispatchEvent = function (event, options) { | |
| 657 | + if (baidu.lang.isString(event)) { | |
| 658 | + event = new baidu.lang.Event(event); | |
| 659 | + } | |
| 660 | + !this.__listeners && (this.__listeners = {}); | |
| 661 | + | |
| 662 | + // 20100603 添加本方法的第二个参数，将 options extend到event中去传递 | |
| 663 | + options = options || {}; | |
| 664 | + for (var i in options) { | |
| 665 | + event[i] = options[i]; | |
| 666 | + } | |
| 667 | + | |
| 668 | + var i, t = this.__listeners, p = event.type; | |
| 669 | + event.target = event.target || this; | |
| 670 | + event.currentTarget = this; | |
| 671 | + | |
| 672 | + p.indexOf("on") != 0 && (p = "on" + p); | |
| 673 | + | |
| 674 | + baidu.lang.isFunction(this[p]) && this[p].apply(this, arguments); | |
| 675 | + | |
| 676 | + if (typeof t[p] == "object") { | |
| 677 | + for (i in t[p]) { | |
| 678 | + t[p][i].apply(this, arguments); | |
| 679 | + } | |
| 680 | + } | |
| 681 | + return event.returnValue; | |
| 682 | + }; | |
| 683 | + | |
| 684 | + | |
| 685 | + baidu.lang.inherits = function (subClass, superClass, className) { | |
| 686 | + var key, proto, | |
| 687 | + selfProps = subClass.prototype, | |
| 688 | + clazz = new Function(); | |
| 689 | + | |
| 690 | + clazz.prototype = superClass.prototype; | |
| 691 | + proto = subClass.prototype = new clazz(); | |
| 692 | + for (key in selfProps) { | |
| 693 | + proto[key] = selfProps[key]; | |
| 694 | + } | |
| 695 | + subClass.prototype.constructor = subClass; | |
| 696 | + subClass.superClass = superClass.prototype; | |
| 697 | + | |
| 698 | + // 类名标识，兼容Class的toString，基本没用 | |
| 699 | + if ("string" == typeof className) { | |
| 700 | + proto._className = className; | |
| 701 | + } | |
| 702 | + }; | |
| 703 | + // 声明快捷方法 | |
| 704 | + baidu.inherits = baidu.lang.inherits; | |
| 705 | + })(); | |
| 706 | + | |
| 707 | + | |
| 708 | + /** | |
| 709 | + | |
| 710 | + * 图片的路径 | |
| 711 | + | |
| 712 | + * @private | |
| 713 | + * @type {String} | |
| 714 | + | |
| 715 | + */ | |
| 716 | + var _IMAGE_PATH = '//api.map.baidu.com/library/TextIconOverlay/1.2/src/images/m'; | |
| 717 | + | |
| 718 | + /** | |
| 719 | + | |
| 720 | + * 图片的后缀名 | |
| 721 | + | |
| 722 | + * @private | |
| 723 | + * @type {String} | |
| 724 | + | |
| 725 | + */ | |
| 726 | + var _IMAGE_EXTENSION = 'png'; | |
| 727 | + | |
| 728 | + /** | |
| 729 | + *@exports TextIconOverlay as BMapLib.TextIconOverlay | |
| 730 | + */ | |
| 731 | + var TextIconOverlay = | |
| 732 | + /** | |
| 733 | + * TextIconOverlay | |
| 734 | + * @class 此类表示地图上的一个覆盖物，该覆盖物由文字和图标组成，从Overlay继承。文字通常是数字（0-9）或字母（A-Z ），而文字与图标之间有一定的映射关系。 | |
| 735 | + *该覆盖物适用于以下类似的场景：需要在地图上添加一系列覆盖物，这些覆盖物之间用不同的图标和文字来区分，文字可能表示了该覆盖物的某一属性值，根据该文字和一定的映射关系，自动匹配相应颜色和大小的图标。 | |
| 736 | + * | |
| 737 | + *@constructor | |
| 738 | + *@param {Point} position 表示一个经纬度坐标位置。 | |
| 739 | + *@param {String} text 表示该覆盖物显示的文字信息。 | |
| 740 | + *@param {Json Object} options 可选参数，可选项包括：<br /> | |
| 741 | + *"<b>styles</b>":{Array<IconStyle>} 一组图标风格。单个图表风格包括以下几个属性：<br /> | |
| 742 | + * url {String} 图片的url地址。(必选)<br /> | |
| 743 | + * size {Size} 图片的大小。（必选）<br /> | |
| 744 | + * anchor {Size} 图标定位在地图上的位置相对于图标左上角的偏移值，默认偏移值为图标的中心位置。（可选）<br /> | |
| 745 | + * offset {Size} 图片相对于可视区域的偏移值，此功能的作用等同于CSS中的background-position属性。（可选）<br /> | |
| 746 | + * textSize {Number} 文字的大小。（可选，默认10）<br /> | |
| 747 | + * textColor {String} 文字的颜色。（可选，默认black）<br /> | |
| 748 | + */ | |
| 749 | + BMapLib.TextIconOverlay = function(position, text, options){ | |
| 750 | + this._position = position; | |
| 751 | + this._text = text; | |
| 752 | + this._options = options || {}; | |
| 753 | + this._styles = this._options['styles'] || []; | |
| 754 | + (!this._styles.length) && this._setupDefaultStyles(); | |
| 755 | + }; | |
| 756 | + | |
| 757 | + T.lang.inherits(TextIconOverlay, BMap.Overlay, "TextIconOverlay"); | |
| 758 | + | |
| 759 | + TextIconOverlay.prototype._setupDefaultStyles = function(){ | |
| 760 | + var sizes = [53, 56, 66, 78, 90]; | |
| 761 | + for(var i = 0, size; size = sizes[i]; i++){ | |
| 762 | + this._styles.push({ | |
| 763 | + url:_IMAGE_PATH + i + '.' + _IMAGE_EXTENSION, | |
| 764 | + size: new BMap.Size(size, size) | |
| 765 | + }); | |
| 766 | + }//for循环的简洁写法 | |
| 767 | + }; | |
| 768 | + | |
| 769 | + /** | |
| 770 | + *继承Overlay的intialize方法，自定义覆盖物时必须。 | |
| 771 | + *@param {Map} map BMap.Map的实例化对象。 | |
| 772 | + *@return {HTMLElement} 返回覆盖物对应的HTML元素。 | |
| 773 | + */ | |
| 774 | + TextIconOverlay.prototype.initialize = function(map){ | |
| 775 | + this._map = map; | |
| 776 | + | |
| 777 | + this._domElement = document.createElement('div'); | |
| 778 | + this._updateCss(); | |
| 779 | + this._updateText(); | |
| 780 | + this._updatePosition(); | |
| 781 | + | |
| 782 | + this._bind(); | |
| 783 | + | |
| 784 | + this._map.getPanes().markerMouseTarget.appendChild(this._domElement); | |
| 785 | + return this._domElement; | |
| 786 | + }; | |
| 787 | + | |
| 788 | + /** | |
| 789 | + *继承Overlay的draw方法，自定义覆盖物时必须。 | |
| 790 | + *@return 无返回值。 | |
| 791 | + */ | |
| 792 | + TextIconOverlay.prototype.draw = function(){ | |
| 793 | + this._map && this._updatePosition(); | |
| 794 | + }; | |
| 795 | + | |
| 796 | + /** | |
| 797 | + *获取该覆盖物上的文字。 | |
| 798 | + *@return {String} 该覆盖物上的文字。 | |
| 799 | + */ | |
| 800 | + TextIconOverlay.prototype.getText = function(){ | |
| 801 | + return this._text; | |
| 802 | + }; | |
| 803 | + | |
| 804 | + /** | |
| 805 | + *设置该覆盖物上的文字。 | |
| 806 | + *@param {String} text 要设置的文字，通常是字母A-Z或数字0-9。 | |
| 807 | + *@return 无返回值。 | |
| 808 | + */ | |
| 809 | + TextIconOverlay.prototype.setText = function(text){ | |
| 810 | + if(text && (!this._text || (this._text.toString() != text.toString()))){ | |
| 811 | + this._text = text; | |
| 812 | + this._updateText(); | |
| 813 | + this._updateCss(); | |
| 814 | + this._updatePosition(); | |
| 815 | + } | |
| 816 | + }; | |
| 817 | + | |
| 818 | + /** | |
| 819 | + *获取该覆盖物的位置。 | |
| 820 | + *@return {Point} 该覆盖物的经纬度坐标。 | |
| 821 | + */ | |
| 822 | + TextIconOverlay.prototype.getPosition = function () { | |
| 823 | + return this._position; | |
| 824 | + }; | |
| 825 | + | |
| 826 | + /** | |
| 827 | + *设置该覆盖物的位置。 | |
| 828 | + *@param {Point} position 要设置的经纬度坐标。 | |
| 829 | + *@return 无返回值。 | |
| 830 | + */ | |
| 831 | + TextIconOverlay.prototype.setPosition = function (position) { | |
| 832 | + if(position && (!this._position || !this._position.equals(position))){ | |
| 833 | + this._position = position; | |
| 834 | + this._updatePosition(); | |
| 835 | + } | |
| 836 | + }; | |
| 837 | + | |
| 838 | + /** | |
| 839 | + *由文字信息获取风格数组的对应索引值。 | |
| 840 | + *内部默认的对应函数为文字转换为数字除以10的结果，比如文字8返回索引0，文字25返回索引2. | |
| 841 | + *如果需要自定义映射关系，请覆盖该函数。 | |
| 842 | + *@param {String} text 文字。 | |
| 843 | + *@param {Array<IconStyle>} styles 一组图标风格。 | |
| 844 | + *@return {Number} 对应的索引值。 | |
| 845 | + */ | |
| 846 | + TextIconOverlay.prototype.getStyleByText = function(text, styles){ | |
| 847 | + var count = parseInt(text); | |
| 848 | + var index = parseInt(count / 10); | |
| 849 | + index = Math.max(0, index); | |
| 850 | + index = Math.min(index, styles.length - 1); | |
| 851 | + return styles[index]; | |
| 852 | + } | |
| 853 | + | |
| 854 | + /** | |
| 855 | + *更新相应的CSS。 | |
| 856 | + *@return 无返回值。 | |
| 857 | + */ | |
| 858 | + TextIconOverlay.prototype._updateCss = function(){ | |
| 859 | + var style = this.getStyleByText(this._text, this._styles); | |
| 860 | + this._domElement.style.cssText = this._buildCssText(style); | |
| 861 | + }; | |
| 862 | + | |
| 863 | + /** | |
| 864 | + *更新覆盖物的显示文字。 | |
| 865 | + *@return 无返回值。 | |
| 866 | + */ | |
| 867 | + TextIconOverlay.prototype._updateText = function(){ | |
| 868 | + if (this._domElement) { | |
| 869 | + this._domElement.innerHTML = this._text; | |
| 870 | + } | |
| 871 | + }; | |
| 872 | + | |
| 873 | + /** | |
| 874 | + *调整覆盖物在地图上的位置更新覆盖物的显示文字。 | |
| 875 | + *@return 无返回值。 | |
| 876 | + */ | |
| 877 | + TextIconOverlay.prototype._updatePosition = function(){ | |
| 878 | + if (this._domElement && this._position) { | |
| 879 | + var style = this._domElement.style; | |
| 880 | + var pixelPosition= this._map.pointToOverlayPixel(this._position); | |
| 881 | + pixelPosition.x -= Math.ceil(parseInt(style.width) / 2); | |
| 882 | + pixelPosition.y -= Math.ceil(parseInt(style.height) / 2); | |
| 883 | + style.left = pixelPosition.x + "px"; | |
| 884 | + style.top = pixelPosition.y + "px"; | |
| 885 | + } | |
| 886 | + }; | |
| 887 | + | |
| 888 | + /** | |
| 889 | + * 为该覆盖物的HTML元素构建CSS | |
| 890 | + * @param {IconStyle} 一个图标的风格。 | |
| 891 | + * @return {String} 构建完成的CSSTEXT。 | |
| 892 | + */ | |
| 893 | + TextIconOverlay.prototype._buildCssText = function(style) { | |
| 894 | + //根据style来确定一些默认值 | |
| 895 | + var url = style['url']; | |
| 896 | + var size = style['size']; | |
| 897 | + var anchor = style['anchor']; | |
| 898 | + var offset = style['offset']; | |
| 899 | + var textColor = style['textColor'] || 'black'; | |
| 900 | + var textSize = style['textSize'] || 10; | |
| 901 | + | |
| 902 | + var csstext = []; | |
| 903 | + if (T.browser["ie"] < 7) { | |
| 904 | + csstext.push('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(' + | |
| 905 | + 'sizingMethod=scale,src="' + url + '");'); | |
| 906 | + } else { | |
| 907 | + csstext.push('background-image:url(' + url + ');'); | |
| 908 | + var backgroundPosition = '0 0'; | |
| 909 | + (offset instanceof BMap.Size) && (backgroundPosition = offset.width + 'px' + ' ' + offset.height + 'px'); | |
| 910 | + csstext.push('background-position:' + backgroundPosition + ';'); | |
| 911 | + } | |
| 912 | + | |
| 913 | + if (size instanceof BMap.Size){ | |
| 914 | + if (anchor instanceof BMap.Size) { | |
| 915 | + if (anchor.height > 0 && anchor.height < size.height) { | |
| 916 | + csstext.push('height:' + (size.height - anchor.height) + 'px; padding-top:' + anchor.height + 'px;'); | |
| 917 | + } | |
| 918 | + if(anchor.width > 0 && anchor.width < size.width){ | |
| 919 | + csstext.push('width:' + (size.width - anchor.width) + 'px; padding-left:' + anchor.width + 'px;'); | |
| 920 | + } | |
| 921 | + } else { | |
| 922 | + csstext.push('height:' + size.height + 'px; line-height:' + size.height + 'px;'); | |
| 923 | + csstext.push('width:' + size.width + 'px; text-align:center;'); | |
| 924 | + } | |
| 925 | + } | |
| 926 | + | |
| 927 | + csstext.push('cursor:pointer; color:' + textColor + '; position:absolute; font-size:' + | |
| 928 | + textSize + 'px; font-family:Arial,sans-serif; font-weight:bold'); | |
| 929 | + return csstext.join(''); | |
| 930 | + }; | |
| 931 | + | |
| 932 | + | |
| 933 | + /** | |
| 934 | + | |
| 935 | + * 当鼠标点击该覆盖物时会触发该事件 | |
| 936 | + | |
| 937 | + * @name TextIconOverlay#click | |
| 938 | + | |
| 939 | + * @event | |
| 940 | + | |
| 941 | + * @param {Event Object} e 回调函数会返回event参数，包括以下返回值： | |
| 942 | + | |
| 943 | + * <br />"<b>type</b> : {String} 事件类型 | |
| 944 | + | |
| 945 | + * <br />"<b>target</b>：{BMapLib.TextIconOverlay} 事件目标 | |
| 946 | + | |
| 947 | + * | |
| 948 | + | |
| 949 | + */ | |
| 950 | + | |
| 951 | + /** | |
| 952 | + | |
| 953 | + * 当鼠标进入该覆盖物区域时会触发该事件 | |
| 954 | + | |
| 955 | + * @name TextIconOverlay#mouseover | |
| 956 | + | |
| 957 | + * @event | |
| 958 | + * @param {Event Object} e 回调函数会返回event参数，包括以下返回值： | |
| 959 | + | |
| 960 | + * <br />"<b>type</b> : {String} 事件类型 | |
| 961 | + | |
| 962 | + * <br />"<b>target</b>：{BMapLib.TextIconOverlay} 事件目标 | |
| 963 | + | |
| 964 | + * <br />"<b>point</b> : {BMap.Point} 最新添加上的节点BMap.Point对象 | |
| 965 | + | |
| 966 | + * <br />"<b>pixel</b>：{BMap.pixel} 最新添加上的节点BMap.Pixel对象 | |
| 967 | + | |
| 968 | + * | |
| 969 | + | |
| 970 | + * @example <b>参考示例：</b><br /> | |
| 971 | + | |
| 972 | + * myTextIconOverlay.addEventListener("mouseover", function(e) { alert(e.point); }); | |
| 973 | + | |
| 974 | + */ | |
| 975 | + | |
| 976 | + /** | |
| 977 | + | |
| 978 | + * 当鼠标离开该覆盖物区域时会触发该事件 | |
| 979 | + | |
| 980 | + * @name TextIconOverlay#mouseout | |
| 981 | + | |
| 982 | + * @event | |
| 983 | + | |
| 984 | + * @param {Event Object} e 回调函数会返回event参数，包括以下返回值： | |
| 985 | + | |
| 986 | + * <br />"<b>type</b> : {String} 事件类型 | |
| 987 | + | |
| 988 | + * <br />"<b>target</b>：{BMapLib.TextIconOverlay} 事件目标 | |
| 989 | + | |
| 990 | + * <br />"<b>point</b> : {BMap.Point} 最新添加上的节点BMap.Point对象 | |
| 991 | + | |
| 992 | + * <br />"<b>pixel</b>：{BMap.pixel} 最新添加上的节点BMap.Pixel对象 | |
| 993 | + | |
| 994 | + * | |
| 995 | + | |
| 996 | + * @example <b>参考示例：</b><br /> | |
| 997 | + | |
| 998 | + * myTextIconOverlay.addEventListener("mouseout", function(e) { alert(e.point); }); | |
| 999 | + | |
| 1000 | + */ | |
| 1001 | + | |
| 1002 | + | |
| 1003 | + /** | |
| 1004 | + * 为该覆盖物绑定一系列事件 | |
| 1005 | + * 当前支持click mouseover mouseout | |
| 1006 | + * @return 无返回值。 | |
| 1007 | + */ | |
| 1008 | + TextIconOverlay.prototype._bind = function(){ | |
| 1009 | + if (!this._domElement){ | |
| 1010 | + return; | |
| 1011 | + } | |
| 1012 | + | |
| 1013 | + var me = this; | |
| 1014 | + var map = this._map; | |
| 1015 | + | |
| 1016 | + var BaseEvent = T.lang.Event; | |
| 1017 | + function eventExtend(e, be){ | |
| 1018 | + var elem = e.srcElement || e.target; | |
| 1019 | + var x = e.clientX || e.pageX; | |
| 1020 | + var y = e.clientY || e.pageY; | |
| 1021 | + if (e && be && x && y && elem){ | |
| 1022 | + var offset = T.dom.getPosition(map.getContainer()); | |
| 1023 | + be.pixel = new BMap.Pixel(x - offset.left, y - offset.top); | |
| 1024 | + be.point = map.pixelToPoint(be.pixel); | |
| 1025 | + } | |
| 1026 | + return be; | |
| 1027 | + }//给事件参数增加pixel和point两个值 | |
| 1028 | + | |
| 1029 | + T.event.on(this._domElement,"mouseover", function(e){ | |
| 1030 | + me.dispatchEvent(eventExtend(e, new BaseEvent("onmouseover"))); | |
| 1031 | + }); | |
| 1032 | + T.event.on(this._domElement,"mouseout", function(e){ | |
| 1033 | + me.dispatchEvent(eventExtend(e, new BaseEvent("onmouseout"))); | |
| 1034 | + }); | |
| 1035 | + T.event.on(this._domElement,"click", function(e){ | |
| 1036 | + me.dispatchEvent(eventExtend(e, new BaseEvent("onclick"))); | |
| 1037 | + }); | |
| 1038 | + }; | |
| 1039 | + | |
| 1040 | 1040 | })(); |
| 1041 | 1041 | \ No newline at end of file | ... | ... |
src/main/resources/static/gpsTest/test.html
| 1 | -<!DOCTYPE html> | |
| 2 | -<html> | |
| 3 | -<head> | |
| 4 | -<meta charset="UTF-8"> | |
| 5 | -<title>GPS点测试</title> | |
| 6 | -<meta name=”renderer” content=”webkit”> | |
| 7 | -<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″> | |
| 8 | - | |
| 9 | -<meta http-equiv="Pragma" content="no-cache"> | |
| 10 | -<meta http-equiv="Cache-control" content="no-cache"> | |
| 11 | -<meta http-equiv="Cache" content="no-cache"> | |
| 12 | -<head> | |
| 13 | -<!-- select2 下拉框插件 --> | |
| 14 | -<link href="/metronic_v4.5.4/plugins/select2/css/select2.min.css" | |
| 15 | - rel="stylesheet" type="text/css" /> | |
| 16 | -<style type="text/css"> | |
| 17 | -html,body { | |
| 18 | - height: 100%; | |
| 19 | - overflow: hidden; | |
| 20 | -} | |
| 21 | - | |
| 22 | -#mapContainer { | |
| 23 | - width: 100%; | |
| 24 | - height: calc(100% - 93px); | |
| 25 | -} | |
| 26 | - | |
| 27 | -form { | |
| 28 | - padding: 25px; | |
| 29 | -} | |
| 30 | - | |
| 31 | -form .item { | |
| 32 | - display: inline-block; | |
| 33 | -} | |
| 34 | - | |
| 35 | -form .item input { | |
| 36 | - height: 26px; | |
| 37 | - width: 110px; | |
| 38 | -} | |
| 39 | - | |
| 40 | -form .item select { | |
| 41 | - height: 32px; | |
| 42 | -} | |
| 43 | -</style> | |
| 44 | -</head> | |
| 45 | -<body> | |
| 46 | - <form action=""> | |
| 47 | - <div class="item"> | |
| 48 | - 线路： <select name="xl" style="width: 150px;"> | |
| 49 | - </select> | |
| 50 | - </div> | |
| 51 | - <div class="item"> | |
| 52 | - 方向： <select name="directions" style="width: 70px;"> | |
| 53 | - <option value="0">上行</option> | |
| 54 | - <option value="1">下行</option> | |
| 55 | - </select> | |
| 56 | - </div> | |
| 57 | - <div class="item"> | |
| 58 | - 设备号： <input name="device" value="059L0903" /> | |
| 59 | - </div> | |
| 60 | - <div class="item"> | |
| 61 | - 开始时间戳： <input type="number" name="startTime" value="1461380940000" /> | |
| 62 | - </div> | |
| 63 | - <div class="item"> | |
| 64 | - 结束时间戳： <input type="number" name="endTime" value="1461381960000" /> | |
| 65 | - </div> | |
| 66 | - <div class="item"> | |
| 67 | - <input type="button" value="查询GPS轨迹" onclick="searchGps()"> | |
| 68 | - </div> | |
| 69 | - <div class="item"> | |
| 70 | - <input type="button" value="开启测距" onclick="myDis.open();" | |
| 71 | - style="width: 75px" /> <input type="button" value="关闭测距" | |
| 72 | - onclick="myDis.close()" style="width: 75px" /> | |
| 73 | - | |
| 74 | - </div> | |
| 75 | - | |
| 76 | - <div class="item"> | |
| 77 | - <a target="_blank" href="http://tool.chinaz.com/Tools/unixtime.aspx" | |
| 78 | - style="font-size: 12px; color: red;">毫秒时间戳转换</a> | |
| 79 | - </div> | |
| 80 | - </form> | |
| 81 | - | |
| 82 | - <div id="mapContainer"></div> | |
| 83 | - <script src="/assets/plugins/pinyin.js"></script> | |
| 84 | - <script src="/metronic_v4.5.4/plugins/jquery.min.js"></script> | |
| 85 | - <script src="/assets/plugins/jquery.serializejson.js"></script> | |
| 86 | - <script | |
| 87 | - src="http://api.map.baidu.com/api?v=2.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script> | |
| 88 | - <script type="text/javascript" | |
| 89 | - src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script> | |
| 90 | - <!-- moment.js 日期处理类库 --> | |
| 91 | - <script src="/assets/plugins/moment-with-locales.js"></script> | |
| 92 | - <!-- select2 下拉框 --> | |
| 93 | - <script src="/metronic_v4.5.4/plugins/select2/js/select2.full.min.js"></script> | |
| 94 | - <script> | |
| 95 | - | |
| 96 | - var inMark = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA1CAYAAABSrotqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAGW0lEQVRYw62XX2wc1RWHv3vv7NhrQkKCIa0poaKRmjdUFUGr+IH+ITy0Kg/0qVRV1ZamVV95al94oPSBVmoRUZTIKRFBLW1aapBK6gIChYTgFJRQHoITqCCO7eC1vY7t2Z1/954+zK69Xs9mx4mPdLWjmTvnO79z7zl3VlHAvv3XmXuM8R4EBpVSu1DqpiQRBJlH5APn5KQ4NzzycP/pbr7U1R5+6y+Vr2njP6EVX1FKoRTZAOJUQMBlP4gIIrwtNvnlyMO3vL4u4AND49vMjZsOaqMfUgpMA+ZEiBJIrJAkQslT+B4YrXACzknj1x4N6rWfnfrJ7XNdgd888NEOs+XmEaPVLq0zRVEiRGnmsGlJsnKtFfT4ih5PIQJWwDr3QRJUHzix9wsXOwLvOzDW72269ZQxeqcxIAL1WLAtoDzgMlgr+vwsG6kTrOXDoDL91Xcf/eLM8pxWuJT7j4hSO5UC66AW5cM6mXNCEDmsA60UAjv9rf1HWoU1L9Tg0OT3dU/5Wd9TeFpRiwWRFZhNhSvTMbX5hDh0uNhR6jWUb/LYvL0H460kSyko+xrrhCgVJAp/MPrzgecAMVkuH/PuuHv335VSW3s8TZgIrgUWzKdMXagRLqU4KygF4gRnhSiwLFZivF6N32tWAhTwPUWSCmhz18RC3z4+fsNpgN3f+/H9oO4ESO3qNNaupFQ+qWeRa5U7AGY/rlO7kq5Kb+qkUUrqzru/+8M9zTXUeKUHs92miG3LmlhhbjJCGVVoVCdCnG3ZyamgVRaQLvV+B9AeoJUu3QtgdLZWy6mspgigzdpyFS+/ZwTVhBv7/WyOgDbZBtTa3NMEKqX0Dsg6RqvFoUN3cOyczr2f1F3+FtbmDkB5gEKzFQFr215OBe3lO9Yu33GSrg47XUnxtiYQRKUgpdadCaAbnSMfmK+8Pf3L74ssATSAtorSt7a/vKnPUA87pMhTa9cAKJfzMwKysAwU56aUWQvcssUQJ/lA6aBw8xaPJHe+m4asLERcOpb3cvkGg1/SeEatGSZn+CVFeZPJDQRnxwDJgDY5nzcniIXbBkq5zo3Jyqg5PAMDAz5BlL/oLo0uLAOT4MqZvEnWCbEoPjfgU/LUKoDRK/BSSXHbgE8kqmOzt+HiGUA8QBY+Ov127823u0YAq1VGDno0n9/hs7BoWQocSSKIQKmk6OvTbN5sqAZCLeqw3uBmz791ChBFdmL4g4dnziptdnXYYhit2FxWlH2N72WHcmqhFjkW61c/xsTZc6OP3PIlIPayAHA2Dt/wem/oCLROqAZCNchU5B3AnczF9dcBR0sKxQZzI4U9rNOS+vwrDWHLJ76bOH7gTZBwo2GCBDOv/OF4Q+EyUCb+sW/JJeGxDQfG4b8vjRwK2hUKYNPF6gsbDUyC6lHAtgMB3NTfnv5ns+dtkL6F2eF9/6KRznagXDyxvyZx9PJG4WxUf+niif01Wtr8KiBgo8VPj24UMA5mXqAlne1AAPfhc79+DZHZ66aJq0wM/eJVWtKZB5Tqu0frNlr80/Xy0jB4fmbsZNQVCNj6+LlDoFxh7+2mkHjy3OFGOtse5U2H3sE/Xn5ZeT33dfJ5tdYmNjk5+tPt9wMhbd8Fed8DAqTJwuyhaxWYLM4MASk5HyGdPkDshT8/+hLiLq8XJuIu/+/Ir4bz0nk1oMyNHgttuPTseoGuvnh4/uzwqtorBATszNnXDqyvoUu48N6rB2mrvSJAAHd+/48mbVgr3AhsGDw/NvTIFG2lUBQoQFr/5L2nipSIgAvH//s0HTZL01QXPwro3X3o8rAu9expfdBeFpJGx0b3fvYhckqhqMJllVFl/PfdFNanx5/qpq6IwmZQvYPPTB9XpvTlPIWSxqOjez/z9YY6181ZN3NAEs5d+k2nCfHc5JNA0g1WVGGLyspbynh3tSp0aXLm9N7tg0XUFVXYVJlG81NPrlE3P/k7srUr1OyLAgHS/zzxjRex9v3mDbHp+2d/u+fFBrBwqoqaUKnEYfXS480b4dzk41QqMV125vWYBvoGn5l+596Dn74D9K0z6MY/4M7WvqkESOPK+GNRlsRm3eXNK+SwVYkPlBpBacA05uvGfVgpBSFr2K4RRALE5GykTif+toZT1WFu87pVSft1Asy1q70WhYrVwOa4ZoXred7JOq7h/wF6az0ukZgX/AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0wNy0yNVQyMTo1MDo0MyswODowMOgS43cAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTMtMTEtMjBUMjI6NDc6MTErMDg6MDAou1syAAAATnRFWHRzb2Z0d2FyZQBJbWFnZU1hZ2ljayA2LjguOC0xMCBRMTYgeDg2XzY0IDIwMTUtMDctMTkgaHR0cDovL3d3dy5pbWFnZW1hZ2ljay5vcmcFDJw1AAAAGHRFWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzADGn/7svAAAAF3RFWHRUaHVtYjo6SW1hZ2U6OkhlaWdodAA1Mwmpb+QAAAAWdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgAMjgpleAmAAAAGXRFWHRUaHVtYjo6TWltZXR5cGUAaW1hZ2UvcG5nP7JWTgAAABd0RVh0VGh1bWI6Ok1UaW1lADEzODQ5NTg4MzEXUMEwAAAAE3RFWHRUaHVtYjo6U2l6ZQA0LjUzS0JC/AyPiAAAAFp0RVh0VGh1bWI6OlVSSQBmaWxlOi8vL2hvbWUvd3d3cm9vdC93d3cuZWFzeWljb24ubmV0L2Nkbi1pbWcuZWFzeWljb24uY24vc3JjLzExMjk3LzExMjk3NzIucG5nqXNeUQAAAABJRU5ErkJggg=='; | |
| 97 | - var outMark = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAvCAMAAAC18jgTAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABO1BMVEUAAAAiu4ggv40gvowgvowgvosgvowfvo0jv44hv40gvosgvowcxo4fvowgvowdvYogv4whvo0gvowhvYwrqoAhv4wnxIkgv4wA//8gvIshvosgvowhvIshvowgvowrv5Ugv4ohvosgvowhv4wgv4whvYwXuYsgvowgvowiu4gfvo0zzJkhvowktpIgvowgv40hvo0gv4wgvowAqqogvosgvowjv4sgvowivIskv4khvowgvYsiu44hvosfvI0hv4sgvYofvowgvowgv40gv4wjuYsgvowhvowfvIsgvYsgvo0hvoxAv4Agv4wgvowgvoshvo0mv4whvowgvowfwo8gv4wgv40duokAAAAfvYsgvYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAYjGUYj2kAAAAAAAAAAAAgvoz///9v2GMAAAAAZ3RSTlMAD1eZyOr4miSc950Jivoj0i/pfAarDaoBWH3JLuv5DDDL0ZunbQvu/h6CBbQO5jhOkNwDtfAsz0Qc42EtdUGLYKKOwsYW7/s5f7nMBCj9N40U8/YZh48aAaOmAggNERMWF0lLGBkanzLKGQAAAAFiS0dEaMts9CIAAAGZSURBVDjLfZRnW8IwFIUvyN6FUlCx4AZxKw7cA/eeKKNUwfz/f2ChZNAmnC+U+54m9548KQCRwznicns8bpfX6QC7fP4AIgoEfRYcCkfQgCLhEMujMWRTLEq55EYcuSXyPpcbjv4aoRgSKGb2EUZChXvzRcSGSHfaIP0fT0iyLCXitOI38qP5JBWzKSVFE3OAk/I0HiudJMVR8JL1FRqMQgb3ggs/Jthox3B1HIg3wxoyuDoBKn6UWYOMqyp4uIYsNfC3yNEtJoc3OQXT3DFJmDNMUCkaFI1yFubmqcMedb4AsMAeVqaYzbGHtWj4l5bFx51f6a64mhca/OaeayK+3m9qY5PPS1tk7G0eV3doMLtlToN7bLT7JZvhYPByHqoWfmS93ceD/CRtNcApy89kG4fiOeXlCucLAoULzC+vgCvSxjUIdGPy2zuR4b53jx8eQagn5gi5en5B6PVtiAHeEfoYxqHiUT9FrNrT17f5a8O1eqOptXT951fXW1qzUa9ZXtfanU7nry/jsa1VuSsYtjZ3BdIDFin/A1AVNdoKDyAYAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTA3LTI1VDIxOjUwOjQzKzA4OjAw6BLjdwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMy0xMS0yMFQyMjo0NzoxMyswODowML8kShsAAABOdEVYdHNvZnR3YXJlAEltYWdlTWFnaWNrIDYuOC44LTEwIFExNiB4ODZfNjQgMjAxNS0wNy0xOSBodHRwOi8vd3d3LmltYWdlbWFnaWNrLm9yZwUMnDUAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAXdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADQ3F9+avAAAABZ0RVh0VGh1bWI6OkltYWdlOjpXaWR0aAAzMtBbOHkAAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFnZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTM4NDk1ODgzM/leoBwAAAATdEVYdFRodW1iOjpTaXplADQuMDFLQkKe5chzAAAAWnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L3d3dy5lYXN5aWNvbi5uZXQvY2RuLWltZy5lYXN5aWNvbi5jbi9zcmMvMTEyOTcvMTEyOTc4Ni5wbmetpUpEAAAAAElFTkSuQmCC'; | |
| 98 | - | |
| 99 | - var inOuts = [outMark, inMark]; | |
| 100 | - | |
| 101 | - var stationCodeMap = {}; | |
| 102 | - | |
| 103 | - var map = new BMap.Map("mapContainer"); | |
| 104 | - map.centerAndZoom(new BMap.Point(121.544336, 31.221315), 15); | |
| 105 | - map.enableScrollWheelZoom(); | |
| 106 | - //中心点和缩放级别 | |
| 107 | - map.setCurrentCity("上海"); | |
| 108 | - var myDis = new BMapLib.DistanceTool(map); | |
| 109 | - | |
| 110 | - | |
| 111 | - $.get('/line/all', function(rs){ | |
| 112 | - var data = []; | |
| 113 | - $.each(rs, function(){ | |
| 114 | - data.push({id: this.id, text: this.name}); | |
| 115 | - }); | |
| 116 | - | |
| 117 | - initPinYinSelect2('select[name=xl]', data); | |
| 118 | - }); | |
| 119 | - | |
| 120 | - function searchGps(){ | |
| 121 | - var params = $('form').serializeJSON(); | |
| 122 | - //查询线路路由站点 | |
| 123 | - $.get('/test/gps/route', params, function(rs){ | |
| 124 | - var array = rs[0].children[0].children | |
| 125 | - ,coords,circle, cdsArray, points, polygon; | |
| 126 | - //画出站点 | |
| 127 | - console.log(array); | |
| 128 | - $.each(array, function(){ | |
| 129 | - stationCodeMap[this.stationStationCod] = this.name; | |
| 130 | - if(this.stationShapesType === 'r'){ | |
| 131 | - //画圆 | |
| 132 | - coords = this.stationBJwpoints.split(' '); | |
| 133 | - circle = new BMap.Circle(new BMap.Point(coords[0], coords[1]),this.stationRadius); | |
| 134 | - circle.setStrokeColor('red'); | |
| 135 | - circle.setStrokeWeight(2) | |
| 136 | - map.addOverlay(circle); | |
| 137 | - } | |
| 138 | - else if(this.stationShapesType === 'd'){ | |
| 139 | - //画多边形 | |
| 140 | - coords = this.stationBPolygonGrid.substring(9, this.stationBPolygonGrid.length - 2); | |
| 141 | - cdsArray = coords.split(','); | |
| 142 | - points = []; | |
| 143 | - $.each(cdsArray, function(){ | |
| 144 | - coords = this.split(' '); | |
| 145 | - points.push(new BMap.Point(coords[0], coords[1])); | |
| 146 | - }); | |
| 147 | - | |
| 148 | - polygon = new BMap.Polygon(points, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); | |
| 149 | - map.addOverlay(polygon); | |
| 150 | - } | |
| 151 | - }); | |
| 152 | - coords = array[array.length / 2].stationBJwpoints.split(' '); | |
| 153 | - map.setCenter(new BMap.Point(coords[0], coords[1])) | |
| 154 | - }); | |
| 155 | - | |
| 156 | - //查询gps点 | |
| 157 | - $.get('/gps/history/' + params.device, params, function(gpsArray){ | |
| 158 | - console.log(stationCodeMap); | |
| 159 | - var marker, label, point, state, text; | |
| 160 | - $.each(gpsArray, function(){ | |
| 161 | - point = new BMap.Point(this.lon, this.lat); | |
| 162 | - marker = new BMap.Marker(point); | |
| 163 | - state = this.inout_stop; | |
| 164 | - | |
| 165 | - if(state == 0 || state == 1){ | |
| 166 | - text = state == 0?'出':'进'; | |
| 167 | - | |
| 168 | - console.log(stationCodeMap[this.stopNo], this); | |
| 169 | - marker.setIcon(new BMap.Icon(inOuts[this.inout_stop], new BMap.Size(25,25))); | |
| 170 | - label = new BMap.Label( | |
| 171 | - stationCodeMap[this.stopNo] + '/' +moment(this.ts).format('HH:mm.ss') + ' -'+text | |
| 172 | - , {position: point, offset: new BMap.Size(-25,-18)}); | |
| 173 | - marker.setLabel(label); | |
| 174 | - } | |
| 175 | - else{ | |
| 176 | - label = new BMap.Label(moment(this.ts).format('HH:mm.ss') | |
| 177 | - , {position: point, offset: new BMap.Size(-25,-18)}); | |
| 178 | - marker.setLabel(label); | |
| 179 | - } | |
| 180 | - | |
| 181 | - map.addOverlay(marker); | |
| 182 | - }); | |
| 183 | - }); | |
| 184 | - } | |
| 185 | - | |
| 186 | - | |
| 187 | - /** | |
| 188 | - * 支持拼音搜索的select2 | |
| 189 | - * @param selector | |
| 190 | - * @param data | |
| 191 | - */ | |
| 192 | - function initPinYinSelect2(selector, data, cb){ | |
| 193 | - | |
| 194 | - $.each(data, function(){ | |
| 195 | - this.fullChars = pinyin.getFullChars(this.text).toUpperCase(); | |
| 196 | - this.camelChars = pinyin.getCamelChars(this.text); | |
| 197 | - }); | |
| 198 | - | |
| 199 | - $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) { | |
| 200 | - $(selector).select2({ | |
| 201 | - data: data, | |
| 202 | - matcher: oldMatcher(function(term, text, item){ | |
| 203 | - var upTerm = term.toUpperCase(); | |
| 204 | - if(item.fullChars.indexOf(upTerm) != -1 | |
| 205 | - || item.camelChars.indexOf(upTerm) != -1) | |
| 206 | - return true; | |
| 207 | - | |
| 208 | - return text.indexOf(term) != -1; | |
| 209 | - }) | |
| 210 | - }); | |
| 211 | - | |
| 212 | - cb && cb(); | |
| 213 | - }); | |
| 214 | - | |
| 215 | - return $(selector); | |
| 216 | - } | |
| 217 | -</script> | |
| 218 | -</body> | |
| 219 | -</html> | |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html> | |
| 3 | +<head> | |
| 4 | +<meta charset="UTF-8"> | |
| 5 | +<title>GPS点测试</title> | |
| 6 | +<meta name=”renderer” content=”webkit”> | |
| 7 | +<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″> | |
| 8 | + | |
| 9 | +<meta http-equiv="Pragma" content="no-cache"> | |
| 10 | +<meta http-equiv="Cache-control" content="no-cache"> | |
| 11 | +<meta http-equiv="Cache" content="no-cache"> | |
| 12 | +<head> | |
| 13 | +<!-- select2 下拉框插件 --> | |
| 14 | +<link href="/metronic_v4.5.4/plugins/select2/css/select2.min.css" | |
| 15 | + rel="stylesheet" type="text/css" /> | |
| 16 | +<style type="text/css"> | |
| 17 | +html,body { | |
| 18 | + height: 100%; | |
| 19 | + overflow: hidden; | |
| 20 | +} | |
| 21 | + | |
| 22 | +#mapContainer { | |
| 23 | + width: 100%; | |
| 24 | + height: calc(100% - 93px); | |
| 25 | +} | |
| 26 | + | |
| 27 | +form { | |
| 28 | + padding: 25px; | |
| 29 | +} | |
| 30 | + | |
| 31 | +form .item { | |
| 32 | + display: inline-block; | |
| 33 | +} | |
| 34 | + | |
| 35 | +form .item input { | |
| 36 | + height: 26px; | |
| 37 | + width: 110px; | |
| 38 | +} | |
| 39 | + | |
| 40 | +form .item select { | |
| 41 | + height: 32px; | |
| 42 | +} | |
| 43 | +</style> | |
| 44 | +</head> | |
| 45 | +<body> | |
| 46 | + <form action=""> | |
| 47 | + <div class="item"> | |
| 48 | + 线路： <select name="xl" style="width: 150px;"> | |
| 49 | + </select> | |
| 50 | + </div> | |
| 51 | + <div class="item"> | |
| 52 | + 方向： <select name="directions" style="width: 70px;"> | |
| 53 | + <option value="0">上行</option> | |
| 54 | + <option value="1">下行</option> | |
| 55 | + </select> | |
| 56 | + </div> | |
| 57 | + <div class="item"> | |
| 58 | + 设备号： <input name="device" value="059L0903" /> | |
| 59 | + </div> | |
| 60 | + <div class="item"> | |
| 61 | + 开始时间戳： <input type="number" name="startTime" value="1461380940000" /> | |
| 62 | + </div> | |
| 63 | + <div class="item"> | |
| 64 | + 结束时间戳： <input type="number" name="endTime" value="1461381960000" /> | |
| 65 | + </div> | |
| 66 | + <div class="item"> | |
| 67 | + <input type="button" value="查询GPS轨迹" onclick="searchGps()"> | |
| 68 | + </div> | |
| 69 | + <div class="item"> | |
| 70 | + <input type="button" value="开启测距" onclick="myDis.open();" | |
| 71 | + style="width: 75px" /> <input type="button" value="关闭测距" | |
| 72 | + onclick="myDis.close()" style="width: 75px" /> | |
| 73 | + | |
| 74 | + </div> | |
| 75 | + | |
| 76 | + <div class="item"> | |
| 77 | + <a target="_blank" href="http://tool.chinaz.com/Tools/unixtime.aspx" | |
| 78 | + style="font-size: 12px; color: red;">毫秒时间戳转换</a> | |
| 79 | + </div> | |
| 80 | + </form> | |
| 81 | + | |
| 82 | + <div id="mapContainer"></div> | |
| 83 | + <script src="/assets/plugins/pinyin.js"></script> | |
| 84 | + <script src="/metronic_v4.5.4/plugins/jquery.min.js"></script> | |
| 85 | + <script src="/assets/plugins/jquery.serializejson.js"></script> | |
| 86 | + <script | |
| 87 | + src="//api.map.baidu.com/api?v=2.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script> | |
| 88 | + <script type="text/javascript" | |
| 89 | + src="//api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script> | |
| 90 | + <!-- moment.js 日期处理类库 --> | |
| 91 | + <script src="/assets/plugins/moment-with-locales.js"></script> | |
| 92 | + <!-- select2 下拉框 --> | |
| 93 | + <script src="/metronic_v4.5.4/plugins/select2/js/select2.full.min.js"></script> | |
| 94 | + <script> | |
| 95 | + | |
| 96 | + var inMark = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA1CAYAAABSrotqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAGW0lEQVRYw62XX2wc1RWHv3vv7NhrQkKCIa0poaKRmjdUFUGr+IH+ITy0Kg/0qVRV1ZamVV95al94oPSBVmoRUZTIKRFBLW1aapBK6gIChYTgFJRQHoITqCCO7eC1vY7t2Z1/954+zK69Xs9mx4mPdLWjmTvnO79z7zl3VlHAvv3XmXuM8R4EBpVSu1DqpiQRBJlH5APn5KQ4NzzycP/pbr7U1R5+6y+Vr2njP6EVX1FKoRTZAOJUQMBlP4gIIrwtNvnlyMO3vL4u4AND49vMjZsOaqMfUgpMA+ZEiBJIrJAkQslT+B4YrXACzknj1x4N6rWfnfrJ7XNdgd888NEOs+XmEaPVLq0zRVEiRGnmsGlJsnKtFfT4ih5PIQJWwDr3QRJUHzix9wsXOwLvOzDW72269ZQxeqcxIAL1WLAtoDzgMlgr+vwsG6kTrOXDoDL91Xcf/eLM8pxWuJT7j4hSO5UC66AW5cM6mXNCEDmsA60UAjv9rf1HWoU1L9Tg0OT3dU/5Wd9TeFpRiwWRFZhNhSvTMbX5hDh0uNhR6jWUb/LYvL0H460kSyko+xrrhCgVJAp/MPrzgecAMVkuH/PuuHv335VSW3s8TZgIrgUWzKdMXagRLqU4KygF4gRnhSiwLFZivF6N32tWAhTwPUWSCmhz18RC3z4+fsNpgN3f+/H9oO4ESO3qNNaupFQ+qWeRa5U7AGY/rlO7kq5Kb+qkUUrqzru/+8M9zTXUeKUHs92miG3LmlhhbjJCGVVoVCdCnG3ZyamgVRaQLvV+B9AeoJUu3QtgdLZWy6mspgigzdpyFS+/ZwTVhBv7/WyOgDbZBtTa3NMEKqX0Dsg6RqvFoUN3cOyczr2f1F3+FtbmDkB5gEKzFQFr215OBe3lO9Yu33GSrg47XUnxtiYQRKUgpdadCaAbnSMfmK+8Pf3L74ssATSAtorSt7a/vKnPUA87pMhTa9cAKJfzMwKysAwU56aUWQvcssUQJ/lA6aBw8xaPJHe+m4asLERcOpb3cvkGg1/SeEatGSZn+CVFeZPJDQRnxwDJgDY5nzcniIXbBkq5zo3Jyqg5PAMDAz5BlL/oLo0uLAOT4MqZvEnWCbEoPjfgU/LUKoDRK/BSSXHbgE8kqmOzt+HiGUA8QBY+Ov127823u0YAq1VGDno0n9/hs7BoWQocSSKIQKmk6OvTbN5sqAZCLeqw3uBmz791ChBFdmL4g4dnziptdnXYYhit2FxWlH2N72WHcmqhFjkW61c/xsTZc6OP3PIlIPayAHA2Dt/wem/oCLROqAZCNchU5B3AnczF9dcBR0sKxQZzI4U9rNOS+vwrDWHLJ76bOH7gTZBwo2GCBDOv/OF4Q+EyUCb+sW/JJeGxDQfG4b8vjRwK2hUKYNPF6gsbDUyC6lHAtgMB3NTfnv5ns+dtkL6F2eF9/6KRznagXDyxvyZx9PJG4WxUf+niif01Wtr8KiBgo8VPj24UMA5mXqAlne1AAPfhc79+DZHZ66aJq0wM/eJVWtKZB5Tqu0frNlr80/Xy0jB4fmbsZNQVCNj6+LlDoFxh7+2mkHjy3OFGOtse5U2H3sE/Xn5ZeT33dfJ5tdYmNjk5+tPt9wMhbd8Fed8DAqTJwuyhaxWYLM4MASk5HyGdPkDshT8/+hLiLq8XJuIu/+/Ir4bz0nk1oMyNHgttuPTseoGuvnh4/uzwqtorBATszNnXDqyvoUu48N6rB2mrvSJAAHd+/48mbVgr3AhsGDw/NvTIFG2lUBQoQFr/5L2nipSIgAvH//s0HTZL01QXPwro3X3o8rAu9expfdBeFpJGx0b3fvYhckqhqMJllVFl/PfdFNanx5/qpq6IwmZQvYPPTB9XpvTlPIWSxqOjez/z9YY6181ZN3NAEs5d+k2nCfHc5JNA0g1WVGGLyspbynh3tSp0aXLm9N7tg0XUFVXYVJlG81NPrlE3P/k7srUr1OyLAgHS/zzxjRex9v3mDbHp+2d/u+fFBrBwqoqaUKnEYfXS480b4dzk41QqMV125vWYBvoGn5l+596Dn74D9K0z6MY/4M7WvqkESOPK+GNRlsRm3eXNK+SwVYkPlBpBacA05uvGfVgpBSFr2K4RRALE5GykTif+toZT1WFu87pVSft1Asy1q70WhYrVwOa4ZoXred7JOq7h/wF6az0ukZgX/AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0wNy0yNVQyMTo1MDo0MyswODowMOgS43cAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTMtMTEtMjBUMjI6NDc6MTErMDg6MDAou1syAAAATnRFWHRzb2Z0d2FyZQBJbWFnZU1hZ2ljayA2LjguOC0xMCBRMTYgeDg2XzY0IDIwMTUtMDctMTkgaHR0cDovL3d3dy5pbWFnZW1hZ2ljay5vcmcFDJw1AAAAGHRFWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzADGn/7svAAAAF3RFWHRUaHVtYjo6SW1hZ2U6OkhlaWdodAA1Mwmpb+QAAAAWdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgAMjgpleAmAAAAGXRFWHRUaHVtYjo6TWltZXR5cGUAaW1hZ2UvcG5nP7JWTgAAABd0RVh0VGh1bWI6Ok1UaW1lADEzODQ5NTg4MzEXUMEwAAAAE3RFWHRUaHVtYjo6U2l6ZQA0LjUzS0JC/AyPiAAAAFp0RVh0VGh1bWI6OlVSSQBmaWxlOi8vL2hvbWUvd3d3cm9vdC93d3cuZWFzeWljb24ubmV0L2Nkbi1pbWcuZWFzeWljb24uY24vc3JjLzExMjk3LzExMjk3NzIucG5nqXNeUQAAAABJRU5ErkJggg=='; | |
| 97 | + var outMark = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAvCAMAAAC18jgTAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABO1BMVEUAAAAiu4ggv40gvowgvowgvosgvowfvo0jv44hv40gvosgvowcxo4fvowgvowdvYogv4whvo0gvowhvYwrqoAhv4wnxIkgv4wA//8gvIshvosgvowhvIshvowgvowrv5Ugv4ohvosgvowhv4wgv4whvYwXuYsgvowgvowiu4gfvo0zzJkhvowktpIgvowgv40hvo0gv4wgvowAqqogvosgvowjv4sgvowivIskv4khvowgvYsiu44hvosfvI0hv4sgvYofvowgvowgv40gv4wjuYsgvowhvowfvIsgvYsgvo0hvoxAv4Agv4wgvowgvoshvo0mv4whvowgvowfwo8gv4wgv40duokAAAAfvYsgvYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAYjGUYj2kAAAAAAAAAAAAgvoz///9v2GMAAAAAZ3RSTlMAD1eZyOr4miSc950Jivoj0i/pfAarDaoBWH3JLuv5DDDL0ZunbQvu/h6CBbQO5jhOkNwDtfAsz0Qc42EtdUGLYKKOwsYW7/s5f7nMBCj9N40U8/YZh48aAaOmAggNERMWF0lLGBkanzLKGQAAAAFiS0dEaMts9CIAAAGZSURBVDjLfZRnW8IwFIUvyN6FUlCx4AZxKw7cA/eeKKNUwfz/f2ChZNAmnC+U+54m9548KQCRwznicns8bpfX6QC7fP4AIgoEfRYcCkfQgCLhEMujMWRTLEq55EYcuSXyPpcbjv4aoRgSKGb2EUZChXvzRcSGSHfaIP0fT0iyLCXitOI38qP5JBWzKSVFE3OAk/I0HiudJMVR8JL1FRqMQgb3ggs/Jthox3B1HIg3wxoyuDoBKn6UWYOMqyp4uIYsNfC3yNEtJoc3OQXT3DFJmDNMUCkaFI1yFubmqcMedb4AsMAeVqaYzbGHtWj4l5bFx51f6a64mhca/OaeayK+3m9qY5PPS1tk7G0eV3doMLtlToN7bLT7JZvhYPByHqoWfmS93ceD/CRtNcApy89kG4fiOeXlCucLAoULzC+vgCvSxjUIdGPy2zuR4b53jx8eQagn5gi5en5B6PVtiAHeEfoYxqHiUT9FrNrT17f5a8O1eqOptXT951fXW1qzUa9ZXtfanU7nry/jsa1VuSsYtjZ3BdIDFin/A1AVNdoKDyAYAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTA3LTI1VDIxOjUwOjQzKzA4OjAw6BLjdwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMy0xMS0yMFQyMjo0NzoxMyswODowML8kShsAAABOdEVYdHNvZnR3YXJlAEltYWdlTWFnaWNrIDYuOC44LTEwIFExNiB4ODZfNjQgMjAxNS0wNy0xOSBodHRwOi8vd3d3LmltYWdlbWFnaWNrLm9yZwUMnDUAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAXdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADQ3F9+avAAAABZ0RVh0VGh1bWI6OkltYWdlOjpXaWR0aAAzMtBbOHkAAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFnZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTM4NDk1ODgzM/leoBwAAAATdEVYdFRodW1iOjpTaXplADQuMDFLQkKe5chzAAAAWnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L3d3dy5lYXN5aWNvbi5uZXQvY2RuLWltZy5lYXN5aWNvbi5jbi9zcmMvMTEyOTcvMTEyOTc4Ni5wbmetpUpEAAAAAElFTkSuQmCC'; | |
| 98 | + | |
| 99 | + var inOuts = [outMark, inMark]; | |
| 100 | + | |
| 101 | + var stationCodeMap = {}; | |
| 102 | + | |
| 103 | + var map = new BMap.Map("mapContainer"); | |
| 104 | + map.centerAndZoom(new BMap.Point(121.544336, 31.221315), 15); | |
| 105 | + map.enableScrollWheelZoom(); | |
| 106 | + //中心点和缩放级别 | |
| 107 | + map.setCurrentCity("上海"); | |
| 108 | + var myDis = new BMapLib.DistanceTool(map); | |
| 109 | + | |
| 110 | + | |
| 111 | + $.get('/line/all', function(rs){ | |
| 112 | + var data = []; | |
| 113 | + $.each(rs, function(){ | |
| 114 | + data.push({id: this.id, text: this.name}); | |
| 115 | + }); | |
| 116 | + | |
| 117 | + initPinYinSelect2('select[name=xl]', data); | |
| 118 | + }); | |
| 119 | + | |
| 120 | + function searchGps(){ | |
| 121 | + var params = $('form').serializeJSON(); | |
| 122 | + //查询线路路由站点 | |
| 123 | + $.get('/test/gps/route', params, function(rs){ | |
| 124 | + var array = rs[0].children[0].children | |
| 125 | + ,coords,circle, cdsArray, points, polygon; | |
| 126 | + //画出站点 | |
| 127 | + console.log(array); | |
| 128 | + $.each(array, function(){ | |
| 129 | + stationCodeMap[this.stationStationCod] = this.name; | |
| 130 | + if(this.stationShapesType === 'r'){ | |
| 131 | + //画圆 | |
| 132 | + coords = this.stationBJwpoints.split(' '); | |
| 133 | + circle = new BMap.Circle(new BMap.Point(coords[0], coords[1]),this.stationRadius); | |
| 134 | + circle.setStrokeColor('red'); | |
| 135 | + circle.setStrokeWeight(2) | |
| 136 | + map.addOverlay(circle); | |
| 137 | + } | |
| 138 | + else if(this.stationShapesType === 'd'){ | |
| 139 | + //画多边形 | |
| 140 | + coords = this.stationBPolygonGrid.substring(9, this.stationBPolygonGrid.length - 2); | |
| 141 | + cdsArray = coords.split(','); | |
| 142 | + points = []; | |
| 143 | + $.each(cdsArray, function(){ | |
| 144 | + coords = this.split(' '); | |
| 145 | + points.push(new BMap.Point(coords[0], coords[1])); | |
| 146 | + }); | |
| 147 | + | |
| 148 | + polygon = new BMap.Polygon(points, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); | |
| 149 | + map.addOverlay(polygon); | |
| 150 | + } | |
| 151 | + }); | |
| 152 | + coords = array[array.length / 2].stationBJwpoints.split(' '); | |
| 153 | + map.setCenter(new BMap.Point(coords[0], coords[1])) | |
| 154 | + }); | |
| 155 | + | |
| 156 | + //查询gps点 | |
| 157 | + $.get('/gps/history/' + params.device, params, function(gpsArray){ | |
| 158 | + console.log(stationCodeMap); | |
| 159 | + var marker, label, point, state, text; | |
| 160 | + $.each(gpsArray, function(){ | |
| 161 | + point = new BMap.Point(this.lon, this.lat); | |
| 162 | + marker = new BMap.Marker(point); | |
| 163 | + state = this.inout_stop; | |
| 164 | + | |
| 165 | + if(state == 0 || state == 1){ | |
| 166 | + text = state == 0?'出':'进'; | |
| 167 | + | |
| 168 | + console.log(stationCodeMap[this.stopNo], this); | |
| 169 | + marker.setIcon(new BMap.Icon(inOuts[this.inout_stop], new BMap.Size(25,25))); | |
| 170 | + label = new BMap.Label( | |
| 171 | + stationCodeMap[this.stopNo] + '/' +moment(this.ts).format('HH:mm.ss') + ' -'+text | |
| 172 | + , {position: point, offset: new BMap.Size(-25,-18)}); | |
| 173 | + marker.setLabel(label); | |
| 174 | + } | |
| 175 | + else{ | |
| 176 | + label = new BMap.Label(moment(this.ts).format('HH:mm.ss') | |
| 177 | + , {position: point, offset: new BMap.Size(-25,-18)}); | |
| 178 | + marker.setLabel(label); | |
| 179 | + } | |
| 180 | + | |
| 181 | + map.addOverlay(marker); | |
| 182 | + }); | |
| 183 | + }); | |
| 184 | + } | |
| 185 | + | |
| 186 | + | |
| 187 | + /** | |
| 188 | + * 支持拼音搜索的select2 | |
| 189 | + * @param selector | |
| 190 | + * @param data | |
| 191 | + */ | |
| 192 | + function initPinYinSelect2(selector, data, cb){ | |
| 193 | + | |
| 194 | + $.each(data, function(){ | |
| 195 | + this.fullChars = pinyin.getFullChars(this.text).toUpperCase(); | |
| 196 | + this.camelChars = pinyin.getCamelChars(this.text); | |
| 197 | + }); | |
| 198 | + | |
| 199 | + $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) { | |
| 200 | + $(selector).select2({ | |
| 201 | + data: data, | |
| 202 | + matcher: oldMatcher(function(term, text, item){ | |
| 203 | + var upTerm = term.toUpperCase(); | |
| 204 | + if(item.fullChars.indexOf(upTerm) != -1 | |
| 205 | + || item.camelChars.indexOf(upTerm) != -1) | |
| 206 | + return true; | |
| 207 | + | |
| 208 | + return text.indexOf(term) != -1; | |
| 209 | + }) | |
| 210 | + }); | |
| 211 | + | |
| 212 | + cb && cb(); | |
| 213 | + }); | |
| 214 | + | |
| 215 | + return $(selector); | |
| 216 | + } | |
| 217 | +</script> | |
| 218 | +</body> | |
| 219 | +</html> | ... | ... |
src/main/resources/static/pages/base/geo_data_edit/main.html
| 1 | -<!DOCTYPE html> | |
| 2 | -<html lang="zh-cn"> | |
| 3 | - | |
| 4 | -<head> | |
| 5 | - <meta charset="UTF-8"> | |
| 6 | - <link rel="stylesheet" href="/assets/plugins/uk3.0/uikit.min.css"/> | |
| 7 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.css" /> | |
| 8 | - <!-- jquery contextMenu style --> | |
| 9 | - <link rel="stylesheet" href="/real_control_v2/assets/css/jquery.contextMenu.min.css" /> | |
| 10 | - <link rel="stylesheet" | |
| 11 | - href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" | |
| 12 | - type="text/css" /> | |
| 13 | - <!-- main css --> | |
| 14 | - <link rel="stylesheet" href="/pages/base/geo_data_edit/css/mian.css" /> | |
| 15 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/flatpickr/flatpickr.min.css"> | |
| 16 | -</head> | |
| 17 | - | |
| 18 | -<body> | |
| 19 | -<div class="loading"> | |
| 20 | - <div><span uk-spinner></span><span class="text">正在加载...</span></div> | |
| 21 | -</div> | |
| 22 | -<div class="ct_page" > | |
| 23 | - <div class="instructions_tips uk-animation-slide-top-medium"> | |
| 24 | - <button type="button" uk-close></button> | |
| 25 | - <div> | |
| 26 | - <h4>说明</h4> | |
| 27 | - <ul class="uk-list"> | |
| 28 | - <li>1、所有的改道、缩线、并线等对走向调整都必须新建版本，以保留原走向版本。</li> | |
| 29 | - <li>2、只有在人工数据录入错误的情况下，才有理由对当前启用的版本进行走向编辑。</li> | |
| 30 | - <li>3、走向版本可以任意切换，但是必须维护好一个准确的“版本切换记录”。</li> | |
| 31 | - <hr> | |
| 32 | - <li>4、调整缓冲区、修改站点名称、修改路段名称 不算走向调整，不需要新建版本。</li> | |
| 33 | - </ul> | |
| 34 | - </div> | |
| 35 | - </div> | |
| 36 | - <div id="map_wrap"></div> | |
| 37 | - <div class="main_left_panel_m_layer"></div> | |
| 38 | - <div class="main_left_panel"> | |
| 39 | - <div class="_line_info"> | |
| 40 | - <div class="_line_name"> | |
| 41 | - <a class="dropdown_txt"></a> | |
| 42 | - <div class="line_change_panel" uk-dropdown="mode: click"> | |
| 43 | - <div class="uk-inline"> | |
| 44 | - <a class="uk-form-icon uk-form-icon-flip" uk-icon="icon: search"></a> | |
| 45 | - <input class="uk-input" type="text" id="line_search_input"> | |
| 46 | - </div> | |
| 47 | - <ul class="uk-list"></ul> | |
| 48 | - </div> | |
| 49 | - | |
| 50 | - | |
| 51 | - | |
| 52 | - <a uk-icon="icon: trash" class="remove_line_version_icon uk-animation-slide-right-small" title="删除线路版本" style="display: none" uk-tooltip></a> | |
| 53 | - <a uk-icon="icon: plus" class="add_line_version_icon" title="新增一个线路版本" uk-tooltip></a> | |
| 54 | - </div> | |
| 55 | - <div class="_version_dropdown_wrap"> | |
| 56 | - <a class="_version_text"></a> | |
| 57 | - <div uk-dropdown> | |
| 58 | - <ul class="uk-nav uk-dropdown-nav all_version_list"> | |
| 59 | - </ul> | |
| 60 | - </div> | |
| 61 | - </div> | |
| 62 | - <a class="clock_enable_version"></a> | |
| 63 | - </div> | |
| 64 | - | |
| 65 | - <div class="_route_info_wrap"> | |
| 66 | - <ul uk-tab> | |
| 67 | - <li><a>上行</a></li> | |
| 68 | - <li><a>下行</a></li> | |
| 69 | - | |
| 70 | - </ul> | |
| 71 | - | |
| 72 | - <ul class="uk-switcher uk-margin up_down_route_list"> | |
| 73 | - <li> | |
| 74 | - <div class="station_route"></div> | |
| 75 | - <div class="road_route"></div> | |
| 76 | - </li> | |
| 77 | - <li> | |
| 78 | - <div class="station_route"></div> | |
| 79 | - <div class="road_route"></div> | |
| 80 | - </li> | |
| 81 | - </ul> | |
| 82 | - <div class="pos_tb_icon"> | |
| 83 | - <a uk-icon="icon: chevron-down;"></a> | |
| 84 | - </div> | |
| 85 | - </div> | |
| 86 | - </div> | |
| 87 | - <div class="main_lt_search_panel"> | |
| 88 | - <div class="uk-inline ct_s_i_wrap"> | |
| 89 | - <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: search"></span> | |
| 90 | - <input class="uk-input ct_search_input" placeholder="搜索地图位置" type="text"> | |
| 91 | - </div> | |
| 92 | - <div class="ct_search_result"></div> | |
| 93 | - </div> | |
| 94 | - <div class="main_rt_tools_panel"> | |
| 95 | - <!--<a style="color: red;" uk-icon="icon: unlock;ratio: .9" class="_icon" title="当前版本有变更未启用" uk-tooltip="pos:bottom"></a>--> | |
| 96 | - | |
| 97 | - <a uk-icon="icon: bookmark;ratio: .9" class="_icon" title="走向版本变更记录" uk-tooltip="pos:bottom"></a> | |
| 98 | - <a uk-icon="icon: expand;ratio: .9" class="_icon full_screen_icon"></a> | |
| 99 | - </div> | |
| 100 | -</div> | |
| 101 | - | |
| 102 | -<script id="geo_d_e_search_result-temp" type="text/html"> | |
| 103 | - <ul class="s_list uk-list"> | |
| 104 | - {{each list as obj i}} | |
| 105 | - <li data-lat="{{obj.point.lat}}" data-lng="{{obj.point.lng}}"> | |
| 106 | - <span class="_title">{{obj.title}}</span> | |
| 107 | - <span class="_address">{{obj.address}}</span> | |
| 108 | - </li> | |
| 109 | - {{/each}} | |
| 110 | - | |
| 111 | - {{if list.length==0}} | |
| 112 | - <li class="_empty">没有搜索到相关数据！</li> | |
| 113 | - {{/if}} | |
| 114 | - </ul> | |
| 115 | -</script> | |
| 116 | - | |
| 117 | -<script id="geo_d_e_dropdown_list-temp" type="text/html"> | |
| 118 | - {{each list as obj i}} | |
| 119 | - <li data-code="{{obj.code}}"> | |
| 120 | - <div class="name">{{obj.name}}</div> | |
| 121 | - <div class="code">{{obj.code}}</div> | |
| 122 | - </li> | |
| 123 | - {{/each}} | |
| 124 | - {{if ellipsis}} | |
| 125 | - <li>...</li> | |
| 126 | - {{/if}} | |
| 127 | -</script> | |
| 128 | -<!-- 百度 --> | |
| 129 | -<script src="http://api.map.baidu.com/api?v=2.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script> | |
| 130 | -<script src="/metronic_v4.5.4/plugins/jquery.min.js"></script> | |
| 131 | -<script src="/assets/plugins/uk3.0/uikit.min.js"></script> | |
| 132 | -<script src="/assets/plugins/uk3.0/uikit-icons.min.js"></script> | |
| 133 | -<script src="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.jquery.js" ></script> | |
| 134 | -<!-- EventProxy --> | |
| 135 | -<script src="/assets/js/eventproxy.js"></script> | |
| 136 | -<!-- art-template 模版引擎 --> | |
| 137 | -<script src="/assets/plugins/template.js"></script> | |
| 138 | -<script src="/real_control_v2/assets/plugins/moment/moment.min.js"></script> | |
| 139 | -<!-- jquery.serializejson JSON序列化插件 --> | |
| 140 | -<script src="/assets/plugins/jquery.serializejson.js" merge="plugins"></script> | |
| 141 | -<!-- common js --> | |
| 142 | -<script src="/pages/base/geo_data_edit/js/ct_common.js"></script> | |
| 143 | -<script src="/assets/js/TransGPS.js" ></script> | |
| 144 | -<!-- Geolib --> | |
| 145 | -<script src="/real_control_v2/geolib/geolib.js" ></script> | |
| 146 | -<!-- jquery contextMenu --> | |
| 147 | -<script src="/real_control_v2/assets/js/jquery.contextMenu.min.js" ></script> | |
| 148 | -<script src="/assets/js/baidu/bd_GeoUtils_min.js" ></script> | |
| 149 | -<!-- flatpickr --> | |
| 150 | -<script src="/real_control_v2/assets/plugins/flatpickr/flatpickr.min.js" ></script> | |
| 151 | -<script src="/real_control_v2/assets/plugins/flatpickr/l10n/zh.js" ></script> | |
| 152 | -<script src="/assets/plugins/pinyin.js"></script> | |
| 153 | - | |
| 154 | -<script> | |
| 155 | - var $loadPanel = $('body>.loading'); | |
| 156 | - //___________________________________ | |
| 157 | - var storage = window.localStorage; | |
| 158 | - //___________________________________ | |
| 159 | - | |
| 160 | - top.document.title = "绘制线路"; | |
| 161 | - | |
| 162 | - // 关闭左侧栏 | |
| 163 | - if (!top.$('body').hasClass('page-sidebar-closed')) {top.$('.menu-toggler.sidebar-toggler').click();} | |
| 164 | - //全屏 | |
| 165 | - $('.full_screen_icon').on('click', function () { | |
| 166 | - var $iframe = window.parent.$('#geo_edit_wrap_iframe'), | |
| 167 | - icon; | |
| 168 | - if($(this).attr('uk-icon').indexOf('expand') != -1){ | |
| 169 | - $iframe.addClass('full_screen'); | |
| 170 | - icon = 'shrink'; | |
| 171 | - } | |
| 172 | - else{ | |
| 173 | - $iframe.removeClass('full_screen'); | |
| 174 | - icon = 'expand'; | |
| 175 | - } | |
| 176 | - $(this).attr('uk-icon', 'icon: '+icon+';ratio: .9'); | |
| 177 | - }); | |
| 178 | - | |
| 179 | - var gb_main_ep; | |
| 180 | - //文件加载 | |
| 181 | - var res_load_ep = EventProxy.create('load_common_data', 'load_station_route','load_road_route' | |
| 182 | - , 'load_version_manage', 'load_history_edit_logs', 'load_map', function () { | |
| 183 | - startup(function () { | |
| 184 | - $('.instructions_tips').show(); | |
| 185 | - }); | |
| 186 | - | |
| 187 | - gb_change_line.init(); | |
| 188 | - }); | |
| 189 | - | |
| 190 | - var g_line_code; | |
| 191 | - var g_version; | |
| 192 | - var startup = function (cb) { | |
| 193 | - g_line_code = storage.getItem('geo_data_edit_line_code'); | |
| 194 | - | |
| 195 | - gb_main_ep = new EventProxy(); | |
| 196 | - var eq = gb_main_ep; | |
| 197 | - | |
| 198 | - //站点 | |
| 199 | - gb_station_route.init(g_emit('init_road')); | |
| 200 | - //路段 | |
| 201 | - eq.once('init_road', function () { | |
| 202 | - gb_road_route.init(g_emit('init_map')) | |
| 203 | - }); | |
| 204 | - //地图 | |
| 205 | - eq.once('init_map', function () { | |
| 206 | - gb_ct_map._render(g_emit('end')); | |
| 207 | - }); | |
| 208 | - | |
| 209 | - eq.once('end', function () { | |
| 210 | - //线路版本信息 | |
| 211 | - gb_version_manage.init(storage.getItem("geo_data_edit_line_version")); | |
| 212 | - | |
| 213 | - $loadPanel.hide(); | |
| 214 | - gb_ct_search.init(); | |
| 215 | - | |
| 216 | - cb && cb(); | |
| 217 | - }); | |
| 218 | - }; | |
| 219 | - | |
| 220 | - var clearAll = function () { | |
| 221 | - $('.up_down_route_list .station_route').empty(); | |
| 222 | - $('.up_down_route_list .road_route').empty(); | |
| 223 | - gb_ct_map.clearAll(); | |
| 224 | - }; | |
| 225 | - | |
| 226 | - function g_emit(id) { | |
| 227 | - console.log('g_emit [' + id + ']'); | |
| 228 | - return function () { | |
| 229 | - console.log('eq.emitLater(' + id + ')'); | |
| 230 | - return gb_main_ep.emitLater(id); | |
| 231 | - }; | |
| 232 | - } | |
| 233 | - | |
| 234 | - //滚动条 | |
| 235 | - $('._route_info_wrap>ul.uk-switcher').perfectScrollbar({suppressScrollX: true}); | |
| 236 | - | |
| 237 | - //to top btttom | |
| 238 | - $('.pos_tb_icon a').on('click', function () { | |
| 239 | - UIkit.notification('top top...'); | |
| 240 | - }); | |
| 241 | - | |
| 242 | - function getUpDown(){ | |
| 243 | - return $('.up_down_route_list>li:first').hasClass('uk-active')?0:1; | |
| 244 | - } | |
| 245 | - | |
| 246 | - //切换上下行显示 | |
| 247 | - $('.up_down_route_list').on('show', function () { | |
| 248 | - gb_ct_map.changeUpDown(); | |
| 249 | - }); | |
| 250 | - | |
| 251 | - $(document).on('submit', 'form', function (e) { | |
| 252 | - e.stopPropagation(); | |
| 253 | - return false; | |
| 254 | - }); | |
| 255 | - | |
| 256 | - $(document).on('click', 'button.cancel', function (e) { | |
| 257 | - e.stopPropagation(); | |
| 258 | - return false; | |
| 259 | - }); | |
| 260 | - | |
| 261 | - //关闭说明 | |
| 262 | - $('.instructions_tips .uk-close').on('click', function () { | |
| 263 | - $('.instructions_tips').remove(); | |
| 264 | - }); | |
| 265 | -</script> | |
| 266 | - | |
| 267 | - | |
| 268 | -<script src="/pages/base/geo_data_edit/js/server_timer.js" ></script> | |
| 269 | -<!--- js --> | |
| 270 | -<script src="/pages/base/geo_data_edit/js/common_data.js" ></script> | |
| 271 | -<script src="/pages/base/geo_data_edit/js/station_route.js" ></script> | |
| 272 | -<script src="/pages/base/geo_data_edit/js/road_route.js" ></script> | |
| 273 | -<script src="/pages/base/geo_data_edit/js/version_manage.js" ></script> | |
| 274 | -<script src="/pages/base/geo_data_edit/js/history_edit_logs.js" ></script> | |
| 275 | -<script src="/pages/base/geo_data_edit/js/map.js" ></script> | |
| 276 | -<script src="/pages/base/geo_data_edit/js/submit.js" ></script> | |
| 277 | -<script src="/pages/base/geo_data_edit/js/search.js" ></script> | |
| 278 | -<script src="/pages/base/geo_data_edit/js/change_line.js" ></script> | |
| 279 | - | |
| 280 | -<script type="text/javascript" | |
| 281 | - src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> | |
| 282 | -</body> | |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="zh-cn"> | |
| 3 | + | |
| 4 | +<head> | |
| 5 | + <meta charset="UTF-8"> | |
| 6 | + <link rel="stylesheet" href="/assets/plugins/uk3.0/uikit.min.css"/> | |
| 7 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.css" /> | |
| 8 | + <!-- jquery contextMenu style --> | |
| 9 | + <link rel="stylesheet" href="/real_control_v2/assets/css/jquery.contextMenu.min.css" /> | |
| 10 | + <link rel="stylesheet" | |
| 11 | + href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" | |
| 12 | + type="text/css" /> | |
| 13 | + <!-- main css --> | |
| 14 | + <link rel="stylesheet" href="/pages/base/geo_data_edit/css/mian.css" /> | |
| 15 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/flatpickr/flatpickr.min.css"> | |
| 16 | +</head> | |
| 17 | + | |
| 18 | +<body> | |
| 19 | +<div class="loading"> | |
| 20 | + <div><span uk-spinner></span><span class="text">正在加载...</span></div> | |
| 21 | +</div> | |
| 22 | +<div class="ct_page" > | |
| 23 | + <div class="instructions_tips uk-animation-slide-top-medium"> | |
| 24 | + <button type="button" uk-close></button> | |
| 25 | + <div> | |
| 26 | + <h4>说明</h4> | |
| 27 | + <ul class="uk-list"> | |
| 28 | + <li>1、所有的改道、缩线、并线等对走向调整都必须新建版本，以保留原走向版本。</li> | |
| 29 | + <li>2、只有在人工数据录入错误的情况下，才有理由对当前启用的版本进行走向编辑。</li> | |
| 30 | + <li>3、走向版本可以任意切换，但是必须维护好一个准确的“版本切换记录”。</li> | |
| 31 | + <hr> | |
| 32 | + <li>4、调整缓冲区、修改站点名称、修改路段名称 不算走向调整，不需要新建版本。</li> | |
| 33 | + </ul> | |
| 34 | + </div> | |
| 35 | + </div> | |
| 36 | + <div id="map_wrap"></div> | |
| 37 | + <div class="main_left_panel_m_layer"></div> | |
| 38 | + <div class="main_left_panel"> | |
| 39 | + <div class="_line_info"> | |
| 40 | + <div class="_line_name"> | |
| 41 | + <a class="dropdown_txt"></a> | |
| 42 | + <div class="line_change_panel" uk-dropdown="mode: click"> | |
| 43 | + <div class="uk-inline"> | |
| 44 | + <a class="uk-form-icon uk-form-icon-flip" uk-icon="icon: search"></a> | |
| 45 | + <input class="uk-input" type="text" id="line_search_input"> | |
| 46 | + </div> | |
| 47 | + <ul class="uk-list"></ul> | |
| 48 | + </div> | |
| 49 | + | |
| 50 | + | |
| 51 | + | |
| 52 | + <a uk-icon="icon: trash" class="remove_line_version_icon uk-animation-slide-right-small" title="删除线路版本" style="display: none" uk-tooltip></a> | |
| 53 | + <a uk-icon="icon: plus" class="add_line_version_icon" title="新增一个线路版本" uk-tooltip></a> | |
| 54 | + </div> | |
| 55 | + <div class="_version_dropdown_wrap"> | |
| 56 | + <a class="_version_text"></a> | |
| 57 | + <div uk-dropdown> | |
| 58 | + <ul class="uk-nav uk-dropdown-nav all_version_list"> | |
| 59 | + </ul> | |
| 60 | + </div> | |
| 61 | + </div> | |
| 62 | + <a class="clock_enable_version"></a> | |
| 63 | + </div> | |
| 64 | + | |
| 65 | + <div class="_route_info_wrap"> | |
| 66 | + <ul uk-tab> | |
| 67 | + <li><a>上行</a></li> | |
| 68 | + <li><a>下行</a></li> | |
| 69 | + | |
| 70 | + </ul> | |
| 71 | + | |
| 72 | + <ul class="uk-switcher uk-margin up_down_route_list"> | |
| 73 | + <li> | |
| 74 | + <div class="station_route"></div> | |
| 75 | + <div class="road_route"></div> | |
| 76 | + </li> | |
| 77 | + <li> | |
| 78 | + <div class="station_route"></div> | |
| 79 | + <div class="road_route"></div> | |
| 80 | + </li> | |
| 81 | + </ul> | |
| 82 | + <div class="pos_tb_icon"> | |
| 83 | + <a uk-icon="icon: chevron-down;"></a> | |
| 84 | + </div> | |
| 85 | + </div> | |
| 86 | + </div> | |
| 87 | + <div class="main_lt_search_panel"> | |
| 88 | + <div class="uk-inline ct_s_i_wrap"> | |
| 89 | + <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: search"></span> | |
| 90 | + <input class="uk-input ct_search_input" placeholder="搜索地图位置" type="text"> | |
| 91 | + </div> | |
| 92 | + <div class="ct_search_result"></div> | |
| 93 | + </div> | |
| 94 | + <div class="main_rt_tools_panel"> | |
| 95 | + <!--<a style="color: red;" uk-icon="icon: unlock;ratio: .9" class="_icon" title="当前版本有变更未启用" uk-tooltip="pos:bottom"></a>--> | |
| 96 | + | |
| 97 | + <a uk-icon="icon: bookmark;ratio: .9" class="_icon" title="走向版本变更记录" uk-tooltip="pos:bottom"></a> | |
| 98 | + <a uk-icon="icon: expand;ratio: .9" class="_icon full_screen_icon"></a> | |
| 99 | + </div> | |
| 100 | +</div> | |
| 101 | + | |
| 102 | +<script id="geo_d_e_search_result-temp" type="text/html"> | |
| 103 | + <ul class="s_list uk-list"> | |
| 104 | + {{each list as obj i}} | |
| 105 | + <li data-lat="{{obj.point.lat}}" data-lng="{{obj.point.lng}}"> | |
| 106 | + <span class="_title">{{obj.title}}</span> | |
| 107 | + <span class="_address">{{obj.address}}</span> | |
| 108 | + </li> | |
| 109 | + {{/each}} | |
| 110 | + | |
| 111 | + {{if list.length==0}} | |
| 112 | + <li class="_empty">没有搜索到相关数据！</li> | |
| 113 | + {{/if}} | |
| 114 | + </ul> | |
| 115 | +</script> | |
| 116 | + | |
| 117 | +<script id="geo_d_e_dropdown_list-temp" type="text/html"> | |
| 118 | + {{each list as obj i}} | |
| 119 | + <li data-code="{{obj.code}}"> | |
| 120 | + <div class="name">{{obj.name}}</div> | |
| 121 | + <div class="code">{{obj.code}}</div> | |
| 122 | + </li> | |
| 123 | + {{/each}} | |
| 124 | + {{if ellipsis}} | |
| 125 | + <li>...</li> | |
| 126 | + {{/if}} | |
| 127 | +</script> | |
| 128 | +<!-- 百度 --> | |
| 129 | +<script src="//api.map.baidu.com/api?v=2.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script> | |
| 130 | +<script src="/metronic_v4.5.4/plugins/jquery.min.js"></script> | |
| 131 | +<script src="/assets/plugins/uk3.0/uikit.min.js"></script> | |
| 132 | +<script src="/assets/plugins/uk3.0/uikit-icons.min.js"></script> | |
| 133 | +<script src="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.jquery.js" ></script> | |
| 134 | +<!-- EventProxy --> | |
| 135 | +<script src="/assets/js/eventproxy.js"></script> | |
| 136 | +<!-- art-template 模版引擎 --> | |
| 137 | +<script src="/assets/plugins/template.js"></script> | |
| 138 | +<script src="/real_control_v2/assets/plugins/moment/moment.min.js"></script> | |
| 139 | +<!-- jquery.serializejson JSON序列化插件 --> | |
| 140 | +<script src="/assets/plugins/jquery.serializejson.js" merge="plugins"></script> | |
| 141 | +<!-- common js --> | |
| 142 | +<script src="/pages/base/geo_data_edit/js/ct_common.js"></script> | |
| 143 | +<script src="/assets/js/TransGPS.js" ></script> | |
| 144 | +<!-- Geolib --> | |
| 145 | +<script src="/real_control_v2/geolib/geolib.js" ></script> | |
| 146 | +<!-- jquery contextMenu --> | |
| 147 | +<script src="/real_control_v2/assets/js/jquery.contextMenu.min.js" ></script> | |
| 148 | +<script src="/assets/js/baidu/bd_GeoUtils_min.js" ></script> | |
| 149 | +<!-- flatpickr --> | |
| 150 | +<script src="/real_control_v2/assets/plugins/flatpickr/flatpickr.min.js" ></script> | |
| 151 | +<script src="/real_control_v2/assets/plugins/flatpickr/l10n/zh.js" ></script> | |
| 152 | +<script src="/assets/plugins/pinyin.js"></script> | |
| 153 | + | |
| 154 | +<script> | |
| 155 | + var $loadPanel = $('body>.loading'); | |
| 156 | + //___________________________________ | |
| 157 | + var storage = window.localStorage; | |
| 158 | + //___________________________________ | |
| 159 | + | |
| 160 | + top.document.title = "绘制线路"; | |
| 161 | + | |
| 162 | + // 关闭左侧栏 | |
| 163 | + if (!top.$('body').hasClass('page-sidebar-closed')) {top.$('.menu-toggler.sidebar-toggler').click();} | |
| 164 | + //全屏 | |
| 165 | + $('.full_screen_icon').on('click', function () { | |
| 166 | + var $iframe = window.parent.$('#geo_edit_wrap_iframe'), | |
| 167 | + icon; | |
| 168 | + if($(this).attr('uk-icon').indexOf('expand') != -1){ | |
| 169 | + $iframe.addClass('full_screen'); | |
| 170 | + icon = 'shrink'; | |
| 171 | + } | |
| 172 | + else{ | |
| 173 | + $iframe.removeClass('full_screen'); | |
| 174 | + icon = 'expand'; | |
| 175 | + } | |
| 176 | + $(this).attr('uk-icon', 'icon: '+icon+';ratio: .9'); | |
| 177 | + }); | |
| 178 | + | |
| 179 | + var gb_main_ep; | |
| 180 | + //文件加载 | |
| 181 | + var res_load_ep = EventProxy.create('load_common_data', 'load_station_route','load_road_route' | |
| 182 | + , 'load_version_manage', 'load_history_edit_logs', 'load_map', function () { | |
| 183 | + startup(function () { | |
| 184 | + $('.instructions_tips').show(); | |
| 185 | + }); | |
| 186 | + | |
| 187 | + gb_change_line.init(); | |
| 188 | + }); | |
| 189 | + | |
| 190 | + var g_line_code; | |
| 191 | + var g_version; | |
| 192 | + var startup = function (cb) { | |
| 193 | + g_line_code = storage.getItem('geo_data_edit_line_code'); | |
| 194 | + | |
| 195 | + gb_main_ep = new EventProxy(); | |
| 196 | + var eq = gb_main_ep; | |
| 197 | + | |
| 198 | + //站点 | |
| 199 | + gb_station_route.init(g_emit('init_road')); | |
| 200 | + //路段 | |
| 201 | + eq.once('init_road', function () { | |
| 202 | + gb_road_route.init(g_emit('init_map')) | |
| 203 | + }); | |
| 204 | + //地图 | |
| 205 | + eq.once('init_map', function () { | |
| 206 | + gb_ct_map._render(g_emit('end')); | |
| 207 | + }); | |
| 208 | + | |
| 209 | + eq.once('end', function () { | |
| 210 | + //线路版本信息 | |
| 211 | + gb_version_manage.init(storage.getItem("geo_data_edit_line_version")); | |
| 212 | + | |
| 213 | + $loadPanel.hide(); | |
| 214 | + gb_ct_search.init(); | |
| 215 | + | |
| 216 | + cb && cb(); | |
| 217 | + }); | |
| 218 | + }; | |
| 219 | + | |
| 220 | + var clearAll = function () { | |
| 221 | + $('.up_down_route_list .station_route').empty(); | |
| 222 | + $('.up_down_route_list .road_route').empty(); | |
| 223 | + gb_ct_map.clearAll(); | |
| 224 | + }; | |
| 225 | + | |
| 226 | + function g_emit(id) { | |
| 227 | + console.log('g_emit [' + id + ']'); | |
| 228 | + return function () { | |
| 229 | + console.log('eq.emitLater(' + id + ')'); | |
| 230 | + return gb_main_ep.emitLater(id); | |
| 231 | + }; | |
| 232 | + } | |
| 233 | + | |
| 234 | + //滚动条 | |
| 235 | + $('._route_info_wrap>ul.uk-switcher').perfectScrollbar({suppressScrollX: true}); | |
| 236 | + | |
| 237 | + //to top btttom | |
| 238 | + $('.pos_tb_icon a').on('click', function () { | |
| 239 | + UIkit.notification('top top...'); | |
| 240 | + }); | |
| 241 | + | |
| 242 | + function getUpDown(){ | |
| 243 | + return $('.up_down_route_list>li:first').hasClass('uk-active')?0:1; | |
| 244 | + } | |
| 245 | + | |
| 246 | + //切换上下行显示 | |
| 247 | + $('.up_down_route_list').on('show', function () { | |
| 248 | + gb_ct_map.changeUpDown(); | |
| 249 | + }); | |
| 250 | + | |
| 251 | + $(document).on('submit', 'form', function (e) { | |
| 252 | + e.stopPropagation(); | |
| 253 | + return false; | |
| 254 | + }); | |
| 255 | + | |
| 256 | + $(document).on('click', 'button.cancel', function (e) { | |
| 257 | + e.stopPropagation(); | |
| 258 | + return false; | |
| 259 | + }); | |
| 260 | + | |
| 261 | + //关闭说明 | |
| 262 | + $('.instructions_tips .uk-close').on('click', function () { | |
| 263 | + $('.instructions_tips').remove(); | |
| 264 | + }); | |
| 265 | +</script> | |
| 266 | + | |
| 267 | + | |
| 268 | +<script src="/pages/base/geo_data_edit/js/server_timer.js" ></script> | |
| 269 | +<!--- js --> | |
| 270 | +<script src="/pages/base/geo_data_edit/js/common_data.js" ></script> | |
| 271 | +<script src="/pages/base/geo_data_edit/js/station_route.js" ></script> | |
| 272 | +<script src="/pages/base/geo_data_edit/js/road_route.js" ></script> | |
| 273 | +<script src="/pages/base/geo_data_edit/js/version_manage.js" ></script> | |
| 274 | +<script src="/pages/base/geo_data_edit/js/history_edit_logs.js" ></script> | |
| 275 | +<script src="/pages/base/geo_data_edit/js/map.js" ></script> | |
| 276 | +<script src="/pages/base/geo_data_edit/js/submit.js" ></script> | |
| 277 | +<script src="/pages/base/geo_data_edit/js/search.js" ></script> | |
| 278 | +<script src="/pages/base/geo_data_edit/js/change_line.js" ></script> | |
| 279 | + | |
| 280 | +<script type="text/javascript" | |
| 281 | + src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> | |
| 282 | +</body> | |
| 283 | 283 | </html> |
| 284 | 284 | \ No newline at end of file | ... | ... |
src/main/resources/static/pages/base/line/js/map.js
| 1 | -/** | |
| 2 | - * 百度地图 | |
| 3 | - * | |
| 4 | - * - - - - - -》init：地图初始化 | |
| 5 | - * | |
| 6 | - * - - - - - -》getDistanceAndDuration：获取距离与时间 | |
| 7 | - * | |
| 8 | - * - - - - - -》drawingUpline：在地图上画出上行线路走向 | |
| 9 | - * | |
| 10 | - * - - - - - -》stationsPointsToLibraryPoint：根据站点坐标匹配库中的公交站点（手动规划） | |
| 11 | - */ | |
| 12 | - | |
| 13 | -var WorldsBMapLine = function () { | |
| 14 | - | |
| 15 | - /** WorldsBMapLine 全局变量定义 mapBValue：地图对象；polyUpline：走向折线；sectionList：截取过的路段 ；pointIndex：计算路段被切的次数; | |
| 16 | - * firstPoint:截取路段的第一个点;iseditStatus：路段是否在编辑状态；isCutSection ： 获取路段是否在截取状态*/ | |
| 17 | - var mapBValue = '', polyUpline='', sectionList = [], pointIndex = 0, iseditStatus = false, firstPoint = null, isCutSection = false; | |
| 18 | - | |
| 19 | - var Bmap = { | |
| 20 | - | |
| 21 | - init : function() { | |
| 22 | - | |
| 23 | - // 设置中心点, | |
| 24 | - var CENTER_POINT = {lng : 121.528733,lat : 31.237425}; | |
| 25 | - | |
| 26 | - // 百度API Key | |
| 27 | - var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT'; | |
| 28 | - | |
| 29 | - // 初始化百度地图 | |
| 30 | - mapBValue = new BMap.Map("bmap_basic"); | |
| 31 | - | |
| 32 | - //中心点和缩放级别 | |
| 33 | - mapBValue.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat), 20); | |
| 34 | - | |
| 35 | - //启用地图拖拽事件，默认启用(可不写) | |
| 36 | - mapBValue.enableDragging(); | |
| 37 | - | |
| 38 | - //启用地图滚轮放大缩小 | |
| 39 | - mapBValue.enableScrollWheelZoom(); | |
| 40 | - | |
| 41 | - //禁用鼠标双击放大 | |
| 42 | - mapBValue.disableDoubleClickZoom(); | |
| 43 | - | |
| 44 | - //启用键盘上下左右键移动地图 | |
| 45 | - mapBValue.enableKeyboard(); | |
| 46 | - | |
| 47 | - return mapBValue; | |
| 48 | - }, | |
| 49 | - /** 获取第一个切路段的点 @return Point*/ | |
| 50 | - getFirstPoint : function() { | |
| 51 | - return firstPoint; | |
| 52 | - }, | |
| 53 | - /** 第一个切路段的点 */ | |
| 54 | - setFirstPoint : function(Point) { | |
| 55 | - firstPoint = Point; | |
| 56 | - }, | |
| 57 | - /** 获取地图对象 @return 地图对象map */ | |
| 58 | - getmapBValue : function() { | |
| 59 | - | |
| 60 | - return mapBValue; | |
| 61 | - | |
| 62 | - }, | |
| 63 | - | |
| 64 | - getPolyUpline : function() { | |
| 65 | - | |
| 66 | - return polyUpline; | |
| 67 | - }, | |
| 68 | - | |
| 69 | - /** 获取截取过的路段 @return 路段对象List */ | |
| 70 | - getSectionList : function() { | |
| 71 | - | |
| 72 | - return sectionList; | |
| 73 | - | |
| 74 | - }, | |
| 75 | - setSectionList : function(list) { | |
| 76 | - | |
| 77 | - sectionList = list; | |
| 78 | - }, | |
| 79 | - initCutSectionPoint : function() { | |
| 80 | - sectionList = []; | |
| 81 | - var tbodyHtml = template('section_list',{list : sectionList}); | |
| 82 | - $('#section_table tbody').html(tbodyHtml); | |
| 83 | - }, | |
| 84 | - /** 获取切路段的点下标 @return int*/ | |
| 85 | - setPointIndex : function(index) { | |
| 86 | - pointIndex = index; | |
| 87 | - }, | |
| 88 | - getPointIndex : function() { | |
| 89 | - | |
| 90 | - return pointIndex; | |
| 91 | - | |
| 92 | - }, | |
| 93 | - /** 获取路段是否在编辑状态 @return boolean*/ | |
| 94 | - getIsEditStatus : function() { | |
| 95 | - return iseditStatus; | |
| 96 | - }, | |
| 97 | - setIsEditStatus : function(v) { | |
| 98 | - iseditStatus = v ; | |
| 99 | - }, | |
| 100 | - | |
| 101 | - /** 获取路段是否在截取状态 @return boolean*/ | |
| 102 | - getIsCutSection : function() { | |
| 103 | - return isCutSection; | |
| 104 | - }, | |
| 105 | - setIsCutSection : function(v) { | |
| 106 | - isCutSection = v ; | |
| 107 | - }, | |
| 108 | - | |
| 109 | - /** 获取距离与时间 @param <points：坐标点集合> */ | |
| 110 | - getDistanceAndDuration : function(points,callback){ | |
| 111 | - | |
| 112 | - // 获取长度 | |
| 113 | - var len = points.length; | |
| 114 | - (function(){ | |
| 115 | - | |
| 116 | - if (!arguments.callee.count) { | |
| 117 | - | |
| 118 | - arguments.callee.count = 0; | |
| 119 | - | |
| 120 | - } | |
| 121 | - | |
| 122 | - arguments.callee.count++; | |
| 123 | - | |
| 124 | - var index = parseInt(arguments.callee.count) - 1; | |
| 125 | - | |
| 126 | - if (index >= len-1) { | |
| 127 | - callback && callback(points); | |
| 128 | - | |
| 129 | - return; | |
| 130 | - } | |
| 131 | - | |
| 132 | - // 当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。(当前正在执行的函数。) | |
| 133 | - var f = arguments.callee; | |
| 134 | - // 起点坐标 <坐标格式：40.056878,116.30815> | |
| 135 | - var origin = points[index].potion.lat + ',' + points[index].potion.lng; | |
| 136 | - | |
| 137 | - // 终点坐标 <坐标格式：40.056878,116.30815> | |
| 138 | - var destination = points[index+1].potion.lat + ',' + points[index+1].potion.lng; | |
| 139 | - var region = '上海'; | |
| 140 | - | |
| 141 | - var origin_region = '上海'; | |
| 142 | - | |
| 143 | - var destination_region = '上海'; | |
| 144 | - | |
| 145 | - var output = 'json'; | |
| 146 | - | |
| 147 | - var ak_My = 'wjlITmXeCek5MxyU3ZUBkTeU8B0o0npk'; | |
| 148 | - | |
| 149 | - /** | |
| 150 | - * origin：起点名称或经纬度； | |
| 151 | - * | |
| 152 | - * destination：终点名称或经纬度； | |
| 153 | - * | |
| 154 | - * origin_region：起始点所在城市，驾车导航时必填。 | |
| 155 | - * | |
| 156 | - * destination_region：终点所在城市，驾车导航时必填。 | |
| 157 | - * | |
| 158 | - * output :表示输出类型，可设置为xml或json，默认为xml。 | |
| 159 | - * | |
| 160 | - **/ | |
| 161 | - var paramsB = {origin:origin,destination:destination,region:region,origin_region:origin_region,destination_region:destination_region,output:output,ak:ak_My}; | |
| 162 | - | |
| 163 | - /** @description :未认证开发者默认配额为：2000次/天。 */ | |
| 164 | - $.ajax({ | |
| 165 | - | |
| 166 | - // 百度地图根据坐标获取两点之间的时间与距离 | |
| 167 | - url: 'http://api.map.baidu.com/direction/v1?mode=transit', | |
| 168 | - | |
| 169 | - data: paramsB, | |
| 170 | - | |
| 171 | - dataType: 'jsonp', | |
| 172 | - | |
| 173 | - success: function(r){ | |
| 174 | - | |
| 175 | - if(r) { | |
| 176 | - | |
| 177 | - if(r.message=='ok') { | |
| 178 | - | |
| 179 | - if(r.result.taxi==null) { | |
| 180 | - | |
| 181 | - // 获取距离(单位：米) | |
| 182 | - points[index+1].distance = 0; | |
| 183 | - | |
| 184 | - // 获取时间(单位：秒) | |
| 185 | - points[index+1].duration = 0; | |
| 186 | - | |
| 187 | - }else { | |
| 188 | - | |
| 189 | - // 获取距离(单位：米) | |
| 190 | - points[index+1].distance = r.result.taxi.distance; | |
| 191 | - | |
| 192 | - // 获取时间(单位：秒) | |
| 193 | - points[index+1].duration = r.result.taxi.duration; | |
| 194 | - | |
| 195 | - } | |
| 196 | - | |
| 197 | - | |
| 198 | - } | |
| 199 | - | |
| 200 | - } | |
| 201 | - | |
| 202 | - f(); | |
| 203 | - } | |
| 204 | - }); | |
| 205 | - | |
| 206 | - })(); | |
| 207 | - | |
| 208 | - }, | |
| 209 | - drawingSection: function(data){ | |
| 210 | - /** 获取站点路由信息 @param:<Line.id：线路Id；0：上行> @return：<resultdata：站点路由数据> */ | |
| 211 | - WorldsBMapLine.clearMarkAndOverlays(); | |
| 212 | - // 编辑路段数据 | |
| 213 | - if(data) { | |
| 214 | - // 地图折线坐标点集合 | |
| 215 | - var polylineArray = []; | |
| 216 | - // 获取路段折线坐标字符串 | |
| 217 | - var sectionBsectionVectorStr = data.sectionBsectionVector; | |
| 218 | - if(sectionBsectionVectorStr==null) { | |
| 219 | - return; | |
| 220 | - } | |
| 221 | - // 切割段折线坐标字符串 | |
| 222 | - var tempStr = sectionBsectionVectorStr.substring(11,sectionBsectionVectorStr.length-1); | |
| 223 | - // 分割折线坐标字符串 | |
| 224 | - var lineArray = tempStr.split(','); | |
| 225 | - for(var i = 0;i<lineArray.length;i++) { | |
| 226 | - polylineArray.push(new BMap.Point(lineArray[i].split(' ')[0],lineArray[i].split(' ')[1])); | |
| 227 | - } | |
| 228 | - var index = parseInt(polylineArray.length/2); | |
| 229 | - var center = polylineArray[index]; | |
| 230 | - /** 在地图上画出线路走向 @param：<polylineArray：地图折线坐标点集合；resultdata：站点路由数据> */ | |
| 231 | - WorldsBMapLine.drawingUpline(polylineArray,center); | |
| 232 | - /** 在地图上画点 @param：<point_center：中心坐标点> */ | |
| 233 | - WorldsBMapLine.drawingUpStationPoint(center,data.sectionName,1); | |
| 234 | - } | |
| 235 | - }, | |
| 236 | - // 在地图上画出上行线路走向（单路段） | |
| 237 | - drawingUpline : function (polylineArray,polyline_center,data) { | |
| 238 | - /*WorldsBMap.clearMarkAndOverlays();*/ | |
| 239 | - polyUpline = ''; | |
| 240 | - // 创建线路走向 | |
| 241 | - polyUpline = new BMap.Polyline(polylineArray, {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5}); | |
| 242 | - // polyUpline.data = data; | |
| 243 | - // 把折线添加到地图上 | |
| 244 | - mapBValue.addOverlay(polyUpline); | |
| 245 | - var PanOptions_ ={noAnimation :true}; | |
| 246 | - mapBValue.reset(); | |
| 247 | - mapBValue.panTo(polyline_center,PanOptions_); | |
| 248 | - mapBValue.panBy(500,-510,PanOptions_); | |
| 249 | - mapBValue.setZoom(14); | |
| 250 | - }, | |
| 251 | - | |
| 252 | - // 在地图上画出上行线路走向（多路段） | |
| 253 | - drawingUpline01 : function (polylineArray,polyline_center,data) { | |
| 254 | - var polyUpline01 = 'polyline' + '_' + data.sectionrouteId; | |
| 255 | - // 创建线路走向 | |
| 256 | - polyUpline01 = new BMap.Polyline(polylineArray, {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5}); | |
| 257 | - polyUpline01.data = data; | |
| 258 | - // 把折线添加到地图上 | |
| 259 | - mapBValue.addOverlay(polyUpline01); | |
| 260 | - var sectionPoint = []; | |
| 261 | - // 线路单击事件 | |
| 262 | - polyUpline01.addEventListener('click',function(e) { | |
| 263 | - if(WorldsBMapLine.getIsEditStatus()) { | |
| 264 | - layer.msg('请先保存正在编辑的路段信息...'); | |
| 265 | - return false; | |
| 266 | - } | |
| 267 | - if(WorldsBMapLine.getIsCutSection()) { | |
| 268 | - layer.msg('请先撤销所有切路段的点...'); | |
| 269 | - return false; | |
| 270 | - } | |
| 271 | - polyUpline01.enableEditing(); | |
| 272 | - WorldsBMapLine.setIsEditStatus(true); | |
| 273 | - // 关闭按钮事件 | |
| 274 | - PublicFunctions.addAChangeCssAddDisabled(); | |
| 275 | - }); | |
| 276 | - | |
| 277 | - // 添加路段双击事件 | |
| 278 | - polyUpline01.addEventListener("dblclick",function(e){ | |
| 279 | - if(WorldsBMapLine.getIsCutSection()) { | |
| 280 | - layer.msg('请先撤销所有切路段的点...'); | |
| 281 | - return false; | |
| 282 | - } | |
| 283 | - WorldsBMapLine.setIsEditStatus(false); | |
| 284 | - // 关闭 | |
| 285 | - layer.closeAll(); | |
| 286 | - polyUpline01.disableEditing(); | |
| 287 | - EditSectionObj.setEitdSection(polyUpline01.data); | |
| 288 | - // 获取折线坐标集合 | |
| 289 | - var editPloyLineArray = polyUpline01.getPath(); | |
| 290 | - EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 291 | - sectionList = []; | |
| 292 | - var tbodyHtml = template('section_list',{list : sectionList}); | |
| 293 | - // 截取路段 | |
| 294 | - $('#section_table tbody').html(tbodyHtml); | |
| 295 | - // 加载修改路段弹出层mobal页面 | |
| 296 | - $.get('editsection.html', function(m){ | |
| 297 | - $(pjaxContainer).append(m); | |
| 298 | - $('#edit_section_mobal_cache').trigger('editSectionMobalCache_show', [WorldsBMapLine,MapGetAjaxData,EditSectionObj,PublicFunctions]); | |
| 299 | - }); | |
| 300 | - // 打开按钮事件 | |
| 301 | - PublicFunctions.editAChangeCssRemoveDisabled(); | |
| 302 | - }); | |
| 303 | - | |
| 304 | - // 路段右击事件 | |
| 305 | - var editSection = function(e,ee,marker){ | |
| 306 | - if(WorldsBMapLine.getIsEditStatus()) { | |
| 307 | - layer.msg('请先保存正在编辑的路段信息...'); | |
| 308 | - return false; | |
| 309 | - } | |
| 310 | - var lng = e.lng; | |
| 311 | - var lat = e.lat; | |
| 312 | - var sectionName = null; | |
| 313 | - var marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建点 | |
| 314 | - var label = new BMap.Label(pointIndex+1,{offset:new BMap.Size(pointIndex>8?0:4,0)}); | |
| 315 | - label.setStyle({border :"0", color : "white",backgroundColor:"rgba(0,0,0,0)"}); | |
| 316 | - marker.setLabel(label); | |
| 317 | - marker.isFlag = true; | |
| 318 | - if(pointIndex == 0) { | |
| 319 | - sectionPoint[pointIndex] = {lng:lng , lat:lat}; | |
| 320 | - layer.msg('进入切路段状态，请选择本路段的终点！'); | |
| 321 | - mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 322 | - firstPoint = {lng:lng, lat:lat}; | |
| 323 | - pointIndex++; | |
| 324 | - EditSectionObj.setEitdSection(polyUpline01.data); | |
| 325 | - // 获取折线坐标集合 | |
| 326 | - var editPloyLineArray = polyUpline01.getPath(); | |
| 327 | - EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 328 | - } else if (pointIndex > 0) { | |
| 329 | - layer.prompt({title: '请输入路段名！'}, function(sectionName, index){ | |
| 330 | - pointList = []; | |
| 331 | - sectionPoint[pointIndex] = {lng:lng , lat:lat}; | |
| 332 | - pointList[0] = sectionPoint[pointIndex-1]; | |
| 333 | - pointList[1] = sectionPoint[pointIndex]; | |
| 334 | - sectionList.push({name:sectionName, section:pointList}); | |
| 335 | - layer.close(index); | |
| 336 | - layer.msg('路段截取成功，请选择下一个路段的终点'); | |
| 337 | - mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 338 | - var tbodyHtml = template('section_list',{list : sectionList}); | |
| 339 | - // 截取路段 | |
| 340 | - $('#section_table tbody').html(tbodyHtml); | |
| 341 | - pointIndex++; | |
| 342 | - }); | |
| 343 | - } | |
| 344 | - WorldsBMapLine.setIsCutSection(true); | |
| 345 | - } | |
| 346 | - // 路段生成类型位gps上传时才开启右击事件 | |
| 347 | - if(EditRoute.getLineGenerationType() == 'uploadGPS') { | |
| 348 | - var markerMenu=new BMap.ContextMenu(); | |
| 349 | - markerMenu.addItem(new BMap.MenuItem('切路段',editSection.bind(polyUpline01))); | |
| 350 | - polyUpline01.addContextMenu(markerMenu); | |
| 351 | - } | |
| 352 | - | |
| 353 | - | |
| 354 | - var PanOptions_ ={noAnimation :true}; | |
| 355 | - mapBValue.reset(); | |
| 356 | - mapBValue.panTo(polyline_center,PanOptions_); | |
| 357 | - mapBValue.panBy(500,-510,PanOptions_); | |
| 358 | - mapBValue.setZoom(14); | |
| 359 | - }, | |
| 360 | - // 删除点刷新cutSectionTable | |
| 361 | - refreshCutSectionTable : function() { | |
| 362 | - var tbodyHtml = template('section_list',{list : sectionList}); | |
| 363 | - $('#section_table tbody').html(tbodyHtml); | |
| 364 | - }, | |
| 365 | - // 删除点刷新覆盖物 | |
| 366 | - deleteCutSectionPoint : function(point) { | |
| 367 | - var lng = point.lng; | |
| 368 | - var lat = point.lat; | |
| 369 | - var allOverlay = mapBValue.getOverlays(); | |
| 370 | - // 删除最后一个点 | |
| 371 | - for (var i = 0; i < allOverlay.length -1; i++){ | |
| 372 | - if(allOverlay[i].isFlag) { | |
| 373 | - if(allOverlay[i].point.lng == lng && allOverlay[i].point.lat == lat){ | |
| 374 | - mapBValue.removeOverlay(allOverlay[i]); | |
| 375 | - break; | |
| 376 | - } | |
| 377 | - } | |
| 378 | - } | |
| 379 | - }, | |
| 380 | - // 批量画点 | |
| 381 | - batchPaintingPoint : function() { | |
| 382 | - // 画第一个点 | |
| 383 | - var Point = WorldsBMapLine.getFirstPoint(); | |
| 384 | - if(Point){ | |
| 385 | - var marker = new BMap.Marker(new BMap.Point(Point.lng, Point.lat)); // 创建点 | |
| 386 | - var label = new BMap.Label(1,{offset:new BMap.Size(4,0)}); | |
| 387 | - label.setStyle({border :"0", color : "white",backgroundColor:"rgba(0,0,0,0)"}); | |
| 388 | - marker.setLabel(label); | |
| 389 | - marker.isFlag = true; | |
| 390 | - mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 391 | - | |
| 392 | - WorldsBMapLine.getFirstPoint(); | |
| 393 | - } | |
| 394 | - $.each(sectionList, function(index, value) { | |
| 395 | - var section = value.section; | |
| 396 | - | |
| 397 | - var marker = new BMap.Marker(new BMap.Point(section[1].lng, section[1].lat)); // 创建点 | |
| 398 | - var label = new BMap.Label(index+2,{offset:new BMap.Size(index>7?0:4,0)}); | |
| 399 | - label.setStyle({border :"0", color : "white",backgroundColor:"rgba(0,0,0,0)"}); | |
| 400 | - marker.setLabel(label); | |
| 401 | - marker.isFlag = true; | |
| 402 | - mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 403 | - }); | |
| 404 | - | |
| 405 | - }, | |
| 406 | - /** 在地图上画点 @param：<point_center：中心坐标点> */ | |
| 407 | - drawingUpStationPoint : function(point_center,stationName,s) { | |
| 408 | - | |
| 409 | - // 自定义标注物图片 | |
| 410 | - var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/gjzd.png',new BMap.Size(10, 10)); | |
| 411 | - | |
| 412 | - var html2 = '<div style="position: absolute; margin: 0pt; padding: 0pt; width: 160px; height: 26px; left: -10px; top: -35px; overflow: hidden;">' | |
| 413 | - + '<img class="rm3_image" style="border:none;left:0px; top:0px; position:absolute;" src="/pages/base/stationroute/css/img/back160.png">' | |
| 414 | - + '</div>' | |
| 415 | - + '<label class=" BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: inline; cursor: inherit; border: 0px none; padding: 2px 1px 1px; white-space: nowrap; font: 12px arial,simsun; z-index: 80; color: rgb(255, 102, 0); left: 15px; top: -35px;"><span style="float: left; color: #fdfdfd; margin-left: -22px; font-size: 6px;">'+ s+'</span>'+ stationName+'</label>'; | |
| 416 | - | |
| 417 | - | |
| 418 | - var myRichMarker1 = new BMapLib.RichMarker(html2, point_center,{ | |
| 419 | - "anchor" : new BMap.Size(-10,8), | |
| 420 | - "enableDragging" : true}); | |
| 421 | - | |
| 422 | - | |
| 423 | - myRichMarker1.disableDragging(); | |
| 424 | - mapBValue.addOverlay(myRichMarker1); | |
| 425 | - | |
| 426 | - | |
| 427 | - // 创建标注物 | |
| 428 | - marker = new BMap.Marker(point_center,{icon : icon_target}); | |
| 429 | - | |
| 430 | - // 允许覆盖物在map.clearOverlays方法中被清除。 | |
| 431 | - marker.enableMassClear(); | |
| 432 | - | |
| 433 | - mapBValue.addOverlay(marker); | |
| 434 | - }, | |
| 435 | - | |
| 436 | - // 根据站点坐标匹配库中的公交站点 | |
| 437 | - stationsPointsToLibraryPoint : function(arra,callback) { | |
| 438 | - // 获取长度 | |
| 439 | - var len = arra.length; | |
| 440 | - var station = {}; | |
| 441 | - var stationList = []; | |
| 442 | - (function(){ | |
| 443 | - if (!arguments.callee.count) { | |
| 444 | - arguments.callee.count = 0; | |
| 445 | - } | |
| 446 | - arguments.callee.count++; | |
| 447 | - var index = parseInt(arguments.callee.count) - 1; | |
| 448 | - if (index >= len) { | |
| 449 | - callback && callback(stationList); | |
| 450 | - return ; | |
| 451 | - } | |
| 452 | - var f = arguments.callee; | |
| 453 | - station = arra[index]; | |
| 454 | - if(arra[index].name!=''){ | |
| 455 | - | |
| 456 | - $.get('/station/matchStation',station,function(resultStation) { | |
| 457 | - stationList.push({name:resultStation.name ,wgs:arra[index].wgs,potion:{lng:resultStation.potion_lng, lat:resultStation.potion_lat}, isHave:resultStation.isHave , id:resultStation.id}); | |
| 458 | - f(); | |
| 459 | - }); | |
| 460 | - }else { | |
| 461 | - f(); | |
| 462 | - } | |
| 463 | - })() | |
| 464 | - }, | |
| 465 | - // 地图画多边形 | |
| 466 | - pointsPolygon : function(objStation) { | |
| 467 | - | |
| 468 | - // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 469 | - mapBValue.setZoom(15); | |
| 470 | - | |
| 471 | - // 如果不为空 | |
| 472 | - if(objStation) { | |
| 473 | - | |
| 474 | - // 清除地图覆盖物 | |
| 475 | - mapBValue.clearOverlays(); | |
| 476 | - | |
| 477 | - // 获取中心点坐标字符串 | |
| 478 | - var testpointStr = objStation.stationBJwpoints; | |
| 479 | - | |
| 480 | - // 按空格切割中心点坐标字符串 | |
| 481 | - var BJwpointsPolygon = testpointStr.split(' '); | |
| 482 | - | |
| 483 | - // 中心点坐标 | |
| 484 | - var pointPolygon = new BMap.Point(BJwpointsPolygon[0], BJwpointsPolygon[1]); | |
| 485 | - | |
| 486 | - // 获取多边形坐标字符串 | |
| 487 | - var stationBPolygonGrid = objStation.stationBPolygonGrid; | |
| 488 | - | |
| 489 | - // 截取多边形坐标字符串 | |
| 490 | - var stationBPolygonGridStr = stationBPolygonGrid.substring(9,stationBPolygonGrid.length-2); | |
| 491 | - | |
| 492 | - // 按逗号切割 | |
| 493 | - var pointPolygonArray = stationBPolygonGridStr.split(','); | |
| 494 | - | |
| 495 | - // 多边形坐标集合 | |
| 496 | - var polygonP = []; | |
| 497 | - | |
| 498 | - for(var v = 0;v<pointPolygonArray.length;v++) { | |
| 499 | - | |
| 500 | - polygonP.push(new BMap.Point(pointPolygonArray[v].split(" ")[0],pointPolygonArray[v].split(" ")[1])); | |
| 501 | - | |
| 502 | - } | |
| 503 | - | |
| 504 | - // 画多边形 | |
| 505 | - polygon = new BMap.Polygon(polygonP, { | |
| 506 | - | |
| 507 | - // 线条显色 | |
| 508 | - strokeColor : "blue", | |
| 509 | - | |
| 510 | - // 边线的宽度，以像素为单位。 | |
| 511 | - strokeWeight : 2, | |
| 512 | - | |
| 513 | - // 边线透明度，取值范围0 - 1。 | |
| 514 | - strokeOpacity : 0.5 | |
| 515 | - }); | |
| 516 | - | |
| 517 | - // 增加地图覆盖物多边形 | |
| 518 | - mapBValue.addOverlay(polygon); | |
| 519 | - | |
| 520 | - // 信息窗口属性 | |
| 521 | - var opts_polygon = { | |
| 522 | - | |
| 523 | - // 信息窗口宽度 | |
| 524 | - width : 200, | |
| 525 | - | |
| 526 | - // 信息窗口高度 | |
| 527 | - height : 400, | |
| 528 | - | |
| 529 | - // 信息窗位置偏移值。 | |
| 530 | - offset: new BMap.Size(500,20), | |
| 531 | - | |
| 532 | - //标题 | |
| 533 | - title : '<h4 style="color:#FFFFFF">'+objStation.stationStationName+'站详情</h4>', | |
| 534 | - | |
| 535 | - //设置不允许信窗发送短息 | |
| 536 | - enableMessage : false, | |
| 537 | - | |
| 538 | - //是否开启点击地图关闭信息窗口 | |
| 539 | - enableCloseOnClick : false | |
| 540 | - }; | |
| 541 | - | |
| 542 | - var markTypeStr = ''; | |
| 543 | - | |
| 544 | - if(objStation.stationRouteStationMark=='B') { | |
| 545 | - | |
| 546 | - markTypeStr='起点站'; | |
| 547 | - | |
| 548 | - }else if(objStation.stationRouteStationMark=='Z') { | |
| 549 | - | |
| 550 | - markTypeStr ='中途站'; | |
| 551 | - | |
| 552 | - | |
| 553 | - }else if(objStation.stationRouteStationMark=='E') { | |
| 554 | - | |
| 555 | - markTypeStr='终点站'; | |
| 556 | - | |
| 557 | - } | |
| 558 | - | |
| 559 | - var htm = '<HR style="border:1 dashed #987cb9" width="100%" color=#987cb9 SIZE=1>'+ | |
| 560 | - '<span style="color:#DDD;font-size: 15px;">站点名称：' + objStation.stationStationName + '</span>' + | |
| 561 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">站点编码：' + objStation.stationStationCod + '</span>' + | |
| 562 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">行业编码：' + (objStation.industryCode == null ? "":objStation.industryCode) + '</span>' + | |
| 563 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">站点序号：' + objStation.stationRouteStationRouteCode + '</span>' + | |
| 564 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">站点类型：' + markTypeStr + '</span>' + | |
| 565 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">纬度坐标：' + objStation.stationBJwpoints + '</span>' + | |
| 566 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">到站时间：' + objStation.stationRouteToTime + ' 分钟</span>' + | |
| 567 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">到站距离：' + objStation.stationRouteDistances + ' 公里</span>' + | |
| 568 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">版本号  ：' + objStation.stationRouteVersions + '</span>' + | |
| 569 | - '<span class="help-block" style="width: 100%;font-size: 15px;;color:#DDD;'+ | |
| 570 | - 'overflow: hidden; white-space: nowrap; text-overflow: ellipsis; " title="'+ | |
| 571 | - objStation.stationRouteDescriptions +'" >说明/描述：' + (objStation.stationRouteDescriptions == null ? "":objStation.stationRouteDescriptions)+ '</span>' ; | |
| 572 | - | |
| 573 | - // 创建信息窗口 | |
| 574 | - var infoWindow_target = new BMap.InfoWindow(htm, opts_polygon); | |
| 575 | - // 自定义标注物图片 | |
| 576 | - var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/cz.png',new BMap.Size(20, 20)); | |
| 577 | - | |
| 578 | - // 创建点 | |
| 579 | - marker = new BMap.Marker(pointPolygon,{icon : icon_target}); | |
| 580 | - | |
| 581 | - // 把标注添物加到地图上 | |
| 582 | - mapBValue.addOverlay(marker); | |
| 583 | - | |
| 584 | - // 是否在平移过程中禁止动画。（自1.2新增） | |
| 585 | - var PanOptions_ ={noAnimation :true}; | |
| 586 | - | |
| 587 | - // 将地图的中心点更改为给定的点。 | |
| 588 | - mapBValue.panTo(pointPolygon,PanOptions_); | |
| 589 | - | |
| 590 | - // 将地图在水平位置上移动x像素，垂直位置上移动y像素。 | |
| 591 | - mapBValue.panBy(10,-150,PanOptions_); | |
| 592 | - | |
| 593 | - //开启信息窗口 | |
| 594 | - mapBValue.openInfoWindow(infoWindow_target,pointPolygon); | |
| 595 | - | |
| 596 | - } | |
| 597 | - | |
| 598 | - }, | |
| 599 | - | |
| 600 | - // 画圆 | |
| 601 | - pointsCircle : function(objStation) { | |
| 602 | - | |
| 603 | - // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 604 | - mapBValue.setZoom(16); | |
| 605 | - | |
| 606 | - if(objStation) { | |
| 607 | - | |
| 608 | - // 清除地图覆盖物 | |
| 609 | - mapBValue.clearOverlays(); | |
| 610 | - | |
| 611 | - // 获取中心坐标点字符串分割 | |
| 612 | - var BJwpoints = objStation.stationBJwpoints.split(' '); | |
| 613 | - | |
| 614 | - // 中心坐标点 | |
| 615 | - var point = new BMap.Point(BJwpoints[0], BJwpoints[1]); | |
| 616 | - | |
| 617 | - //创建圆 | |
| 618 | - circle = new BMap.Circle(point,objStation.stationRadius,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); | |
| 619 | - | |
| 620 | - // 允许覆盖物在map.clearOverlays方法中被清除 | |
| 621 | - circle.enableMassClear(); | |
| 622 | - | |
| 623 | - // 百度地图添加覆盖物圆 | |
| 624 | - mapBValue.addOverlay(circle); | |
| 625 | - | |
| 626 | - // 信息窗口参数属性 | |
| 627 | - var opts = { | |
| 628 | - | |
| 629 | - // 信息窗口宽度 | |
| 630 | - width : 200, | |
| 631 | - | |
| 632 | - // 信息窗口高度 | |
| 633 | - height : 450, | |
| 634 | - | |
| 635 | - // 信息窗位置偏移值。 | |
| 636 | - offset: new BMap.Size(500,120), | |
| 637 | - | |
| 638 | - //标题 | |
| 639 | - title : '<h4 style="color:#FFFFFF">'+objStation.stationStationName+'站详情</h4>', | |
| 640 | - | |
| 641 | - //设置不允许信窗发送短息 | |
| 642 | - enableMessage : false, | |
| 643 | - | |
| 644 | - //是否开启点击地图关闭信息窗口 | |
| 645 | - enableCloseOnClick : false, | |
| 646 | - | |
| 647 | - // 是否开启信息窗口打开时地图自动移动（默认开启）。(自 1.1 新增) | |
| 648 | - enableAutoPan:false | |
| 649 | - }; | |
| 650 | - | |
| 651 | - var markTypeStr = ''; | |
| 652 | - | |
| 653 | - if(objStation.stationRouteStationMark=='B') { | |
| 654 | - | |
| 655 | - markTypeStr='起点站'; | |
| 656 | - | |
| 657 | - }else if(objStation.stationRouteStationMark=='Z') { | |
| 658 | - | |
| 659 | - markTypeStr ='中途站'; | |
| 660 | - | |
| 661 | - | |
| 662 | - }else if(objStation.stationRouteStationMark=='E') { | |
| 663 | - | |
| 664 | - markTypeStr='终点站'; | |
| 665 | - | |
| 666 | - } | |
| 667 | - | |
| 668 | - var htm = '<HR style="border:1 dashed #987cb9" width="100%" color=#987cb9 SIZE=1>'+ | |
| 669 | - '<span style="color:#DDD;font-size: 15px;">站点名称：' + objStation.stationStationName + '</span>' + | |
| 670 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">站点编码：' + objStation.stationStationCod + '</span>' + | |
| 671 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">行业编码：' + (objStation.industryCode == null ? "":objStation.industryCode)+ '</span>' + | |
| 672 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">站点序号：' + objStation.stationRouteStationRouteCode + '</span>' + | |
| 673 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">站点类型：' + markTypeStr + '</span>' + | |
| 674 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">纬度坐标：' + objStation.stationBJwpoints + '</span>' + | |
| 675 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">到站时间：' + objStation.stationRouteToTime + ' 分钟</span>' + | |
| 676 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">到站距离：' + objStation.stationRouteDistances + ' 公里</span>' + | |
| 677 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">范围半径：' + objStation.stationRadius + '</span>' + | |
| 678 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">版本号  ：' + objStation.stationRouteVersions + '</span>' + | |
| 679 | - '<span class="help-block" style="width: 100%;font-size: 15px;;color:#DDD;'+ | |
| 680 | - 'overflow: hidden; white-space: nowrap; text-overflow: ellipsis; " title="'+ | |
| 681 | - objStation.stationRouteDescriptions +'" >说明/描述：' + (objStation.stationRouteDescriptions == null ? "":objStation.stationRouteDescriptions) + '</span>' ; | |
| 682 | - | |
| 683 | - // 创建信息窗口 | |
| 684 | - var infoWindow_target = new BMap.InfoWindow(htm, opts); | |
| 685 | - // 自定义标注物图片 | |
| 686 | - var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/cz.png',new BMap.Size(20, 20)); | |
| 687 | - | |
| 688 | - // 创建点 | |
| 689 | - marker = new BMap.Marker(point,{icon : icon_target}); | |
| 690 | - | |
| 691 | - // 把标注添物加到地图上 | |
| 692 | - mapBValue.addOverlay(marker); | |
| 693 | - | |
| 694 | - setTimeout(function(){ | |
| 695 | - //开启信息窗口 | |
| 696 | - marker.openInfoWindow(infoWindow_target,point); | |
| 697 | - | |
| 698 | - },100); | |
| 699 | - | |
| 700 | - // 是否在平移过程中禁止动画。（自1.2新增） | |
| 701 | - var PanOptions_ ={noAnimation :true}; | |
| 702 | - | |
| 703 | - // 将地图的中心点更改为给定的点。 | |
| 704 | - mapBValue.panTo(point,PanOptions_); | |
| 705 | - | |
| 706 | - mapBValue.panBy(10,-200,PanOptions_); | |
| 707 | - | |
| 708 | - // 添加标志物监听事件 | |
| 709 | - marker.addEventListener("click",function() { | |
| 710 | - | |
| 711 | - //开启信息窗口 | |
| 712 | - marker.openInfoWindow(infoWindow_target,point); | |
| 713 | - | |
| 714 | - }); | |
| 715 | - | |
| 716 | - } | |
| 717 | - | |
| 718 | - }, | |
| 719 | - // 编辑图形 | |
| 720 | - editShapes : function(objStation) { | |
| 721 | - | |
| 722 | - // 清空地图 | |
| 723 | - WorldsBMapLine.clearMarkAndOverlays(); | |
| 724 | - | |
| 725 | - // 站点对象不为空 | |
| 726 | - if(objStation) { | |
| 727 | - var stationShapesType = objStation.stationShapesType; | |
| 728 | - | |
| 729 | - // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 730 | - mapBValue.setZoom(16); | |
| 731 | - | |
| 732 | - // 编辑圆 | |
| 733 | - if(stationShapesType =='r') { | |
| 734 | - | |
| 735 | - // 获取中心坐标点字符串分割 | |
| 736 | - var BJwpoints = objStation.stationBJwpoints.split(' '); | |
| 737 | - | |
| 738 | - // 中心坐标点 | |
| 739 | - var point = new BMap.Point(BJwpoints[0], BJwpoints[1]); | |
| 740 | - | |
| 741 | - //创建圆 | |
| 742 | - circle = new BMap.Circle(point,objStation.stationRadius,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); | |
| 743 | - | |
| 744 | - // 允许覆盖物在map.clearOverlays方法中被清除 | |
| 745 | - circle.enableMassClear(); | |
| 746 | - | |
| 747 | - // 百度地图添加覆盖物圆 | |
| 748 | - mapBValue.addOverlay(circle); | |
| 749 | - | |
| 750 | - // 开启编辑功能 | |
| 751 | - circle.enableEditing(); | |
| 752 | - | |
| 753 | - // 是否在平移过程中禁止动画。（自1.2新增） | |
| 754 | - var PanOptions_ ={noAnimation :true}; | |
| 755 | - | |
| 756 | - // 将地图的中心点更改为给定的点。 | |
| 757 | - mapBValue.panTo(point,PanOptions_); | |
| 758 | - | |
| 759 | - mapBValue.panBy(10,-200,PanOptions_); | |
| 760 | - | |
| 761 | - // 编辑圆监听事件 | |
| 762 | - circle.addEventListener('dblclick',function() { | |
| 763 | - | |
| 764 | - // 返回圆形的半径，单位为米。 | |
| 765 | - var newRadius = circle.getRadius(); | |
| 766 | - | |
| 767 | - // 返回圆形的中心点坐标。 | |
| 768 | - var newCenter = circle.getCenter().lng + ' ' + circle.getCenter().lat; | |
| 769 | - | |
| 770 | - /** 设置修改站点集合对象站点中心点百度坐标属性值 @param：<bJwpoints：中心点百度坐标） */ | |
| 771 | - objStation.stationBJwpoints = newCenter; | |
| 772 | - | |
| 773 | - /** 设置修改站点集合对象范围图形类型属性值 @param：<shapesType：范围图形类型） */ | |
| 774 | -// objStation.stationBJwpoints = 'r'; | |
| 775 | - | |
| 776 | - /** 设置修改站点集合对象圆形半径属性值 @param：<radius：圆形半径） */ | |
| 777 | - objStation.stationRadius = Math.round(newRadius); | |
| 778 | - | |
| 779 | - /** 设置修改站点集合对象图形百度坐标集合属性值 @param：<bPolygonGrid：图形百度坐标集合） */ | |
| 780 | - objStation.stationBPolygonGrid = ''; | |
| 781 | - | |
| 782 | - // 加载编辑页面 | |
| 783 | - $.get('editstation.html', function(m){ | |
| 784 | - | |
| 785 | - $(pjaxContainer).append(m); | |
| 786 | - | |
| 787 | - $('#edit_station_mobal').trigger('editSelectMobal_show', [WorldsBMapLine,MapGetAjaxData,PublicFunctions,objStation]); | |
| 788 | - | |
| 789 | - }); | |
| 790 | - | |
| 791 | - // 打开按钮事件 | |
| 792 | - PublicFunctions.editAChangeCssRemoveDisabled(); | |
| 793 | - }); | |
| 794 | - | |
| 795 | - // 编辑多边行 | |
| 796 | - }else if(stationShapesType =='d') { | |
| 797 | - | |
| 798 | - // 清除地图覆盖物 | |
| 799 | - mapBValue.clearOverlays(); | |
| 800 | - | |
| 801 | - // 获取中心点坐标字符串 | |
| 802 | - var testpointStr = objStation.stationBJwpoints; | |
| 803 | - | |
| 804 | - // 按空格切割中心点坐标字符串 | |
| 805 | - var BJwpointsPolygon = testpointStr.split(' '); | |
| 806 | - | |
| 807 | - // 中心点坐标 | |
| 808 | - var pointPolygon = new BMap.Point(BJwpointsPolygon[0], BJwpointsPolygon[1]); | |
| 809 | - | |
| 810 | - // 获取多边形坐标字符串 | |
| 811 | - var stationBPolygonGrid = objStation.stationBPolygonGrid; | |
| 812 | - | |
| 813 | - // 截取多边形坐标字符串 | |
| 814 | - var stationBPolygonGridStr = stationBPolygonGrid.substring(9,stationBPolygonGrid.length-2); | |
| 815 | - | |
| 816 | - // 按逗号切割 | |
| 817 | - var pointPolygonArray = stationBPolygonGridStr.split(','); | |
| 818 | - | |
| 819 | - // 多边形坐标集合 | |
| 820 | - var polygonP = []; | |
| 821 | - | |
| 822 | - for(var v = 0;v<pointPolygonArray.length;v++) { | |
| 823 | - | |
| 824 | - polygonP.push(new BMap.Point(pointPolygonArray[v].split(" ")[0],pointPolygonArray[v].split(" ")[1])); | |
| 825 | - | |
| 826 | - } | |
| 827 | - | |
| 828 | - // 画多边形 | |
| 829 | - polygon = new BMap.Polygon(polygonP, { | |
| 830 | - | |
| 831 | - // 线条显色 | |
| 832 | - strokeColor : "blue", | |
| 833 | - | |
| 834 | - // 边线的宽度，以像素为单位。 | |
| 835 | - strokeWeight : 2, | |
| 836 | - | |
| 837 | - // 边线透明度，取值范围0 - 1。 | |
| 838 | - strokeOpacity : 0.5 | |
| 839 | - }); | |
| 840 | - | |
| 841 | - // 增加地图覆盖物多边形 | |
| 842 | - mapBValue.addOverlay(polygon); | |
| 843 | - | |
| 844 | - // 开启编辑功能(自 1.1 新增) | |
| 845 | - polygon.enableEditing(); | |
| 846 | - | |
| 847 | - // 是否在平移过程中禁止动画。（自1.2新增） | |
| 848 | - var PanOptions_ ={noAnimation :true}; | |
| 849 | - | |
| 850 | - // 将地图的中心点更改为给定的点。 | |
| 851 | - mapBValue.panTo(pointPolygon,PanOptions_); | |
| 852 | - | |
| 853 | - // 将地图在水平位置上移动x像素，垂直位置上移动y像素。 | |
| 854 | - mapBValue.panBy(10,-150,PanOptions_); | |
| 855 | - | |
| 856 | - // 添加多变行编辑事件 | |
| 857 | - polygon.addEventListener('dblclick',function(e) { | |
| 858 | - | |
| 859 | - // 获取编辑的多边形对象 | |
| 860 | - var edit_pointE = polygon; | |
| 861 | - | |
| 862 | - var edit_bPloygonGrid = ""; | |
| 863 | - | |
| 864 | - var editPolyGonLen_ = edit_pointE.getPath().length; | |
| 865 | - | |
| 866 | - for(var k =0;k<editPolyGonLen_;k++) { | |
| 867 | - | |
| 868 | - if(k==0) { | |
| 869 | - | |
| 870 | - edit_bPloygonGrid = edit_pointE.getPath()[k].lng + ' ' + edit_pointE.getPath()[k].lat; | |
| 871 | - | |
| 872 | - }else { | |
| 873 | - | |
| 874 | - edit_bPloygonGrid = edit_bPloygonGrid + ',' + edit_pointE.getPath()[k].lng + ' ' + edit_pointE.getPath()[k].lat; | |
| 875 | - | |
| 876 | - } | |
| 877 | - | |
| 878 | - } | |
| 879 | - | |
| 880 | - edit_bPloygonGrid = edit_bPloygonGrid + ',' + edit_pointE.getPath()[0].lng + ' ' + edit_pointE.getPath()[0].lat; | |
| 881 | - | |
| 882 | - // 多边形中心点 | |
| 883 | - var centre_points = edit_pointE.getBounds().getCenter().lng + ' ' + edit_pointE.getBounds().getCenter().lat; | |
| 884 | - | |
| 885 | - /** 设置修改站点集合对象站点中心点百度坐标属性值 @param：<bJwpoints：中心点百度坐标） */ | |
| 886 | - objStation.stationBJwpoints = centre_points; | |
| 887 | - | |
| 888 | - /** 设置修改站点集合对象范围图形类型属性值 @param：<shapesType：范围图形类型） */ | |
| 889 | - objStation.stationShapesType = 'd';; | |
| 890 | - | |
| 891 | - /** 设置修改站点集合对象圆形半径属性值 @param：<radius：圆形半径） */ | |
| 892 | - objStation.stationRadius = ''; | |
| 893 | - | |
| 894 | - /** 设置修改站点集合对象图形百度坐标集合属性值 @param：<bPolygonGrid：图形百度坐标集合） */ | |
| 895 | - objStation.stationBPolygonGrid = edit_bPloygonGrid; | |
| 896 | - | |
| 897 | - $.get('editstation.html', function(m){ | |
| 898 | - | |
| 899 | - $(pjaxContainer).append(m); | |
| 900 | - | |
| 901 | - $('#edit_station_mobal').trigger('editSelectMobal_show', [WorldsBMapLine,MapGetAjaxData,PublicFunctions,objStation]); | |
| 902 | - | |
| 903 | - }); | |
| 904 | - | |
| 905 | - // 打开按钮事件 | |
| 906 | - PublicFunctions.editAChangeCssRemoveDisabled(); | |
| 907 | - }); | |
| 908 | - | |
| 909 | - } | |
| 910 | - } | |
| 911 | - }, | |
| 912 | - | |
| 913 | - localtionPoint : function(stationNameV) { | |
| 914 | - | |
| 915 | - WorldsBMapLine.localSearchFromAdreesToPoint(stationNameV,function(Points) { | |
| 916 | - | |
| 917 | - if(Points) { | |
| 918 | - | |
| 919 | - var BJwpointsArray = Points.split(' '); | |
| 920 | - | |
| 921 | - var stationNameChangePoint = new BMap.Point(BJwpointsArray[0], BJwpointsArray[1]); | |
| 922 | - | |
| 923 | - var marker_stargt2 = new BMap.Marker(stationNameChangePoint); | |
| 924 | - | |
| 925 | - var PanOptions ={noAnimation :true}; | |
| 926 | - | |
| 927 | - mapBValue.panTo(stationNameChangePoint,PanOptions); | |
| 928 | - | |
| 929 | - mapBValue.panBy(0,-100); | |
| 930 | - | |
| 931 | - // 将标注添加到地图中 | |
| 932 | - mapBValue.addOverlay(marker_stargt2); | |
| 933 | - | |
| 934 | - //跳动的动画 | |
| 935 | - marker_stargt2.setAnimation(BMAP_ANIMATION_BOUNCE); | |
| 936 | - | |
| 937 | - } | |
| 938 | - | |
| 939 | - }); | |
| 940 | - | |
| 941 | - }, | |
| 942 | - | |
| 943 | - // 根据地理名称获取百度经纬度坐标 | |
| 944 | - localSearchFromAdreesToPoint: function(Address,callback) { | |
| 945 | - | |
| 946 | - // 创建一个搜索类实例 | |
| 947 | - var localSearch = new BMap.LocalSearch(mapBValue); | |
| 948 | - | |
| 949 | - // 检索完成后的回调函数。 | |
| 950 | - localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 951 | - | |
| 952 | - var resultPoints = ''; | |
| 953 | - | |
| 954 | - if(searchResult) { | |
| 955 | - | |
| 956 | - // 返回索引指定的结果。索引0表示第1条结果 | |
| 957 | - var poi = searchResult.getPoi(0); | |
| 958 | - | |
| 959 | - if(poi) { | |
| 960 | - | |
| 961 | - //获取经度和纬度 | |
| 962 | - resultPoints = poi.point.lng + ' ' + poi.point.lat; | |
| 963 | - | |
| 964 | - callback && callback(resultPoints); | |
| 965 | - | |
| 966 | - }else { | |
| 967 | - | |
| 968 | - callback && callback(false); | |
| 969 | - | |
| 970 | - } | |
| 971 | - | |
| 972 | - }else { | |
| 973 | - | |
| 974 | - callback && callback(false); | |
| 975 | - } | |
| 976 | - | |
| 977 | - }); | |
| 978 | - | |
| 979 | - // 根据检索词发起检索。 | |
| 980 | - localSearch.search(Address); | |
| 981 | - | |
| 982 | - }, | |
| 983 | - | |
| 984 | - clearMarkAndOverlays : function() { | |
| 985 | - | |
| 986 | - // 清楚地图覆盖物 | |
| 987 | - mapBValue.clearOverlays(); | |
| 988 | - | |
| 989 | - mapBValue.removeOverlay(); | |
| 990 | - | |
| 991 | - } | |
| 992 | - | |
| 993 | - } | |
| 994 | - | |
| 995 | - return Bmap; | |
| 996 | - | |
| 1 | +/** | |
| 2 | + * 百度地图 | |
| 3 | + * | |
| 4 | + * - - - - - -》init：地图初始化 | |
| 5 | + * | |
| 6 | + * - - - - - -》getDistanceAndDuration：获取距离与时间 | |
| 7 | + * | |
| 8 | + * - - - - - -》drawingUpline：在地图上画出上行线路走向 | |
| 9 | + * | |
| 10 | + * - - - - - -》stationsPointsToLibraryPoint：根据站点坐标匹配库中的公交站点（手动规划） | |
| 11 | + */ | |
| 12 | + | |
| 13 | +var WorldsBMapLine = function () { | |
| 14 | + | |
| 15 | + /** WorldsBMapLine 全局变量定义 mapBValue：地图对象；polyUpline：走向折线；sectionList：截取过的路段 ；pointIndex：计算路段被切的次数; | |
| 16 | + * firstPoint:截取路段的第一个点;iseditStatus：路段是否在编辑状态；isCutSection ： 获取路段是否在截取状态*/ | |
| 17 | + var mapBValue = '', polyUpline='', sectionList = [], pointIndex = 0, iseditStatus = false, firstPoint = null, isCutSection = false; | |
| 18 | + | |
| 19 | + var Bmap = { | |
| 20 | + | |
| 21 | + init : function() { | |
| 22 | + | |
| 23 | + // 设置中心点, | |
| 24 | + var CENTER_POINT = {lng : 121.528733,lat : 31.237425}; | |
| 25 | + | |
| 26 | + // 百度API Key | |
| 27 | + var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT'; | |
| 28 | + | |
| 29 | + // 初始化百度地图 | |
| 30 | + mapBValue = new BMap.Map("bmap_basic"); | |
| 31 | + | |
| 32 | + //中心点和缩放级别 | |
| 33 | + mapBValue.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat), 20); | |
| 34 | + | |
| 35 | + //启用地图拖拽事件，默认启用(可不写) | |
| 36 | + mapBValue.enableDragging(); | |
| 37 | + | |
| 38 | + //启用地图滚轮放大缩小 | |
| 39 | + mapBValue.enableScrollWheelZoom(); | |
| 40 | + | |
| 41 | + //禁用鼠标双击放大 | |
| 42 | + mapBValue.disableDoubleClickZoom(); | |
| 43 | + | |
| 44 | + //启用键盘上下左右键移动地图 | |
| 45 | + mapBValue.enableKeyboard(); | |
| 46 | + | |
| 47 | + return mapBValue; | |
| 48 | + }, | |
| 49 | + /** 获取第一个切路段的点 @return Point*/ | |
| 50 | + getFirstPoint : function() { | |
| 51 | + return firstPoint; | |
| 52 | + }, | |
| 53 | + /** 第一个切路段的点 */ | |
| 54 | + setFirstPoint : function(Point) { | |
| 55 | + firstPoint = Point; | |
| 56 | + }, | |
| 57 | + /** 获取地图对象 @return 地图对象map */ | |
| 58 | + getmapBValue : function() { | |
| 59 | + | |
| 60 | + return mapBValue; | |
| 61 | + | |
| 62 | + }, | |
| 63 | + | |
| 64 | + getPolyUpline : function() { | |
| 65 | + | |
| 66 | + return polyUpline; | |
| 67 | + }, | |
| 68 | + | |
| 69 | + /** 获取截取过的路段 @return 路段对象List */ | |
| 70 | + getSectionList : function() { | |
| 71 | + | |
| 72 | + return sectionList; | |
| 73 | + | |
| 74 | + }, | |
| 75 | + setSectionList : function(list) { | |
| 76 | + | |
| 77 | + sectionList = list; | |
| 78 | + }, | |
| 79 | + initCutSectionPoint : function() { | |
| 80 | + sectionList = []; | |
| 81 | + var tbodyHtml = template('section_list',{list : sectionList}); | |
| 82 | + $('#section_table tbody').html(tbodyHtml); | |
| 83 | + }, | |
| 84 | + /** 获取切路段的点下标 @return int*/ | |
| 85 | + setPointIndex : function(index) { | |
| 86 | + pointIndex = index; | |
| 87 | + }, | |
| 88 | + getPointIndex : function() { | |
| 89 | + | |
| 90 | + return pointIndex; | |
| 91 | + | |
| 92 | + }, | |
| 93 | + /** 获取路段是否在编辑状态 @return boolean*/ | |
| 94 | + getIsEditStatus : function() { | |
| 95 | + return iseditStatus; | |
| 96 | + }, | |
| 97 | + setIsEditStatus : function(v) { | |
| 98 | + iseditStatus = v ; | |
| 99 | + }, | |
| 100 | + | |
| 101 | + /** 获取路段是否在截取状态 @return boolean*/ | |
| 102 | + getIsCutSection : function() { | |
| 103 | + return isCutSection; | |
| 104 | + }, | |
| 105 | + setIsCutSection : function(v) { | |
| 106 | + isCutSection = v ; | |
| 107 | + }, | |
| 108 | + | |
| 109 | + /** 获取距离与时间 @param <points：坐标点集合> */ | |
| 110 | + getDistanceAndDuration : function(points,callback){ | |
| 111 | + | |
| 112 | + // 获取长度 | |
| 113 | + var len = points.length; | |
| 114 | + (function(){ | |
| 115 | + | |
| 116 | + if (!arguments.callee.count) { | |
| 117 | + | |
| 118 | + arguments.callee.count = 0; | |
| 119 | + | |
| 120 | + } | |
| 121 | + | |
| 122 | + arguments.callee.count++; | |
| 123 | + | |
| 124 | + var index = parseInt(arguments.callee.count) - 1; | |
| 125 | + | |
| 126 | + if (index >= len-1) { | |
| 127 | + callback && callback(points); | |
| 128 | + | |
| 129 | + return; | |
| 130 | + } | |
| 131 | + | |
| 132 | + // 当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。(当前正在执行的函数。) | |
| 133 | + var f = arguments.callee; | |
| 134 | + // 起点坐标 <坐标格式：40.056878,116.30815> | |
| 135 | + var origin = points[index].potion.lat + ',' + points[index].potion.lng; | |
| 136 | + | |
| 137 | + // 终点坐标 <坐标格式：40.056878,116.30815> | |
| 138 | + var destination = points[index+1].potion.lat + ',' + points[index+1].potion.lng; | |
| 139 | + var region = '上海'; | |
| 140 | + | |
| 141 | + var origin_region = '上海'; | |
| 142 | + | |
| 143 | + var destination_region = '上海'; | |
| 144 | + | |
| 145 | + var output = 'json'; | |
| 146 | + | |
| 147 | + var ak_My = 'wjlITmXeCek5MxyU3ZUBkTeU8B0o0npk'; | |
| 148 | + | |
| 149 | + /** | |
| 150 | + * origin：起点名称或经纬度； | |
| 151 | + * | |
| 152 | + * destination：终点名称或经纬度； | |
| 153 | + * | |
| 154 | + * origin_region：起始点所在城市，驾车导航时必填。 | |
| 155 | + * | |
| 156 | + * destination_region：终点所在城市，驾车导航时必填。 | |
| 157 | + * | |
| 158 | + * output :表示输出类型，可设置为xml或json，默认为xml。 | |
| 159 | + * | |
| 160 | + **/ | |
| 161 | + var paramsB = {origin:origin,destination:destination,region:region,origin_region:origin_region,destination_region:destination_region,output:output,ak:ak_My}; | |
| 162 | + | |
| 163 | + /** @description :未认证开发者默认配额为：2000次/天。 */ | |
| 164 | + $.ajax({ | |
| 165 | + | |
| 166 | + // 百度地图根据坐标获取两点之间的时间与距离 | |
| 167 | + url: '//api.map.baidu.com/direction/v1?mode=transit', | |
| 168 | + | |
| 169 | + data: paramsB, | |
| 170 | + | |
| 171 | + dataType: 'jsonp', | |
| 172 | + | |
| 173 | + success: function(r){ | |
| 174 | + | |
| 175 | + if(r) { | |
| 176 | + | |
| 177 | + if(r.message=='ok') { | |
| 178 | + | |
| 179 | + if(r.result.taxi==null) { | |
| 180 | + | |
| 181 | + // 获取距离(单位：米) | |
| 182 | + points[index+1].distance = 0; | |
| 183 | + | |
| 184 | + // 获取时间(单位：秒) | |
| 185 | + points[index+1].duration = 0; | |
| 186 | + | |
| 187 | + }else { | |
| 188 | + | |
| 189 | + // 获取距离(单位：米) | |
| 190 | + points[index+1].distance = r.result.taxi.distance; | |
| 191 | + | |
| 192 | + // 获取时间(单位：秒) | |
| 193 | + points[index+1].duration = r.result.taxi.duration; | |
| 194 | + | |
| 195 | + } | |
| 196 | + | |
| 197 | + | |
| 198 | + } | |
| 199 | + | |
| 200 | + } | |
| 201 | + | |
| 202 | + f(); | |
| 203 | + } | |
| 204 | + }); | |
| 205 | + | |
| 206 | + })(); | |
| 207 | + | |
| 208 | + }, | |
| 209 | + drawingSection: function(data){ | |
| 210 | + /** 获取站点路由信息 @param:<Line.id：线路Id；0：上行> @return：<resultdata：站点路由数据> */ | |
| 211 | + WorldsBMapLine.clearMarkAndOverlays(); | |
| 212 | + // 编辑路段数据 | |
| 213 | + if(data) { | |
| 214 | + // 地图折线坐标点集合 | |
| 215 | + var polylineArray = []; | |
| 216 | + // 获取路段折线坐标字符串 | |
| 217 | + var sectionBsectionVectorStr = data.sectionBsectionVector; | |
| 218 | + if(sectionBsectionVectorStr==null) { | |
| 219 | + return; | |
| 220 | + } | |
| 221 | + // 切割段折线坐标字符串 | |
| 222 | + var tempStr = sectionBsectionVectorStr.substring(11,sectionBsectionVectorStr.length-1); | |
| 223 | + // 分割折线坐标字符串 | |
| 224 | + var lineArray = tempStr.split(','); | |
| 225 | + for(var i = 0;i<lineArray.length;i++) { | |
| 226 | + polylineArray.push(new BMap.Point(lineArray[i].split(' ')[0],lineArray[i].split(' ')[1])); | |
| 227 | + } | |
| 228 | + var index = parseInt(polylineArray.length/2); | |
| 229 | + var center = polylineArray[index]; | |
| 230 | + /** 在地图上画出线路走向 @param：<polylineArray：地图折线坐标点集合；resultdata：站点路由数据> */ | |
| 231 | + WorldsBMapLine.drawingUpline(polylineArray,center); | |
| 232 | + /** 在地图上画点 @param：<point_center：中心坐标点> */ | |
| 233 | + WorldsBMapLine.drawingUpStationPoint(center,data.sectionName,1); | |
| 234 | + } | |
| 235 | + }, | |
| 236 | + // 在地图上画出上行线路走向（单路段） | |
| 237 | + drawingUpline : function (polylineArray,polyline_center,data) { | |
| 238 | + /*WorldsBMap.clearMarkAndOverlays();*/ | |
| 239 | + polyUpline = ''; | |
| 240 | + // 创建线路走向 | |
| 241 | + polyUpline = new BMap.Polyline(polylineArray, {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5}); | |
| 242 | + // polyUpline.data = data; | |
| 243 | + // 把折线添加到地图上 | |
| 244 | + mapBValue.addOverlay(polyUpline); | |
| 245 | + var PanOptions_ ={noAnimation :true}; | |
| 246 | + mapBValue.reset(); | |
| 247 | + mapBValue.panTo(polyline_center,PanOptions_); | |
| 248 | + mapBValue.panBy(500,-510,PanOptions_); | |
| 249 | + mapBValue.setZoom(14); | |
| 250 | + }, | |
| 251 | + | |
| 252 | + // 在地图上画出上行线路走向（多路段） | |
| 253 | + drawingUpline01 : function (polylineArray,polyline_center,data) { | |
| 254 | + var polyUpline01 = 'polyline' + '_' + data.sectionrouteId; | |
| 255 | + // 创建线路走向 | |
| 256 | + polyUpline01 = new BMap.Polyline(polylineArray, {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5}); | |
| 257 | + polyUpline01.data = data; | |
| 258 | + // 把折线添加到地图上 | |
| 259 | + mapBValue.addOverlay(polyUpline01); | |
| 260 | + var sectionPoint = []; | |
| 261 | + // 线路单击事件 | |
| 262 | + polyUpline01.addEventListener('click',function(e) { | |
| 263 | + if(WorldsBMapLine.getIsEditStatus()) { | |
| 264 | + layer.msg('请先保存正在编辑的路段信息...'); | |
| 265 | + return false; | |
| 266 | + } | |
| 267 | + if(WorldsBMapLine.getIsCutSection()) { | |
| 268 | + layer.msg('请先撤销所有切路段的点...'); | |
| 269 | + return false; | |
| 270 | + } | |
| 271 | + polyUpline01.enableEditing(); | |
| 272 | + WorldsBMapLine.setIsEditStatus(true); | |
| 273 | + // 关闭按钮事件 | |
| 274 | + PublicFunctions.addAChangeCssAddDisabled(); | |
| 275 | + }); | |
| 276 | + | |
| 277 | + // 添加路段双击事件 | |
| 278 | + polyUpline01.addEventListener("dblclick",function(e){ | |
| 279 | + if(WorldsBMapLine.getIsCutSection()) { | |
| 280 | + layer.msg('请先撤销所有切路段的点...'); | |
| 281 | + return false; | |
| 282 | + } | |
| 283 | + WorldsBMapLine.setIsEditStatus(false); | |
| 284 | + // 关闭 | |
| 285 | + layer.closeAll(); | |
| 286 | + polyUpline01.disableEditing(); | |
| 287 | + EditSectionObj.setEitdSection(polyUpline01.data); | |
| 288 | + // 获取折线坐标集合 | |
| 289 | + var editPloyLineArray = polyUpline01.getPath(); | |
| 290 | + EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 291 | + sectionList = []; | |
| 292 | + var tbodyHtml = template('section_list',{list : sectionList}); | |
| 293 | + // 截取路段 | |
| 294 | + $('#section_table tbody').html(tbodyHtml); | |
| 295 | + // 加载修改路段弹出层mobal页面 | |
| 296 | + $.get('editsection.html', function(m){ | |
| 297 | + $(pjaxContainer).append(m); | |
| 298 | + $('#edit_section_mobal_cache').trigger('editSectionMobalCache_show', [WorldsBMapLine,MapGetAjaxData,EditSectionObj,PublicFunctions]); | |
| 299 | + }); | |
| 300 | + // 打开按钮事件 | |
| 301 | + PublicFunctions.editAChangeCssRemoveDisabled(); | |
| 302 | + }); | |
| 303 | + | |
| 304 | + // 路段右击事件 | |
| 305 | + var editSection = function(e,ee,marker){ | |
| 306 | + if(WorldsBMapLine.getIsEditStatus()) { | |
| 307 | + layer.msg('请先保存正在编辑的路段信息...'); | |
| 308 | + return false; | |
| 309 | + } | |
| 310 | + var lng = e.lng; | |
| 311 | + var lat = e.lat; | |
| 312 | + var sectionName = null; | |
| 313 | + var marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建点 | |
| 314 | + var label = new BMap.Label(pointIndex+1,{offset:new BMap.Size(pointIndex>8?0:4,0)}); | |
| 315 | + label.setStyle({border :"0", color : "white",backgroundColor:"rgba(0,0,0,0)"}); | |
| 316 | + marker.setLabel(label); | |
| 317 | + marker.isFlag = true; | |
| 318 | + if(pointIndex == 0) { | |
| 319 | + sectionPoint[pointIndex] = {lng:lng , lat:lat}; | |
| 320 | + layer.msg('进入切路段状态，请选择本路段的终点！'); | |
| 321 | + mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 322 | + firstPoint = {lng:lng, lat:lat}; | |
| 323 | + pointIndex++; | |
| 324 | + EditSectionObj.setEitdSection(polyUpline01.data); | |
| 325 | + // 获取折线坐标集合 | |
| 326 | + var editPloyLineArray = polyUpline01.getPath(); | |
| 327 | + EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 328 | + } else if (pointIndex > 0) { | |
| 329 | + layer.prompt({title: '请输入路段名！'}, function(sectionName, index){ | |
| 330 | + pointList = []; | |
| 331 | + sectionPoint[pointIndex] = {lng:lng , lat:lat}; | |
| 332 | + pointList[0] = sectionPoint[pointIndex-1]; | |
| 333 | + pointList[1] = sectionPoint[pointIndex]; | |
| 334 | + sectionList.push({name:sectionName, section:pointList}); | |
| 335 | + layer.close(index); | |
| 336 | + layer.msg('路段截取成功，请选择下一个路段的终点'); | |
| 337 | + mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 338 | + var tbodyHtml = template('section_list',{list : sectionList}); | |
| 339 | + // 截取路段 | |
| 340 | + $('#section_table tbody').html(tbodyHtml); | |
| 341 | + pointIndex++; | |
| 342 | + }); | |
| 343 | + } | |
| 344 | + WorldsBMapLine.setIsCutSection(true); | |
| 345 | + } | |
| 346 | + // 路段生成类型位gps上传时才开启右击事件 | |
| 347 | + if(EditRoute.getLineGenerationType() == 'uploadGPS') { | |
| 348 | + var markerMenu=new BMap.ContextMenu(); | |
| 349 | + markerMenu.addItem(new BMap.MenuItem('切路段',editSection.bind(polyUpline01))); | |
| 350 | + polyUpline01.addContextMenu(markerMenu); | |
| 351 | + } | |
| 352 | + | |
| 353 | + | |
| 354 | + var PanOptions_ ={noAnimation :true}; | |
| 355 | + mapBValue.reset(); | |
| 356 | + mapBValue.panTo(polyline_center,PanOptions_); | |
| 357 | + mapBValue.panBy(500,-510,PanOptions_); | |
| 358 | + mapBValue.setZoom(14); | |
| 359 | + }, | |
| 360 | + // 删除点刷新cutSectionTable | |
| 361 | + refreshCutSectionTable : function() { | |
| 362 | + var tbodyHtml = template('section_list',{list : sectionList}); | |
| 363 | + $('#section_table tbody').html(tbodyHtml); | |
| 364 | + }, | |
| 365 | + // 删除点刷新覆盖物 | |
| 366 | + deleteCutSectionPoint : function(point) { | |
| 367 | + var lng = point.lng; | |
| 368 | + var lat = point.lat; | |
| 369 | + var allOverlay = mapBValue.getOverlays(); | |
| 370 | + // 删除最后一个点 | |
| 371 | + for (var i = 0; i < allOverlay.length -1; i++){ | |
| 372 | + if(allOverlay[i].isFlag) { | |
| 373 | + if(allOverlay[i].point.lng == lng && allOverlay[i].point.lat == lat){ | |
| 374 | + mapBValue.removeOverlay(allOverlay[i]); | |
| 375 | + break; | |
| 376 | + } | |
| 377 | + } | |
| 378 | + } | |
| 379 | + }, | |
| 380 | + // 批量画点 | |
| 381 | + batchPaintingPoint : function() { | |
| 382 | + // 画第一个点 | |
| 383 | + var Point = WorldsBMapLine.getFirstPoint(); | |
| 384 | + if(Point){ | |
| 385 | + var marker = new BMap.Marker(new BMap.Point(Point.lng, Point.lat)); // 创建点 | |
| 386 | + var label = new BMap.Label(1,{offset:new BMap.Size(4,0)}); | |
| 387 | + label.setStyle({border :"0", color : "white",backgroundColor:"rgba(0,0,0,0)"}); | |
| 388 | + marker.setLabel(label); | |
| 389 | + marker.isFlag = true; | |
| 390 | + mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 391 | + | |
| 392 | + WorldsBMapLine.getFirstPoint(); | |
| 393 | + } | |
| 394 | + $.each(sectionList, function(index, value) { | |
| 395 | + var section = value.section; | |
| 396 | + | |
| 397 | + var marker = new BMap.Marker(new BMap.Point(section[1].lng, section[1].lat)); // 创建点 | |
| 398 | + var label = new BMap.Label(index+2,{offset:new BMap.Size(index>7?0:4,0)}); | |
| 399 | + label.setStyle({border :"0", color : "white",backgroundColor:"rgba(0,0,0,0)"}); | |
| 400 | + marker.setLabel(label); | |
| 401 | + marker.isFlag = true; | |
| 402 | + mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 403 | + }); | |
| 404 | + | |
| 405 | + }, | |
| 406 | + /** 在地图上画点 @param：<point_center：中心坐标点> */ | |
| 407 | + drawingUpStationPoint : function(point_center,stationName,s) { | |
| 408 | + | |
| 409 | + // 自定义标注物图片 | |
| 410 | + var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/gjzd.png',new BMap.Size(10, 10)); | |
| 411 | + | |
| 412 | + var html2 = '<div style="position: absolute; margin: 0pt; padding: 0pt; width: 160px; height: 26px; left: -10px; top: -35px; overflow: hidden;">' | |
| 413 | + + '<img class="rm3_image" style="border:none;left:0px; top:0px; position:absolute;" src="/pages/base/stationroute/css/img/back160.png">' | |
| 414 | + + '</div>' | |
| 415 | + + '<label class=" BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: inline; cursor: inherit; border: 0px none; padding: 2px 1px 1px; white-space: nowrap; font: 12px arial,simsun; z-index: 80; color: rgb(255, 102, 0); left: 15px; top: -35px;"><span style="float: left; color: #fdfdfd; margin-left: -22px; font-size: 6px;">'+ s+'</span>'+ stationName+'</label>'; | |
| 416 | + | |
| 417 | + | |
| 418 | + var myRichMarker1 = new BMapLib.RichMarker(html2, point_center,{ | |
| 419 | + "anchor" : new BMap.Size(-10,8), | |
| 420 | + "enableDragging" : true}); | |
| 421 | + | |
| 422 | + | |
| 423 | + myRichMarker1.disableDragging(); | |
| 424 | + mapBValue.addOverlay(myRichMarker1); | |
| 425 | + | |
| 426 | + | |
| 427 | + // 创建标注物 | |
| 428 | + marker = new BMap.Marker(point_center,{icon : icon_target}); | |
| 429 | + | |
| 430 | + // 允许覆盖物在map.clearOverlays方法中被清除。 | |
| 431 | + marker.enableMassClear(); | |
| 432 | + | |
| 433 | + mapBValue.addOverlay(marker); | |
| 434 | + }, | |
| 435 | + | |
| 436 | + // 根据站点坐标匹配库中的公交站点 | |
| 437 | + stationsPointsToLibraryPoint : function(arra,callback) { | |
| 438 | + // 获取长度 | |
| 439 | + var len = arra.length; | |
| 440 | + var station = {}; | |
| 441 | + var stationList = []; | |
| 442 | + (function(){ | |
| 443 | + if (!arguments.callee.count) { | |
| 444 | + arguments.callee.count = 0; | |
| 445 | + } | |
| 446 | + arguments.callee.count++; | |
| 447 | + var index = parseInt(arguments.callee.count) - 1; | |
| 448 | + if (index >= len) { | |
| 449 | + callback && callback(stationList); | |
| 450 | + return ; | |
| 451 | + } | |
| 452 | + var f = arguments.callee; | |
| 453 | + station = arra[index]; | |
| 454 | + if(arra[index].name!=''){ | |
| 455 | + | |
| 456 | + $.get('/station/matchStation',station,function(resultStation) { | |
| 457 | + stationList.push({name:resultStation.name ,wgs:arra[index].wgs,potion:{lng:resultStation.potion_lng, lat:resultStation.potion_lat}, isHave:resultStation.isHave , id:resultStation.id}); | |
| 458 | + f(); | |
| 459 | + }); | |
| 460 | + }else { | |
| 461 | + f(); | |
| 462 | + } | |
| 463 | + })() | |
| 464 | + }, | |
| 465 | + // 地图画多边形 | |
| 466 | + pointsPolygon : function(objStation) { | |
| 467 | + | |
| 468 | + // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 469 | + mapBValue.setZoom(15); | |
| 470 | + | |
| 471 | + // 如果不为空 | |
| 472 | + if(objStation) { | |
| 473 | + | |
| 474 | + // 清除地图覆盖物 | |
| 475 | + mapBValue.clearOverlays(); | |
| 476 | + | |
| 477 | + // 获取中心点坐标字符串 | |
| 478 | + var testpointStr = objStation.stationBJwpoints; | |
| 479 | + | |
| 480 | + // 按空格切割中心点坐标字符串 | |
| 481 | + var BJwpointsPolygon = testpointStr.split(' '); | |
| 482 | + | |
| 483 | + // 中心点坐标 | |
| 484 | + var pointPolygon = new BMap.Point(BJwpointsPolygon[0], BJwpointsPolygon[1]); | |
| 485 | + | |
| 486 | + // 获取多边形坐标字符串 | |
| 487 | + var stationBPolygonGrid = objStation.stationBPolygonGrid; | |
| 488 | + | |
| 489 | + // 截取多边形坐标字符串 | |
| 490 | + var stationBPolygonGridStr = stationBPolygonGrid.substring(9,stationBPolygonGrid.length-2); | |
| 491 | + | |
| 492 | + // 按逗号切割 | |
| 493 | + var pointPolygonArray = stationBPolygonGridStr.split(','); | |
| 494 | + | |
| 495 | + // 多边形坐标集合 | |
| 496 | + var polygonP = []; | |
| 497 | + | |
| 498 | + for(var v = 0;v<pointPolygonArray.length;v++) { | |
| 499 | + | |
| 500 | + polygonP.push(new BMap.Point(pointPolygonArray[v].split(" ")[0],pointPolygonArray[v].split(" ")[1])); | |
| 501 | + | |
| 502 | + } | |
| 503 | + | |
| 504 | + // 画多边形 | |
| 505 | + polygon = new BMap.Polygon(polygonP, { | |
| 506 | + | |
| 507 | + // 线条显色 | |
| 508 | + strokeColor : "blue", | |
| 509 | + | |
| 510 | + // 边线的宽度，以像素为单位。 | |
| 511 | + strokeWeight : 2, | |
| 512 | + | |
| 513 | + // 边线透明度，取值范围0 - 1。 | |
| 514 | + strokeOpacity : 0.5 | |
| 515 | + }); | |
| 516 | + | |
| 517 | + // 增加地图覆盖物多边形 | |
| 518 | + mapBValue.addOverlay(polygon); | |
| 519 | + | |
| 520 | + // 信息窗口属性 | |
| 521 | + var opts_polygon = { | |
| 522 | + | |
| 523 | + // 信息窗口宽度 | |
| 524 | + width : 200, | |
| 525 | + | |
| 526 | + // 信息窗口高度 | |
| 527 | + height : 400, | |
| 528 | + | |
| 529 | + // 信息窗位置偏移值。 | |
| 530 | + offset: new BMap.Size(500,20), | |
| 531 | + | |
| 532 | + //标题 | |
| 533 | + title : '<h4 style="color:#FFFFFF">'+objStation.stationStationName+'站详情</h4>', | |
| 534 | + | |
| 535 | + //设置不允许信窗发送短息 | |
| 536 | + enableMessage : false, | |
| 537 | + | |
| 538 | + //是否开启点击地图关闭信息窗口 | |
| 539 | + enableCloseOnClick : false | |
| 540 | + }; | |
| 541 | + | |
| 542 | + var markTypeStr = ''; | |
| 543 | + | |
| 544 | + if(objStation.stationRouteStationMark=='B') { | |
| 545 | + | |
| 546 | + markTypeStr='起点站'; | |
| 547 | + | |
| 548 | + }else if(objStation.stationRouteStationMark=='Z') { | |
| 549 | + | |
| 550 | + markTypeStr ='中途站'; | |
| 551 | + | |
| 552 | + | |
| 553 | + }else if(objStation.stationRouteStationMark=='E') { | |
| 554 | + | |
| 555 | + markTypeStr='终点站'; | |
| 556 | + | |
| 557 | + } | |
| 558 | + | |
| 559 | + var htm = '<HR style="border:1 dashed #987cb9" width="100%" color=#987cb9 SIZE=1>'+ | |
| 560 | + '<span style="color:#DDD;font-size: 15px;">站点名称：' + objStation.stationStationName + '</span>' + | |
| 561 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">站点编码：' + objStation.stationStationCod + '</span>' + | |
| 562 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">行业编码：' + (objStation.industryCode == null ? "":objStation.industryCode) + '</span>' + | |
| 563 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">站点序号：' + objStation.stationRouteStationRouteCode + '</span>' + | |
| 564 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">站点类型：' + markTypeStr + '</span>' + | |
| 565 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">纬度坐标：' + objStation.stationBJwpoints + '</span>' + | |
| 566 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">到站时间：' + objStation.stationRouteToTime + ' 分钟</span>' + | |
| 567 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">到站距离：' + objStation.stationRouteDistances + ' 公里</span>' + | |
| 568 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">版本号  ：' + objStation.stationRouteVersions + '</span>' + | |
| 569 | + '<span class="help-block" style="width: 100%;font-size: 15px;;color:#DDD;'+ | |
| 570 | + 'overflow: hidden; white-space: nowrap; text-overflow: ellipsis; " title="'+ | |
| 571 | + objStation.stationRouteDescriptions +'" >说明/描述：' + (objStation.stationRouteDescriptions == null ? "":objStation.stationRouteDescriptions)+ '</span>' ; | |
| 572 | + | |
| 573 | + // 创建信息窗口 | |
| 574 | + var infoWindow_target = new BMap.InfoWindow(htm, opts_polygon); | |
| 575 | + // 自定义标注物图片 | |
| 576 | + var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/cz.png',new BMap.Size(20, 20)); | |
| 577 | + | |
| 578 | + // 创建点 | |
| 579 | + marker = new BMap.Marker(pointPolygon,{icon : icon_target}); | |
| 580 | + | |
| 581 | + // 把标注添物加到地图上 | |
| 582 | + mapBValue.addOverlay(marker); | |
| 583 | + | |
| 584 | + // 是否在平移过程中禁止动画。（自1.2新增） | |
| 585 | + var PanOptions_ ={noAnimation :true}; | |
| 586 | + | |
| 587 | + // 将地图的中心点更改为给定的点。 | |
| 588 | + mapBValue.panTo(pointPolygon,PanOptions_); | |
| 589 | + | |
| 590 | + // 将地图在水平位置上移动x像素，垂直位置上移动y像素。 | |
| 591 | + mapBValue.panBy(10,-150,PanOptions_); | |
| 592 | + | |
| 593 | + //开启信息窗口 | |
| 594 | + mapBValue.openInfoWindow(infoWindow_target,pointPolygon); | |
| 595 | + | |
| 596 | + } | |
| 597 | + | |
| 598 | + }, | |
| 599 | + | |
| 600 | + // 画圆 | |
| 601 | + pointsCircle : function(objStation) { | |
| 602 | + | |
| 603 | + // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 604 | + mapBValue.setZoom(16); | |
| 605 | + | |
| 606 | + if(objStation) { | |
| 607 | + | |
| 608 | + // 清除地图覆盖物 | |
| 609 | + mapBValue.clearOverlays(); | |
| 610 | + | |
| 611 | + // 获取中心坐标点字符串分割 | |
| 612 | + var BJwpoints = objStation.stationBJwpoints.split(' '); | |
| 613 | + | |
| 614 | + // 中心坐标点 | |
| 615 | + var point = new BMap.Point(BJwpoints[0], BJwpoints[1]); | |
| 616 | + | |
| 617 | + //创建圆 | |
| 618 | + circle = new BMap.Circle(point,objStation.stationRadius,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); | |
| 619 | + | |
| 620 | + // 允许覆盖物在map.clearOverlays方法中被清除 | |
| 621 | + circle.enableMassClear(); | |
| 622 | + | |
| 623 | + // 百度地图添加覆盖物圆 | |
| 624 | + mapBValue.addOverlay(circle); | |
| 625 | + | |
| 626 | + // 信息窗口参数属性 | |
| 627 | + var opts = { | |
| 628 | + | |
| 629 | + // 信息窗口宽度 | |
| 630 | + width : 200, | |
| 631 | + | |
| 632 | + // 信息窗口高度 | |
| 633 | + height : 450, | |
| 634 | + | |
| 635 | + // 信息窗位置偏移值。 | |
| 636 | + offset: new BMap.Size(500,120), | |
| 637 | + | |
| 638 | + //标题 | |
| 639 | + title : '<h4 style="color:#FFFFFF">'+objStation.stationStationName+'站详情</h4>', | |
| 640 | + | |
| 641 | + //设置不允许信窗发送短息 | |
| 642 | + enableMessage : false, | |
| 643 | + | |
| 644 | + //是否开启点击地图关闭信息窗口 | |
| 645 | + enableCloseOnClick : false, | |
| 646 | + | |
| 647 | + // 是否开启信息窗口打开时地图自动移动（默认开启）。(自 1.1 新增) | |
| 648 | + enableAutoPan:false | |
| 649 | + }; | |
| 650 | + | |
| 651 | + var markTypeStr = ''; | |
| 652 | + | |
| 653 | + if(objStation.stationRouteStationMark=='B') { | |
| 654 | + | |
| 655 | + markTypeStr='起点站'; | |
| 656 | + | |
| 657 | + }else if(objStation.stationRouteStationMark=='Z') { | |
| 658 | + | |
| 659 | + markTypeStr ='中途站'; | |
| 660 | + | |
| 661 | + | |
| 662 | + }else if(objStation.stationRouteStationMark=='E') { | |
| 663 | + | |
| 664 | + markTypeStr='终点站'; | |
| 665 | + | |
| 666 | + } | |
| 667 | + | |
| 668 | + var htm = '<HR style="border:1 dashed #987cb9" width="100%" color=#987cb9 SIZE=1>'+ | |
| 669 | + '<span style="color:#DDD;font-size: 15px;">站点名称：' + objStation.stationStationName + '</span>' + | |
| 670 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">站点编码：' + objStation.stationStationCod + '</span>' + | |
| 671 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">行业编码：' + (objStation.industryCode == null ? "":objStation.industryCode)+ '</span>' + | |
| 672 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">站点序号：' + objStation.stationRouteStationRouteCode + '</span>' + | |
| 673 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">站点类型：' + markTypeStr + '</span>' + | |
| 674 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">纬度坐标：' + objStation.stationBJwpoints + '</span>' + | |
| 675 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">到站时间：' + objStation.stationRouteToTime + ' 分钟</span>' + | |
| 676 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">到站距离：' + objStation.stationRouteDistances + ' 公里</span>' + | |
| 677 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">范围半径：' + objStation.stationRadius + '</span>' + | |
| 678 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">版本号  ：' + objStation.stationRouteVersions + '</span>' + | |
| 679 | + '<span class="help-block" style="width: 100%;font-size: 15px;;color:#DDD;'+ | |
| 680 | + 'overflow: hidden; white-space: nowrap; text-overflow: ellipsis; " title="'+ | |
| 681 | + objStation.stationRouteDescriptions +'" >说明/描述：' + (objStation.stationRouteDescriptions == null ? "":objStation.stationRouteDescriptions) + '</span>' ; | |
| 682 | + | |
| 683 | + // 创建信息窗口 | |
| 684 | + var infoWindow_target = new BMap.InfoWindow(htm, opts); | |
| 685 | + // 自定义标注物图片 | |
| 686 | + var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/cz.png',new BMap.Size(20, 20)); | |
| 687 | + | |
| 688 | + // 创建点 | |
| 689 | + marker = new BMap.Marker(point,{icon : icon_target}); | |
| 690 | + | |
| 691 | + // 把标注添物加到地图上 | |
| 692 | + mapBValue.addOverlay(marker); | |
| 693 | + | |
| 694 | + setTimeout(function(){ | |
| 695 | + //开启信息窗口 | |
| 696 | + marker.openInfoWindow(infoWindow_target,point); | |
| 697 | + | |
| 698 | + },100); | |
| 699 | + | |
| 700 | + // 是否在平移过程中禁止动画。（自1.2新增） | |
| 701 | + var PanOptions_ ={noAnimation :true}; | |
| 702 | + | |
| 703 | + // 将地图的中心点更改为给定的点。 | |
| 704 | + mapBValue.panTo(point,PanOptions_); | |
| 705 | + | |
| 706 | + mapBValue.panBy(10,-200,PanOptions_); | |
| 707 | + | |
| 708 | + // 添加标志物监听事件 | |
| 709 | + marker.addEventListener("click",function() { | |
| 710 | + | |
| 711 | + //开启信息窗口 | |
| 712 | + marker.openInfoWindow(infoWindow_target,point); | |
| 713 | + | |
| 714 | + }); | |
| 715 | + | |
| 716 | + } | |
| 717 | + | |
| 718 | + }, | |
| 719 | + // 编辑图形 | |
| 720 | + editShapes : function(objStation) { | |
| 721 | + | |
| 722 | + // 清空地图 | |
| 723 | + WorldsBMapLine.clearMarkAndOverlays(); | |
| 724 | + | |
| 725 | + // 站点对象不为空 | |
| 726 | + if(objStation) { | |
| 727 | + var stationShapesType = objStation.stationShapesType; | |
| 728 | + | |
| 729 | + // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 730 | + mapBValue.setZoom(16); | |
| 731 | + | |
| 732 | + // 编辑圆 | |
| 733 | + if(stationShapesType =='r') { | |
| 734 | + | |
| 735 | + // 获取中心坐标点字符串分割 | |
| 736 | + var BJwpoints = objStation.stationBJwpoints.split(' '); | |
| 737 | + | |
| 738 | + // 中心坐标点 | |
| 739 | + var point = new BMap.Point(BJwpoints[0], BJwpoints[1]); | |
| 740 | + | |
| 741 | + //创建圆 | |
| 742 | + circle = new BMap.Circle(point,objStation.stationRadius,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); | |
| 743 | + | |
| 744 | + // 允许覆盖物在map.clearOverlays方法中被清除 | |
| 745 | + circle.enableMassClear(); | |
| 746 | + | |
| 747 | + // 百度地图添加覆盖物圆 | |
| 748 | + mapBValue.addOverlay(circle); | |
| 749 | + | |
| 750 | + // 开启编辑功能 | |
| 751 | + circle.enableEditing(); | |
| 752 | + | |
| 753 | + // 是否在平移过程中禁止动画。（自1.2新增） | |
| 754 | + var PanOptions_ ={noAnimation :true}; | |
| 755 | + | |
| 756 | + // 将地图的中心点更改为给定的点。 | |
| 757 | + mapBValue.panTo(point,PanOptions_); | |
| 758 | + | |
| 759 | + mapBValue.panBy(10,-200,PanOptions_); | |
| 760 | + | |
| 761 | + // 编辑圆监听事件 | |
| 762 | + circle.addEventListener('dblclick',function() { | |
| 763 | + | |
| 764 | + // 返回圆形的半径，单位为米。 | |
| 765 | + var newRadius = circle.getRadius(); | |
| 766 | + | |
| 767 | + // 返回圆形的中心点坐标。 | |
| 768 | + var newCenter = circle.getCenter().lng + ' ' + circle.getCenter().lat; | |
| 769 | + | |
| 770 | + /** 设置修改站点集合对象站点中心点百度坐标属性值 @param：<bJwpoints：中心点百度坐标） */ | |
| 771 | + objStation.stationBJwpoints = newCenter; | |
| 772 | + | |
| 773 | + /** 设置修改站点集合对象范围图形类型属性值 @param：<shapesType：范围图形类型） */ | |
| 774 | +// objStation.stationBJwpoints = 'r'; | |
| 775 | + | |
| 776 | + /** 设置修改站点集合对象圆形半径属性值 @param：<radius：圆形半径） */ | |
| 777 | + objStation.stationRadius = Math.round(newRadius); | |
| 778 | + | |
| 779 | + /** 设置修改站点集合对象图形百度坐标集合属性值 @param：<bPolygonGrid：图形百度坐标集合） */ | |
| 780 | + objStation.stationBPolygonGrid = ''; | |
| 781 | + | |
| 782 | + // 加载编辑页面 | |
| 783 | + $.get('editstation.html', function(m){ | |
| 784 | + | |
| 785 | + $(pjaxContainer).append(m); | |
| 786 | + | |
| 787 | + $('#edit_station_mobal').trigger('editSelectMobal_show', [WorldsBMapLine,MapGetAjaxData,PublicFunctions,objStation]); | |
| 788 | + | |
| 789 | + }); | |
| 790 | + | |
| 791 | + // 打开按钮事件 | |
| 792 | + PublicFunctions.editAChangeCssRemoveDisabled(); | |
| 793 | + }); | |
| 794 | + | |
| 795 | + // 编辑多边行 | |
| 796 | + }else if(stationShapesType =='d') { | |
| 797 | + | |
| 798 | + // 清除地图覆盖物 | |
| 799 | + mapBValue.clearOverlays(); | |
| 800 | + | |
| 801 | + // 获取中心点坐标字符串 | |
| 802 | + var testpointStr = objStation.stationBJwpoints; | |
| 803 | + | |
| 804 | + // 按空格切割中心点坐标字符串 | |
| 805 | + var BJwpointsPolygon = testpointStr.split(' '); | |
| 806 | + | |
| 807 | + // 中心点坐标 | |
| 808 | + var pointPolygon = new BMap.Point(BJwpointsPolygon[0], BJwpointsPolygon[1]); | |
| 809 | + | |
| 810 | + // 获取多边形坐标字符串 | |
| 811 | + var stationBPolygonGrid = objStation.stationBPolygonGrid; | |
| 812 | + | |
| 813 | + // 截取多边形坐标字符串 | |
| 814 | + var stationBPolygonGridStr = stationBPolygonGrid.substring(9,stationBPolygonGrid.length-2); | |
| 815 | + | |
| 816 | + // 按逗号切割 | |
| 817 | + var pointPolygonArray = stationBPolygonGridStr.split(','); | |
| 818 | + | |
| 819 | + // 多边形坐标集合 | |
| 820 | + var polygonP = []; | |
| 821 | + | |
| 822 | + for(var v = 0;v<pointPolygonArray.length;v++) { | |
| 823 | + | |
| 824 | + polygonP.push(new BMap.Point(pointPolygonArray[v].split(" ")[0],pointPolygonArray[v].split(" ")[1])); | |
| 825 | + | |
| 826 | + } | |
| 827 | + | |
| 828 | + // 画多边形 | |
| 829 | + polygon = new BMap.Polygon(polygonP, { | |
| 830 | + | |
| 831 | + // 线条显色 | |
| 832 | + strokeColor : "blue", | |
| 833 | + | |
| 834 | + // 边线的宽度，以像素为单位。 | |
| 835 | + strokeWeight : 2, | |
| 836 | + | |
| 837 | + // 边线透明度，取值范围0 - 1。 | |
| 838 | + strokeOpacity : 0.5 | |
| 839 | + }); | |
| 840 | + | |
| 841 | + // 增加地图覆盖物多边形 | |
| 842 | + mapBValue.addOverlay(polygon); | |
| 843 | + | |
| 844 | + // 开启编辑功能(自 1.1 新增) | |
| 845 | + polygon.enableEditing(); | |
| 846 | + | |
| 847 | + // 是否在平移过程中禁止动画。（自1.2新增） | |
| 848 | + var PanOptions_ ={noAnimation :true}; | |
| 849 | + | |
| 850 | + // 将地图的中心点更改为给定的点。 | |
| 851 | + mapBValue.panTo(pointPolygon,PanOptions_); | |
| 852 | + | |
| 853 | + // 将地图在水平位置上移动x像素，垂直位置上移动y像素。 | |
| 854 | + mapBValue.panBy(10,-150,PanOptions_); | |
| 855 | + | |
| 856 | + // 添加多变行编辑事件 | |
| 857 | + polygon.addEventListener('dblclick',function(e) { | |
| 858 | + | |
| 859 | + // 获取编辑的多边形对象 | |
| 860 | + var edit_pointE = polygon; | |
| 861 | + | |
| 862 | + var edit_bPloygonGrid = ""; | |
| 863 | + | |
| 864 | + var editPolyGonLen_ = edit_pointE.getPath().length; | |
| 865 | + | |
| 866 | + for(var k =0;k<editPolyGonLen_;k++) { | |
| 867 | + | |
| 868 | + if(k==0) { | |
| 869 | + | |
| 870 | + edit_bPloygonGrid = edit_pointE.getPath()[k].lng + ' ' + edit_pointE.getPath()[k].lat; | |
| 871 | + | |
| 872 | + }else { | |
| 873 | + | |
| 874 | + edit_bPloygonGrid = edit_bPloygonGrid + ',' + edit_pointE.getPath()[k].lng + ' ' + edit_pointE.getPath()[k].lat; | |
| 875 | + | |
| 876 | + } | |
| 877 | + | |
| 878 | + } | |
| 879 | + | |
| 880 | + edit_bPloygonGrid = edit_bPloygonGrid + ',' + edit_pointE.getPath()[0].lng + ' ' + edit_pointE.getPath()[0].lat; | |
| 881 | + | |
| 882 | + // 多边形中心点 | |
| 883 | + var centre_points = edit_pointE.getBounds().getCenter().lng + ' ' + edit_pointE.getBounds().getCenter().lat; | |
| 884 | + | |
| 885 | + /** 设置修改站点集合对象站点中心点百度坐标属性值 @param：<bJwpoints：中心点百度坐标） */ | |
| 886 | + objStation.stationBJwpoints = centre_points; | |
| 887 | + | |
| 888 | + /** 设置修改站点集合对象范围图形类型属性值 @param：<shapesType：范围图形类型） */ | |
| 889 | + objStation.stationShapesType = 'd';; | |
| 890 | + | |
| 891 | + /** 设置修改站点集合对象圆形半径属性值 @param：<radius：圆形半径） */ | |
| 892 | + objStation.stationRadius = ''; | |
| 893 | + | |
| 894 | + /** 设置修改站点集合对象图形百度坐标集合属性值 @param：<bPolygonGrid：图形百度坐标集合） */ | |
| 895 | + objStation.stationBPolygonGrid = edit_bPloygonGrid; | |
| 896 | + | |
| 897 | + $.get('editstation.html', function(m){ | |
| 898 | + | |
| 899 | + $(pjaxContainer).append(m); | |
| 900 | + | |
| 901 | + $('#edit_station_mobal').trigger('editSelectMobal_show', [WorldsBMapLine,MapGetAjaxData,PublicFunctions,objStation]); | |
| 902 | + | |
| 903 | + }); | |
| 904 | + | |
| 905 | + // 打开按钮事件 | |
| 906 | + PublicFunctions.editAChangeCssRemoveDisabled(); | |
| 907 | + }); | |
| 908 | + | |
| 909 | + } | |
| 910 | + } | |
| 911 | + }, | |
| 912 | + | |
| 913 | + localtionPoint : function(stationNameV) { | |
| 914 | + | |
| 915 | + WorldsBMapLine.localSearchFromAdreesToPoint(stationNameV,function(Points) { | |
| 916 | + | |
| 917 | + if(Points) { | |
| 918 | + | |
| 919 | + var BJwpointsArray = Points.split(' '); | |
| 920 | + | |
| 921 | + var stationNameChangePoint = new BMap.Point(BJwpointsArray[0], BJwpointsArray[1]); | |
| 922 | + | |
| 923 | + var marker_stargt2 = new BMap.Marker(stationNameChangePoint); | |
| 924 | + | |
| 925 | + var PanOptions ={noAnimation :true}; | |
| 926 | + | |
| 927 | + mapBValue.panTo(stationNameChangePoint,PanOptions); | |
| 928 | + | |
| 929 | + mapBValue.panBy(0,-100); | |
| 930 | + | |
| 931 | + // 将标注添加到地图中 | |
| 932 | + mapBValue.addOverlay(marker_stargt2); | |
| 933 | + | |
| 934 | + //跳动的动画 | |
| 935 | + marker_stargt2.setAnimation(BMAP_ANIMATION_BOUNCE); | |
| 936 | + | |
| 937 | + } | |
| 938 | + | |
| 939 | + }); | |
| 940 | + | |
| 941 | + }, | |
| 942 | + | |
| 943 | + // 根据地理名称获取百度经纬度坐标 | |
| 944 | + localSearchFromAdreesToPoint: function(Address,callback) { | |
| 945 | + | |
| 946 | + // 创建一个搜索类实例 | |
| 947 | + var localSearch = new BMap.LocalSearch(mapBValue); | |
| 948 | + | |
| 949 | + // 检索完成后的回调函数。 | |
| 950 | + localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 951 | + | |
| 952 | + var resultPoints = ''; | |
| 953 | + | |
| 954 | + if(searchResult) { | |
| 955 | + | |
| 956 | + // 返回索引指定的结果。索引0表示第1条结果 | |
| 957 | + var poi = searchResult.getPoi(0); | |
| 958 | + | |
| 959 | + if(poi) { | |
| 960 | + | |
| 961 | + //获取经度和纬度 | |
| 962 | + resultPoints = poi.point.lng + ' ' + poi.point.lat; | |
| 963 | + | |
| 964 | + callback && callback(resultPoints); | |
| 965 | + | |
| 966 | + }else { | |
| 967 | + | |
| 968 | + callback && callback(false); | |
| 969 | + | |
| 970 | + } | |
| 971 | + | |
| 972 | + }else { | |
| 973 | + | |
| 974 | + callback && callback(false); | |
| 975 | + } | |
| 976 | + | |
| 977 | + }); | |
| 978 | + | |
| 979 | + // 根据检索词发起检索。 | |
| 980 | + localSearch.search(Address); | |
| 981 | + | |
| 982 | + }, | |
| 983 | + | |
| 984 | + clearMarkAndOverlays : function() { | |
| 985 | + | |
| 986 | + // 清楚地图覆盖物 | |
| 987 | + mapBValue.clearOverlays(); | |
| 988 | + | |
| 989 | + mapBValue.removeOverlay(); | |
| 990 | + | |
| 991 | + } | |
| 992 | + | |
| 993 | + } | |
| 994 | + | |
| 995 | + return Bmap; | |
| 996 | + | |
| 997 | 997 | }(); |
| 998 | 998 | \ No newline at end of file | ... | ... |
src/main/resources/static/pages/base/roadspeed/js/add-vmap-world.js
| 1 | -var SectionVmapWorlds = function() { | |
| 2 | - var mapB = '', drawingManager = ''; | |
| 3 | - var Bmap = { | |
| 4 | - init : function() { | |
| 5 | - var CENTER_POINT = {lng : 121.528733,lat : 31.237425};// 设置中心点. | |
| 6 | - var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT';// 百度API Key | |
| 7 | - mapB = new BMap.Map("roadBmap_basic");// 初始化百度地图 | |
| 8 | - mapB.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat), 15);//中心点和缩放级别 | |
| 9 | - mapB.enableDragging(); //启用地图拖拽事件，默认启用(可不写) | |
| 10 | - mapB.enableScrollWheelZoom(); //启用地图滚轮放大缩小 | |
| 11 | - mapB.disableDoubleClickZoom();//禁用鼠标双击放大 | |
| 12 | - mapB.enableKeyboard();//启用键盘上下左右键移动地图 | |
| 13 | - var styleOptions = { | |
| 14 | - strokeColor : "blue",//边线颜色。 | |
| 15 | - fillColor : "blue",//填充颜色。当参数为空时，圆形将没有填充效果。 | |
| 16 | - strokeWeight : 3,//边线的宽度，以像素为单位。 | |
| 17 | - strokeOpacity : 0.8,//边线的宽度，以像素为单位。 | |
| 18 | - fillOpacity : 0.6,//填充的透明度，取值范围0 - 1。 | |
| 19 | - strokeStyle : 'solid' //边线的样式，solid或dashed。 | |
| 20 | - }; | |
| 21 | - // 创建鼠标绘制管理类 | |
| 22 | - drawingManager = new BMapLib.DrawingManager(mapB, { | |
| 23 | - isOpen : false,//是否开启绘制模式 | |
| 24 | - enableDrawingTool : false,//是否显示工具栏 | |
| 25 | - drawingToolOptions : { | |
| 26 | - anchor : BMAP_ANCHOR_TOP_RIGHT,//位置 | |
| 27 | - offset : new BMap.Size(5, 5),//偏离值 | |
| 28 | - scale : 0.8//工具栏缩放比例 | |
| 29 | - | |
| 30 | - }, | |
| 31 | - polylineOptions : styleOptions//线的样式 | |
| 32 | - }); | |
| 33 | - // 添加绘画完成事件 | |
| 34 | - drawingManager.addEventListener('polylinecomplete', function(e) { | |
| 35 | - drawingManager.close(); | |
| 36 | - var editPloyLineArray = e.getPath();// 获取折线坐标集合 | |
| 37 | - $('#bRoadVectorInput').val(JSON.stringify(editPloyLineArray)); | |
| 38 | - }); | |
| 39 | - return mapB; | |
| 40 | - }, | |
| 41 | - // 根据地理名称获取百度经纬度坐标进行定位. | |
| 42 | - localSearchFromAdreesToPoint: function(Address) { | |
| 43 | - // 创建一个搜索类实例 | |
| 44 | - var localSearch = new BMap.LocalSearch(mapB); | |
| 45 | - // 检索完成后的回调函数。 | |
| 46 | - localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 47 | - var resultPoints = ''; | |
| 48 | - if(searchResult) { | |
| 49 | - // 返回索引指定的结果。索引0表示第1条结果 | |
| 50 | - var poi = searchResult.getPoi(0); | |
| 51 | - if(poi) { | |
| 52 | - //获取经度和纬度 | |
| 53 | - var stationNameChangePoint = new BMap.Point( poi.point.lng, poi.point.lat); | |
| 54 | - marker = new BMap.Marker(stationNameChangePoint); | |
| 55 | - var PanOptions ={noAnimation :true}; | |
| 56 | - mapB.panTo(stationNameChangePoint,PanOptions); | |
| 57 | - // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 58 | - mapB.setZoom(16); | |
| 59 | - mapB.panBy(-300,-50); | |
| 60 | - // 将标注添加到地图中 | |
| 61 | - mapB.addOverlay(marker); | |
| 62 | - //跳动的动画 | |
| 63 | - marker.setAnimation(BMAP_ANIMATION_BOUNCE); | |
| 64 | - }else { | |
| 65 | - // 弹出添加成功提示消息 | |
| 66 | - layer.msg('无法获取【'+Address+'】地理位置！'); | |
| 67 | - } | |
| 68 | - }else { | |
| 69 | - // 弹出添加成功提示消息 | |
| 70 | - layer.msg('无法获取【'+Address+'】地理位置！'); | |
| 71 | - } | |
| 72 | - }); | |
| 73 | - // 根据检索词发起检索。 | |
| 74 | - localSearch.search(Address); | |
| 75 | - }, | |
| 76 | - // 根据名称获取坐标. | |
| 77 | - stationsNameToPoints : function(arra,callback) { | |
| 78 | - // 获取长度 | |
| 79 | - var len = arra.length; | |
| 80 | - var stationList = []; | |
| 81 | - (function(){ | |
| 82 | - if (!arguments.callee.count) { | |
| 83 | - arguments.callee.count = 0; | |
| 84 | - } | |
| 85 | - arguments.callee.count++; | |
| 86 | - var index = parseInt(arguments.callee.count) - 1; | |
| 87 | - if (index >= len) { | |
| 88 | - callback && callback(stationList); | |
| 89 | - return; | |
| 90 | - } | |
| 91 | - var f = arguments.callee; | |
| 92 | - if(arra[index]!=''){ | |
| 93 | - var localSearch = new BMap.LocalSearch(mapB); | |
| 94 | - localSearch.search(arra[index]); | |
| 95 | - localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 96 | - var poi = searchResult.getPoi(0); | |
| 97 | - if(poi) { | |
| 98 | - stationList.push({name:arra[index],potion:{lng:poi.point.lng,lat:poi.point.lat}}); | |
| 99 | - f(); | |
| 100 | - } | |
| 101 | - }); | |
| 102 | - }else { | |
| 103 | - f(); | |
| 104 | - } | |
| 105 | - })(); | |
| 106 | - }, | |
| 107 | - /** 获取距离与时间 @param <points：坐标点集合> */ | |
| 108 | - getDistanceAndDuration : function(points,callback){ | |
| 109 | - // 获取长度 | |
| 110 | - var len = points.length; | |
| 111 | - (function(){ | |
| 112 | - if (!arguments.callee.count) { | |
| 113 | - arguments.callee.count = 0; | |
| 114 | - } | |
| 115 | - arguments.callee.count++; | |
| 116 | - var index = parseInt(arguments.callee.count) - 1; | |
| 117 | - if (index >= len-1) { | |
| 118 | - callback && callback(points); | |
| 119 | - return; | |
| 120 | - } | |
| 121 | - // 当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。(当前正在执行的函数。) | |
| 122 | - var f = arguments.callee; | |
| 123 | - // 起点坐标 <坐标格式：40.056878,116.30815> | |
| 124 | - var origin = points[index].potion.lat + ',' + points[index].potion.lng; | |
| 125 | - // 终点坐标 <坐标格式：40.056878,116.30815> | |
| 126 | - var destination = points[index+1].potion.lat + ',' + points[index+1].potion.lng; | |
| 127 | - var region = '上海'; | |
| 128 | - var origin_region = '上海'; | |
| 129 | - var destination_region = '上海'; | |
| 130 | - var output = 'json'; | |
| 131 | - var ak_My = 'wjlITmXeCek5MxyU3ZUBkTeU8B0o0npk'; | |
| 132 | - /** | |
| 133 | - * @param :< origin：起点名称或经纬度；destination：终点名称或经纬度；origin_region：起始点所在城市，驾车导航时必填。 | |
| 134 | - * | |
| 135 | - * destination_region：终点所在城市，驾车导航时必填。output :表示输出类型，可设置为xml或json，默认为xml。> | |
| 136 | - * | |
| 137 | - * @returns :r <jsonp格式> | |
| 138 | - **/ | |
| 139 | - var paramsB = {origin:origin,destination:destination,region:region,origin_region:origin_region,destination_region:destination_region,output:output,ak:ak_My}; | |
| 140 | - /** @description :未认证开发者默认配额为：2000次/天。 */ | |
| 141 | - $.ajax({ | |
| 142 | - // 百度地图根据坐标获取两点之间的时间与距离 | |
| 143 | - url: 'http://api.map.baidu.com/direction/v1?mode=transit', | |
| 144 | - data: paramsB, | |
| 145 | - dataType: 'jsonp', | |
| 146 | - success: function(r){ | |
| 147 | - if(r) { | |
| 148 | - if(r.message=='ok') { | |
| 149 | - // 获取距离(单位：米) | |
| 150 | - points[index+1].distance = r.result.taxi.distance; | |
| 151 | - // 获取时间(单位：秒) | |
| 152 | - points[index+1].duration = r.result.taxi.duration; | |
| 153 | - } | |
| 154 | - } | |
| 155 | - f(); | |
| 156 | - } | |
| 157 | - }); | |
| 158 | - })(); | |
| 159 | - }, | |
| 160 | - // 获取路段几何图形坐标集合. | |
| 161 | - getSectionListPlonly : function(stationsPoint,cb) { | |
| 162 | - var len = stationsPoint.length; | |
| 163 | - var sectionList = []; | |
| 164 | - (function(){ | |
| 165 | - if (!arguments.callee.count) { | |
| 166 | - arguments.callee.count = 0; | |
| 167 | - } | |
| 168 | - arguments.callee.count++; | |
| 169 | - var index = parseInt(arguments.callee.count) - 1; | |
| 170 | - if (index >= len-1 ) { | |
| 171 | - cb && cb(sectionList); | |
| 172 | - return; | |
| 173 | - } | |
| 174 | - var f = arguments.callee; | |
| 175 | - var poiOne = new BMap.Point(stationsPoint[index].potion.lng,stationsPoint[index].potion.lat); | |
| 176 | - var poiTwo = new BMap.Point(stationsPoint[index+1].potion.lng,stationsPoint[index+1].potion.lat); | |
| 177 | - var transit = new BMap.DrivingRoute(mapB, {renderOptions: {map: mapB,enableDragging : true},onPolylinesSet: searchPolylinesSet}); | |
| 178 | - function searchPolylinesSet(results){ | |
| 179 | - if (transit.getStatus() != BMAP_STATUS_SUCCESS){ | |
| 180 | - }else { | |
| 181 | - var sectionArrayList = []; | |
| 182 | - for (i = 0; i < results.length; i++){ | |
| 183 | - sectionArrayList = sectionArrayList.concat(results[i].getPolyline().getPath()); | |
| 184 | - } | |
| 185 | - sectionList = sectionArrayList; | |
| 186 | - } | |
| 187 | - f(); | |
| 188 | - } | |
| 189 | - transit.search(poiOne,poiTwo); | |
| 190 | - })(); | |
| 191 | - }, | |
| 192 | - // 清楚地图覆盖物 | |
| 193 | - clearMarkAndOverlays : function() { | |
| 194 | - mapB.clearOverlays(); | |
| 195 | - }, | |
| 196 | - // 关闭绘画工具. | |
| 197 | - drawingManagerClose : function() { | |
| 198 | - drawingManager.close(); | |
| 199 | - }, | |
| 200 | - // 打开绘画工具. | |
| 201 | - drawingManagerOpen : function() { | |
| 202 | - drawingManager.open();// 打开鼠标绘画工具. | |
| 203 | - drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE);// 设置属性. | |
| 204 | - } | |
| 205 | - } | |
| 206 | - | |
| 207 | - return Bmap; | |
| 208 | - | |
| 1 | +var SectionVmapWorlds = function() { | |
| 2 | + var mapB = '', drawingManager = ''; | |
| 3 | + var Bmap = { | |
| 4 | + init : function() { | |
| 5 | + var CENTER_POINT = {lng : 121.528733,lat : 31.237425};// 设置中心点. | |
| 6 | + var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT';// 百度API Key | |
| 7 | + mapB = new BMap.Map("roadBmap_basic");// 初始化百度地图 | |
| 8 | + mapB.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat), 15);//中心点和缩放级别 | |
| 9 | + mapB.enableDragging(); //启用地图拖拽事件，默认启用(可不写) | |
| 10 | + mapB.enableScrollWheelZoom(); //启用地图滚轮放大缩小 | |
| 11 | + mapB.disableDoubleClickZoom();//禁用鼠标双击放大 | |
| 12 | + mapB.enableKeyboard();//启用键盘上下左右键移动地图 | |
| 13 | + var styleOptions = { | |
| 14 | + strokeColor : "blue",//边线颜色。 | |
| 15 | + fillColor : "blue",//填充颜色。当参数为空时，圆形将没有填充效果。 | |
| 16 | + strokeWeight : 3,//边线的宽度，以像素为单位。 | |
| 17 | + strokeOpacity : 0.8,//边线的宽度，以像素为单位。 | |
| 18 | + fillOpacity : 0.6,//填充的透明度，取值范围0 - 1。 | |
| 19 | + strokeStyle : 'solid' //边线的样式，solid或dashed。 | |
| 20 | + }; | |
| 21 | + // 创建鼠标绘制管理类 | |
| 22 | + drawingManager = new BMapLib.DrawingManager(mapB, { | |
| 23 | + isOpen : false,//是否开启绘制模式 | |
| 24 | + enableDrawingTool : false,//是否显示工具栏 | |
| 25 | + drawingToolOptions : { | |
| 26 | + anchor : BMAP_ANCHOR_TOP_RIGHT,//位置 | |
| 27 | + offset : new BMap.Size(5, 5),//偏离值 | |
| 28 | + scale : 0.8//工具栏缩放比例 | |
| 29 | + | |
| 30 | + }, | |
| 31 | + polylineOptions : styleOptions//线的样式 | |
| 32 | + }); | |
| 33 | + // 添加绘画完成事件 | |
| 34 | + drawingManager.addEventListener('polylinecomplete', function(e) { | |
| 35 | + drawingManager.close(); | |
| 36 | + var editPloyLineArray = e.getPath();// 获取折线坐标集合 | |
| 37 | + $('#bRoadVectorInput').val(JSON.stringify(editPloyLineArray)); | |
| 38 | + }); | |
| 39 | + return mapB; | |
| 40 | + }, | |
| 41 | + // 根据地理名称获取百度经纬度坐标进行定位. | |
| 42 | + localSearchFromAdreesToPoint: function(Address) { | |
| 43 | + // 创建一个搜索类实例 | |
| 44 | + var localSearch = new BMap.LocalSearch(mapB); | |
| 45 | + // 检索完成后的回调函数。 | |
| 46 | + localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 47 | + var resultPoints = ''; | |
| 48 | + if(searchResult) { | |
| 49 | + // 返回索引指定的结果。索引0表示第1条结果 | |
| 50 | + var poi = searchResult.getPoi(0); | |
| 51 | + if(poi) { | |
| 52 | + //获取经度和纬度 | |
| 53 | + var stationNameChangePoint = new BMap.Point( poi.point.lng, poi.point.lat); | |
| 54 | + marker = new BMap.Marker(stationNameChangePoint); | |
| 55 | + var PanOptions ={noAnimation :true}; | |
| 56 | + mapB.panTo(stationNameChangePoint,PanOptions); | |
| 57 | + // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 58 | + mapB.setZoom(16); | |
| 59 | + mapB.panBy(-300,-50); | |
| 60 | + // 将标注添加到地图中 | |
| 61 | + mapB.addOverlay(marker); | |
| 62 | + //跳动的动画 | |
| 63 | + marker.setAnimation(BMAP_ANIMATION_BOUNCE); | |
| 64 | + }else { | |
| 65 | + // 弹出添加成功提示消息 | |
| 66 | + layer.msg('无法获取【'+Address+'】地理位置！'); | |
| 67 | + } | |
| 68 | + }else { | |
| 69 | + // 弹出添加成功提示消息 | |
| 70 | + layer.msg('无法获取【'+Address+'】地理位置！'); | |
| 71 | + } | |
| 72 | + }); | |
| 73 | + // 根据检索词发起检索。 | |
| 74 | + localSearch.search(Address); | |
| 75 | + }, | |
| 76 | + // 根据名称获取坐标. | |
| 77 | + stationsNameToPoints : function(arra,callback) { | |
| 78 | + // 获取长度 | |
| 79 | + var len = arra.length; | |
| 80 | + var stationList = []; | |
| 81 | + (function(){ | |
| 82 | + if (!arguments.callee.count) { | |
| 83 | + arguments.callee.count = 0; | |
| 84 | + } | |
| 85 | + arguments.callee.count++; | |
| 86 | + var index = parseInt(arguments.callee.count) - 1; | |
| 87 | + if (index >= len) { | |
| 88 | + callback && callback(stationList); | |
| 89 | + return; | |
| 90 | + } | |
| 91 | + var f = arguments.callee; | |
| 92 | + if(arra[index]!=''){ | |
| 93 | + var localSearch = new BMap.LocalSearch(mapB); | |
| 94 | + localSearch.search(arra[index]); | |
| 95 | + localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 96 | + var poi = searchResult.getPoi(0); | |
| 97 | + if(poi) { | |
| 98 | + stationList.push({name:arra[index],potion:{lng:poi.point.lng,lat:poi.point.lat}}); | |
| 99 | + f(); | |
| 100 | + } | |
| 101 | + }); | |
| 102 | + }else { | |
| 103 | + f(); | |
| 104 | + } | |
| 105 | + })(); | |
| 106 | + }, | |
| 107 | + /** 获取距离与时间 @param <points：坐标点集合> */ | |
| 108 | + getDistanceAndDuration : function(points,callback){ | |
| 109 | + // 获取长度 | |
| 110 | + var len = points.length; | |
| 111 | + (function(){ | |
| 112 | + if (!arguments.callee.count) { | |
| 113 | + arguments.callee.count = 0; | |
| 114 | + } | |
| 115 | + arguments.callee.count++; | |
| 116 | + var index = parseInt(arguments.callee.count) - 1; | |
| 117 | + if (index >= len-1) { | |
| 118 | + callback && callback(points); | |
| 119 | + return; | |
| 120 | + } | |
| 121 | + // 当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。(当前正在执行的函数。) | |
| 122 | + var f = arguments.callee; | |
| 123 | + // 起点坐标 <坐标格式：40.056878,116.30815> | |
| 124 | + var origin = points[index].potion.lat + ',' + points[index].potion.lng; | |
| 125 | + // 终点坐标 <坐标格式：40.056878,116.30815> | |
| 126 | + var destination = points[index+1].potion.lat + ',' + points[index+1].potion.lng; | |
| 127 | + var region = '上海'; | |
| 128 | + var origin_region = '上海'; | |
| 129 | + var destination_region = '上海'; | |
| 130 | + var output = 'json'; | |
| 131 | + var ak_My = 'wjlITmXeCek5MxyU3ZUBkTeU8B0o0npk'; | |
| 132 | + /** | |
| 133 | + * @param :< origin：起点名称或经纬度；destination：终点名称或经纬度；origin_region：起始点所在城市，驾车导航时必填。 | |
| 134 | + * | |
| 135 | + * destination_region：终点所在城市，驾车导航时必填。output :表示输出类型，可设置为xml或json，默认为xml。> | |
| 136 | + * | |
| 137 | + * @returns :r <jsonp格式> | |
| 138 | + **/ | |
| 139 | + var paramsB = {origin:origin,destination:destination,region:region,origin_region:origin_region,destination_region:destination_region,output:output,ak:ak_My}; | |
| 140 | + /** @description :未认证开发者默认配额为：2000次/天。 */ | |
| 141 | + $.ajax({ | |
| 142 | + // 百度地图根据坐标获取两点之间的时间与距离 | |
| 143 | + url: '//api.map.baidu.com/direction/v1?mode=transit', | |
| 144 | + data: paramsB, | |
| 145 | + dataType: 'jsonp', | |
| 146 | + success: function(r){ | |
| 147 | + if(r) { | |
| 148 | + if(r.message=='ok') { | |
| 149 | + // 获取距离(单位：米) | |
| 150 | + points[index+1].distance = r.result.taxi.distance; | |
| 151 | + // 获取时间(单位：秒) | |
| 152 | + points[index+1].duration = r.result.taxi.duration; | |
| 153 | + } | |
| 154 | + } | |
| 155 | + f(); | |
| 156 | + } | |
| 157 | + }); | |
| 158 | + })(); | |
| 159 | + }, | |
| 160 | + // 获取路段几何图形坐标集合. | |
| 161 | + getSectionListPlonly : function(stationsPoint,cb) { | |
| 162 | + var len = stationsPoint.length; | |
| 163 | + var sectionList = []; | |
| 164 | + (function(){ | |
| 165 | + if (!arguments.callee.count) { | |
| 166 | + arguments.callee.count = 0; | |
| 167 | + } | |
| 168 | + arguments.callee.count++; | |
| 169 | + var index = parseInt(arguments.callee.count) - 1; | |
| 170 | + if (index >= len-1 ) { | |
| 171 | + cb && cb(sectionList); | |
| 172 | + return; | |
| 173 | + } | |
| 174 | + var f = arguments.callee; | |
| 175 | + var poiOne = new BMap.Point(stationsPoint[index].potion.lng,stationsPoint[index].potion.lat); | |
| 176 | + var poiTwo = new BMap.Point(stationsPoint[index+1].potion.lng,stationsPoint[index+1].potion.lat); | |
| 177 | + var transit = new BMap.DrivingRoute(mapB, {renderOptions: {map: mapB,enableDragging : true},onPolylinesSet: searchPolylinesSet}); | |
| 178 | + function searchPolylinesSet(results){ | |
| 179 | + if (transit.getStatus() != BMAP_STATUS_SUCCESS){ | |
| 180 | + }else { | |
| 181 | + var sectionArrayList = []; | |
| 182 | + for (i = 0; i < results.length; i++){ | |
| 183 | + sectionArrayList = sectionArrayList.concat(results[i].getPolyline().getPath()); | |
| 184 | + } | |
| 185 | + sectionList = sectionArrayList; | |
| 186 | + } | |
| 187 | + f(); | |
| 188 | + } | |
| 189 | + transit.search(poiOne,poiTwo); | |
| 190 | + })(); | |
| 191 | + }, | |
| 192 | + // 清楚地图覆盖物 | |
| 193 | + clearMarkAndOverlays : function() { | |
| 194 | + mapB.clearOverlays(); | |
| 195 | + }, | |
| 196 | + // 关闭绘画工具. | |
| 197 | + drawingManagerClose : function() { | |
| 198 | + drawingManager.close(); | |
| 199 | + }, | |
| 200 | + // 打开绘画工具. | |
| 201 | + drawingManagerOpen : function() { | |
| 202 | + drawingManager.open();// 打开鼠标绘画工具. | |
| 203 | + drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE);// 设置属性. | |
| 204 | + } | |
| 205 | + } | |
| 206 | + | |
| 207 | + return Bmap; | |
| 208 | + | |
| 209 | 209 | }(); |
| 210 | 210 | \ No newline at end of file | ... | ... |
src/main/resources/static/pages/base/section/js/add-vmap-world.js
| 1 | -var SectionVmapWorlds = function() { | |
| 2 | - var mapB = '', drawingManager = ''; | |
| 3 | - var Bmap = { | |
| 4 | - init : function() { | |
| 5 | - var CENTER_POINT = {lng : 121.528733,lat : 31.237425};// 设置中心点. | |
| 6 | - var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT';// 百度API Key | |
| 7 | - mapB = new BMap.Map("sectionBmap_basic");// 初始化百度地图 | |
| 8 | - mapB.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat), 15);//中心点和缩放级别 | |
| 9 | - mapB.enableDragging(); //启用地图拖拽事件，默认启用(可不写) | |
| 10 | - mapB.enableScrollWheelZoom(); //启用地图滚轮放大缩小 | |
| 11 | - mapB.disableDoubleClickZoom();//禁用鼠标双击放大 | |
| 12 | - mapB.enableKeyboard();//启用键盘上下左右键移动地图 | |
| 13 | - var styleOptions = { | |
| 14 | - strokeColor : "blue",//边线颜色。 | |
| 15 | - fillColor : "blue",//填充颜色。当参数为空时，圆形将没有填充效果。 | |
| 16 | - strokeWeight : 3,//边线的宽度，以像素为单位。 | |
| 17 | - strokeOpacity : 0.8,//边线的宽度，以像素为单位。 | |
| 18 | - fillOpacity : 0.6,//填充的透明度，取值范围0 - 1。 | |
| 19 | - strokeStyle : 'solid' //边线的样式，solid或dashed。 | |
| 20 | - }; | |
| 21 | - // 创建鼠标绘制管理类 | |
| 22 | - drawingManager = new BMapLib.DrawingManager(mapB, { | |
| 23 | - isOpen : false,//是否开启绘制模式 | |
| 24 | - enableDrawingTool : false,//是否显示工具栏 | |
| 25 | - drawingToolOptions : { | |
| 26 | - anchor : BMAP_ANCHOR_TOP_RIGHT,//位置 | |
| 27 | - offset : new BMap.Size(5, 5),//偏离值 | |
| 28 | - scale : 0.8//工具栏缩放比例 | |
| 29 | - | |
| 30 | - }, | |
| 31 | - polylineOptions : styleOptions//线的样式 | |
| 32 | - }); | |
| 33 | - // 添加绘画完成事件 | |
| 34 | - drawingManager.addEventListener('polylinecomplete', function(e) { | |
| 35 | - drawingManager.close(); | |
| 36 | - var editPloyLineArray = e.getPath();// 获取折线坐标集合 | |
| 37 | - $('#bsectionVectorInput').val(JSON.stringify(editPloyLineArray)); | |
| 38 | - }); | |
| 39 | - return mapB; | |
| 40 | - }, | |
| 41 | - // 根据地理名称获取百度经纬度坐标进行定位. | |
| 42 | - localSearchFromAdreesToPoint: function(Address) { | |
| 43 | - // 创建一个搜索类实例 | |
| 44 | - var localSearch = new BMap.LocalSearch(mapB); | |
| 45 | - // 检索完成后的回调函数。 | |
| 46 | - localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 47 | - var resultPoints = ''; | |
| 48 | - if(searchResult) { | |
| 49 | - // 返回索引指定的结果。索引0表示第1条结果 | |
| 50 | - var poi = searchResult.getPoi(0); | |
| 51 | - if(poi) { | |
| 52 | - //获取经度和纬度 | |
| 53 | - var stationNameChangePoint = new BMap.Point( poi.point.lng, poi.point.lat); | |
| 54 | - marker = new BMap.Marker(stationNameChangePoint); | |
| 55 | - var PanOptions ={noAnimation :true}; | |
| 56 | - mapB.panTo(stationNameChangePoint,PanOptions); | |
| 57 | - // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 58 | - mapB.setZoom(16); | |
| 59 | - mapB.panBy(-300,-50); | |
| 60 | - // 将标注添加到地图中 | |
| 61 | - mapB.addOverlay(marker); | |
| 62 | - //跳动的动画 | |
| 63 | - marker.setAnimation(BMAP_ANIMATION_BOUNCE); | |
| 64 | - }else { | |
| 65 | - // 弹出添加成功提示消息 | |
| 66 | - layer.msg('无法获取【'+Address+'】地理位置！'); | |
| 67 | - } | |
| 68 | - }else { | |
| 69 | - // 弹出添加成功提示消息 | |
| 70 | - layer.msg('无法获取【'+Address+'】地理位置！'); | |
| 71 | - } | |
| 72 | - }); | |
| 73 | - // 根据检索词发起检索。 | |
| 74 | - localSearch.search(Address); | |
| 75 | - }, | |
| 76 | - // 根据名称获取坐标. | |
| 77 | - stationsNameToPoints : function(arra,callback) { | |
| 78 | - // 获取长度 | |
| 79 | - var len = arra.length; | |
| 80 | - var stationList = []; | |
| 81 | - (function(){ | |
| 82 | - if (!arguments.callee.count) { | |
| 83 | - arguments.callee.count = 0; | |
| 84 | - } | |
| 85 | - arguments.callee.count++; | |
| 86 | - var index = parseInt(arguments.callee.count) - 1; | |
| 87 | - if (index >= len) { | |
| 88 | - callback && callback(stationList); | |
| 89 | - return; | |
| 90 | - } | |
| 91 | - var f = arguments.callee; | |
| 92 | - if(arra[index]!=''){ | |
| 93 | - var localSearch = new BMap.LocalSearch(mapB); | |
| 94 | - localSearch.search(arra[index]); | |
| 95 | - localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 96 | - var poi = searchResult.getPoi(0); | |
| 97 | - if(poi) { | |
| 98 | - stationList.push({name:arra[index],potion:{lng:poi.point.lng,lat:poi.point.lat}}); | |
| 99 | - f(); | |
| 100 | - } | |
| 101 | - }); | |
| 102 | - }else { | |
| 103 | - f(); | |
| 104 | - } | |
| 105 | - })(); | |
| 106 | - }, | |
| 107 | - /** 获取距离与时间 @param <points：坐标点集合> */ | |
| 108 | - getDistanceAndDuration : function(points,callback){ | |
| 109 | - // 获取长度 | |
| 110 | - var len = points.length; | |
| 111 | - (function(){ | |
| 112 | - if (!arguments.callee.count) { | |
| 113 | - arguments.callee.count = 0; | |
| 114 | - } | |
| 115 | - arguments.callee.count++; | |
| 116 | - var index = parseInt(arguments.callee.count) - 1; | |
| 117 | - if (index >= len-1) { | |
| 118 | - callback && callback(points); | |
| 119 | - return; | |
| 120 | - } | |
| 121 | - // 当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。(当前正在执行的函数。) | |
| 122 | - var f = arguments.callee; | |
| 123 | - // 起点坐标 <坐标格式：40.056878,116.30815> | |
| 124 | - var origin = points[index].potion.lat + ',' + points[index].potion.lng; | |
| 125 | - // 终点坐标 <坐标格式：40.056878,116.30815> | |
| 126 | - var destination = points[index+1].potion.lat + ',' + points[index+1].potion.lng; | |
| 127 | - var region = '上海'; | |
| 128 | - var origin_region = '上海'; | |
| 129 | - var destination_region = '上海'; | |
| 130 | - var output = 'json'; | |
| 131 | - var ak_My = 'wjlITmXeCek5MxyU3ZUBkTeU8B0o0npk'; | |
| 132 | - /** | |
| 133 | - * @param :< origin：起点名称或经纬度；destination：终点名称或经纬度；origin_region：起始点所在城市，驾车导航时必填。 | |
| 134 | - * | |
| 135 | - * destination_region：终点所在城市，驾车导航时必填。output :表示输出类型，可设置为xml或json，默认为xml。> | |
| 136 | - * | |
| 137 | - * @returns :r <jsonp格式> | |
| 138 | - **/ | |
| 139 | - var paramsB = {origin:origin,destination:destination,region:region,origin_region:origin_region,destination_region:destination_region,output:output,ak:ak_My}; | |
| 140 | - /** @description :未认证开发者默认配额为：2000次/天。 */ | |
| 141 | - $.ajax({ | |
| 142 | - // 百度地图根据坐标获取两点之间的时间与距离 | |
| 143 | - url: 'http://api.map.baidu.com/direction/v1?mode=transit', | |
| 144 | - data: paramsB, | |
| 145 | - dataType: 'jsonp', | |
| 146 | - success: function(r){ | |
| 147 | - if(r) { | |
| 148 | - if(r.message=='ok') { | |
| 149 | - // 获取距离(单位：米) | |
| 150 | - points[index+1].distance = r.result.taxi.distance; | |
| 151 | - // 获取时间(单位：秒) | |
| 152 | - points[index+1].duration = r.result.taxi.duration; | |
| 153 | - } | |
| 154 | - } | |
| 155 | - f(); | |
| 156 | - } | |
| 157 | - }); | |
| 158 | - })(); | |
| 159 | - }, | |
| 160 | - // 获取路段几何图形坐标集合. | |
| 161 | - getSectionListPlonly : function(stationsPoint,cb) { | |
| 162 | - var len = stationsPoint.length; | |
| 163 | - var sectionList = []; | |
| 164 | - (function(){ | |
| 165 | - if (!arguments.callee.count) { | |
| 166 | - arguments.callee.count = 0; | |
| 167 | - } | |
| 168 | - arguments.callee.count++; | |
| 169 | - var index = parseInt(arguments.callee.count) - 1; | |
| 170 | - if (index >= len-1 ) { | |
| 171 | - cb && cb(sectionList); | |
| 172 | - return; | |
| 173 | - } | |
| 174 | - var f = arguments.callee; | |
| 175 | - var poiOne = new BMap.Point(stationsPoint[index].potion.lng,stationsPoint[index].potion.lat); | |
| 176 | - var poiTwo = new BMap.Point(stationsPoint[index+1].potion.lng,stationsPoint[index+1].potion.lat); | |
| 177 | - var transit = new BMap.DrivingRoute(mapB, {renderOptions: {map: mapB,enableDragging : true},onPolylinesSet: searchPolylinesSet}); | |
| 178 | - function searchPolylinesSet(results){ | |
| 179 | - if (transit.getStatus() != BMAP_STATUS_SUCCESS){ | |
| 180 | - }else { | |
| 181 | - var sectionArrayList = []; | |
| 182 | - for (i = 0; i < results.length; i++){ | |
| 183 | - sectionArrayList = sectionArrayList.concat(results[i].getPolyline().getPath()); | |
| 184 | - } | |
| 185 | - sectionList = sectionArrayList; | |
| 186 | - } | |
| 187 | - f(); | |
| 188 | - } | |
| 189 | - transit.search(poiOne,poiTwo); | |
| 190 | - })(); | |
| 191 | - }, | |
| 192 | - // 清楚地图覆盖物 | |
| 193 | - clearMarkAndOverlays : function() { | |
| 194 | - mapB.clearOverlays(); | |
| 195 | - }, | |
| 196 | - // 关闭绘画工具. | |
| 197 | - drawingManagerClose : function() { | |
| 198 | - drawingManager.close(); | |
| 199 | - }, | |
| 200 | - // 打开绘画工具. | |
| 201 | - drawingManagerOpen : function() { | |
| 202 | - drawingManager.open();// 打开鼠标绘画工具. | |
| 203 | - drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE);// 设置属性. | |
| 204 | - } | |
| 205 | - } | |
| 206 | - | |
| 207 | - return Bmap; | |
| 208 | - | |
| 1 | +var SectionVmapWorlds = function() { | |
| 2 | + var mapB = '', drawingManager = ''; | |
| 3 | + var Bmap = { | |
| 4 | + init : function() { | |
| 5 | + var CENTER_POINT = {lng : 121.528733,lat : 31.237425};// 设置中心点. | |
| 6 | + var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT';// 百度API Key | |
| 7 | + mapB = new BMap.Map("sectionBmap_basic");// 初始化百度地图 | |
| 8 | + mapB.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat), 15);//中心点和缩放级别 | |
| 9 | + mapB.enableDragging(); //启用地图拖拽事件，默认启用(可不写) | |
| 10 | + mapB.enableScrollWheelZoom(); //启用地图滚轮放大缩小 | |
| 11 | + mapB.disableDoubleClickZoom();//禁用鼠标双击放大 | |
| 12 | + mapB.enableKeyboard();//启用键盘上下左右键移动地图 | |
| 13 | + var styleOptions = { | |
| 14 | + strokeColor : "blue",//边线颜色。 | |
| 15 | + fillColor : "blue",//填充颜色。当参数为空时，圆形将没有填充效果。 | |
| 16 | + strokeWeight : 3,//边线的宽度，以像素为单位。 | |
| 17 | + strokeOpacity : 0.8,//边线的宽度，以像素为单位。 | |
| 18 | + fillOpacity : 0.6,//填充的透明度，取值范围0 - 1。 | |
| 19 | + strokeStyle : 'solid' //边线的样式，solid或dashed。 | |
| 20 | + }; | |
| 21 | + // 创建鼠标绘制管理类 | |
| 22 | + drawingManager = new BMapLib.DrawingManager(mapB, { | |
| 23 | + isOpen : false,//是否开启绘制模式 | |
| 24 | + enableDrawingTool : false,//是否显示工具栏 | |
| 25 | + drawingToolOptions : { | |
| 26 | + anchor : BMAP_ANCHOR_TOP_RIGHT,//位置 | |
| 27 | + offset : new BMap.Size(5, 5),//偏离值 | |
| 28 | + scale : 0.8//工具栏缩放比例 | |
| 29 | + | |
| 30 | + }, | |
| 31 | + polylineOptions : styleOptions//线的样式 | |
| 32 | + }); | |
| 33 | + // 添加绘画完成事件 | |
| 34 | + drawingManager.addEventListener('polylinecomplete', function(e) { | |
| 35 | + drawingManager.close(); | |
| 36 | + var editPloyLineArray = e.getPath();// 获取折线坐标集合 | |
| 37 | + $('#bsectionVectorInput').val(JSON.stringify(editPloyLineArray)); | |
| 38 | + }); | |
| 39 | + return mapB; | |
| 40 | + }, | |
| 41 | + // 根据地理名称获取百度经纬度坐标进行定位. | |
| 42 | + localSearchFromAdreesToPoint: function(Address) { | |
| 43 | + // 创建一个搜索类实例 | |
| 44 | + var localSearch = new BMap.LocalSearch(mapB); | |
| 45 | + // 检索完成后的回调函数。 | |
| 46 | + localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 47 | + var resultPoints = ''; | |
| 48 | + if(searchResult) { | |
| 49 | + // 返回索引指定的结果。索引0表示第1条结果 | |
| 50 | + var poi = searchResult.getPoi(0); | |
| 51 | + if(poi) { | |
| 52 | + //获取经度和纬度 | |
| 53 | + var stationNameChangePoint = new BMap.Point( poi.point.lng, poi.point.lat); | |
| 54 | + marker = new BMap.Marker(stationNameChangePoint); | |
| 55 | + var PanOptions ={noAnimation :true}; | |
| 56 | + mapB.panTo(stationNameChangePoint,PanOptions); | |
| 57 | + // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 58 | + mapB.setZoom(16); | |
| 59 | + mapB.panBy(-300,-50); | |
| 60 | + // 将标注添加到地图中 | |
| 61 | + mapB.addOverlay(marker); | |
| 62 | + //跳动的动画 | |
| 63 | + marker.setAnimation(BMAP_ANIMATION_BOUNCE); | |
| 64 | + }else { | |
| 65 | + // 弹出添加成功提示消息 | |
| 66 | + layer.msg('无法获取【'+Address+'】地理位置！'); | |
| 67 | + } | |
| 68 | + }else { | |
| 69 | + // 弹出添加成功提示消息 | |
| 70 | + layer.msg('无法获取【'+Address+'】地理位置！'); | |
| 71 | + } | |
| 72 | + }); | |
| 73 | + // 根据检索词发起检索。 | |
| 74 | + localSearch.search(Address); | |
| 75 | + }, | |
| 76 | + // 根据名称获取坐标. | |
| 77 | + stationsNameToPoints : function(arra,callback) { | |
| 78 | + // 获取长度 | |
| 79 | + var len = arra.length; | |
| 80 | + var stationList = []; | |
| 81 | + (function(){ | |
| 82 | + if (!arguments.callee.count) { | |
| 83 | + arguments.callee.count = 0; | |
| 84 | + } | |
| 85 | + arguments.callee.count++; | |
| 86 | + var index = parseInt(arguments.callee.count) - 1; | |
| 87 | + if (index >= len) { | |
| 88 | + callback && callback(stationList); | |
| 89 | + return; | |
| 90 | + } | |
| 91 | + var f = arguments.callee; | |
| 92 | + if(arra[index]!=''){ | |
| 93 | + var localSearch = new BMap.LocalSearch(mapB); | |
| 94 | + localSearch.search(arra[index]); | |
| 95 | + localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 96 | + var poi = searchResult.getPoi(0); | |
| 97 | + if(poi) { | |
| 98 | + stationList.push({name:arra[index],potion:{lng:poi.point.lng,lat:poi.point.lat}}); | |
| 99 | + f(); | |
| 100 | + } | |
| 101 | + }); | |
| 102 | + }else { | |
| 103 | + f(); | |
| 104 | + } | |
| 105 | + })(); | |
| 106 | + }, | |
| 107 | + /** 获取距离与时间 @param <points：坐标点集合> */ | |
| 108 | + getDistanceAndDuration : function(points,callback){ | |
| 109 | + // 获取长度 | |
| 110 | + var len = points.length; | |
| 111 | + (function(){ | |
| 112 | + if (!arguments.callee.count) { | |
| 113 | + arguments.callee.count = 0; | |
| 114 | + } | |
| 115 | + arguments.callee.count++; | |
| 116 | + var index = parseInt(arguments.callee.count) - 1; | |
| 117 | + if (index >= len-1) { | |
| 118 | + callback && callback(points); | |
| 119 | + return; | |
| 120 | + } | |
| 121 | + // 当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。(当前正在执行的函数。) | |
| 122 | + var f = arguments.callee; | |
| 123 | + // 起点坐标 <坐标格式：40.056878,116.30815> | |
| 124 | + var origin = points[index].potion.lat + ',' + points[index].potion.lng; | |
| 125 | + // 终点坐标 <坐标格式：40.056878,116.30815> | |
| 126 | + var destination = points[index+1].potion.lat + ',' + points[index+1].potion.lng; | |
| 127 | + var region = '上海'; | |
| 128 | + var origin_region = '上海'; | |
| 129 | + var destination_region = '上海'; | |
| 130 | + var output = 'json'; | |
| 131 | + var ak_My = 'wjlITmXeCek5MxyU3ZUBkTeU8B0o0npk'; | |
| 132 | + /** | |
| 133 | + * @param :< origin：起点名称或经纬度；destination：终点名称或经纬度；origin_region：起始点所在城市，驾车导航时必填。 | |
| 134 | + * | |
| 135 | + * destination_region：终点所在城市，驾车导航时必填。output :表示输出类型，可设置为xml或json，默认为xml。> | |
| 136 | + * | |
| 137 | + * @returns :r <jsonp格式> | |
| 138 | + **/ | |
| 139 | + var paramsB = {origin:origin,destination:destination,region:region,origin_region:origin_region,destination_region:destination_region,output:output,ak:ak_My}; | |
| 140 | + /** @description :未认证开发者默认配额为：2000次/天。 */ | |
| 141 | + $.ajax({ | |
| 142 | + // 百度地图根据坐标获取两点之间的时间与距离 | |
| 143 | + url: '//api.map.baidu.com/direction/v1?mode=transit', | |
| 144 | + data: paramsB, | |
| 145 | + dataType: 'jsonp', | |
| 146 | + success: function(r){ | |
| 147 | + if(r) { | |
| 148 | + if(r.message=='ok') { | |
| 149 | + // 获取距离(单位：米) | |
| 150 | + points[index+1].distance = r.result.taxi.distance; | |
| 151 | + // 获取时间(单位：秒) | |
| 152 | + points[index+1].duration = r.result.taxi.duration; | |
| 153 | + } | |
| 154 | + } | |
| 155 | + f(); | |
| 156 | + } | |
| 157 | + }); | |
| 158 | + })(); | |
| 159 | + }, | |
| 160 | + // 获取路段几何图形坐标集合. | |
| 161 | + getSectionListPlonly : function(stationsPoint,cb) { | |
| 162 | + var len = stationsPoint.length; | |
| 163 | + var sectionList = []; | |
| 164 | + (function(){ | |
| 165 | + if (!arguments.callee.count) { | |
| 166 | + arguments.callee.count = 0; | |
| 167 | + } | |
| 168 | + arguments.callee.count++; | |
| 169 | + var index = parseInt(arguments.callee.count) - 1; | |
| 170 | + if (index >= len-1 ) { | |
| 171 | + cb && cb(sectionList); | |
| 172 | + return; | |
| 173 | + } | |
| 174 | + var f = arguments.callee; | |
| 175 | + var poiOne = new BMap.Point(stationsPoint[index].potion.lng,stationsPoint[index].potion.lat); | |
| 176 | + var poiTwo = new BMap.Point(stationsPoint[index+1].potion.lng,stationsPoint[index+1].potion.lat); | |
| 177 | + var transit = new BMap.DrivingRoute(mapB, {renderOptions: {map: mapB,enableDragging : true},onPolylinesSet: searchPolylinesSet}); | |
| 178 | + function searchPolylinesSet(results){ | |
| 179 | + if (transit.getStatus() != BMAP_STATUS_SUCCESS){ | |
| 180 | + }else { | |
| 181 | + var sectionArrayList = []; | |
| 182 | + for (i = 0; i < results.length; i++){ | |
| 183 | + sectionArrayList = sectionArrayList.concat(results[i].getPolyline().getPath()); | |
| 184 | + } | |
| 185 | + sectionList = sectionArrayList; | |
| 186 | + } | |
| 187 | + f(); | |
| 188 | + } | |
| 189 | + transit.search(poiOne,poiTwo); | |
| 190 | + })(); | |
| 191 | + }, | |
| 192 | + // 清楚地图覆盖物 | |
| 193 | + clearMarkAndOverlays : function() { | |
| 194 | + mapB.clearOverlays(); | |
| 195 | + }, | |
| 196 | + // 关闭绘画工具. | |
| 197 | + drawingManagerClose : function() { | |
| 198 | + drawingManager.close(); | |
| 199 | + }, | |
| 200 | + // 打开绘画工具. | |
| 201 | + drawingManagerOpen : function() { | |
| 202 | + drawingManager.open();// 打开鼠标绘画工具. | |
| 203 | + drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE);// 设置属性. | |
| 204 | + } | |
| 205 | + } | |
| 206 | + | |
| 207 | + return Bmap; | |
| 208 | + | |
| 209 | 209 | }(); |
| 210 | 210 | \ No newline at end of file | ... | ... |
src/main/resources/static/pages/base/stationroute/js/stationroute-list-map.js
| ... | ... | @@ -192,7 +192,7 @@ window.WorldsBMap = function () { |
| 192 | 192 | /** @description :未认证开发者默认配额为：2000次/天。 */ |
| 193 | 193 | $.ajax({ |
| 194 | 194 | // 百度地图根据坐标获取两点之间的时间与距离 |
| 195 | - url: 'http://api.map.baidu.com/direction/v1?mode=transit', | |
| 195 | + url: '//api.map.baidu.com/direction/v1?mode=transit', | |
| 196 | 196 | data: paramsB, |
| 197 | 197 | dataType: 'jsonp', |
| 198 | 198 | success: function (r) { |
| ... | ... | @@ -1447,7 +1447,7 @@ window.WorldsBMap = function () { |
| 1447 | 1447 | $.ajax({ |
| 1448 | 1448 | |
| 1449 | 1449 | // 百度地图根据坐标获取两点之间的时间与距离 |
| 1450 | - url: 'http://api.map.baidu.com/direction/v1?mode=transit', | |
| 1450 | + url: '//api.map.baidu.com/direction/v1?mode=transit', | |
| 1451 | 1451 | |
| 1452 | 1452 | data: paramsB, |
| 1453 | 1453 | ... | ... |
src/main/resources/static/pages/excep/js/map.js
| 1 | -/** | |
| 2 | - * 百度地图 | |
| 3 | - * | |
| 4 | - * - - - - - -》init：地图初始化 | |
| 5 | - * | |
| 6 | - * - - - - - -》getDistanceAndDuration：获取距离与时间 | |
| 7 | - * | |
| 8 | - * - - - - - -》drawingUpline：在地图上画出上行线路走向 | |
| 9 | - * | |
| 10 | - * - - - - - -》stationsPointsToLibraryPoint：根据站点坐标匹配库中的公交站点（手动规划） | |
| 11 | - */ | |
| 12 | - | |
| 13 | -var BasicMap = function () { | |
| 14 | - | |
| 15 | - /** BasicMap 全局变量定义 mapBValue：地图对象；polyUpline：走向折线；sectionList：截取过的路段 ；pointIndex：计算路段被切的次数; | |
| 16 | - * firstPoint:截取路段的第一个点;iseditStatus：路段是否在编辑状态；isCutSection ： 获取路段是否在截取状态*/ | |
| 17 | - var mapBValue = '', polyUpline='', sectionList = [], pointIndex = 0, iseditStatus = false, firstPoint = {}, isCutSection = false; | |
| 18 | - | |
| 19 | - var Bmap = { | |
| 20 | - | |
| 21 | - init : function() { | |
| 22 | - | |
| 23 | - // 设置中心点, | |
| 24 | - var CENTER_POINT = {lng : 121.528733,lat : 31.237425}; | |
| 25 | - | |
| 26 | - // 百度API Key | |
| 27 | - var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT'; | |
| 28 | - | |
| 29 | - // 初始化百度地图 | |
| 30 | - mapBValue = new BMap.Map("BasicMap"); | |
| 31 | - | |
| 32 | - //中心点和缩放级别 | |
| 33 | - mapBValue.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat),15); | |
| 34 | - | |
| 35 | - //启用地图拖拽事件，默认启用(可不写) | |
| 36 | - mapBValue.enableDragging(); | |
| 37 | - | |
| 38 | - //启用地图滚轮放大缩小 | |
| 39 | - mapBValue.enableScrollWheelZoom(); | |
| 40 | - | |
| 41 | - //禁用鼠标双击放大 | |
| 42 | - mapBValue.disableDoubleClickZoom(); | |
| 43 | - | |
| 44 | - //启用键盘上下左右键移动地图 | |
| 45 | - mapBValue.enableKeyboard(); | |
| 46 | - | |
| 47 | - return mapBValue; | |
| 48 | - }, | |
| 49 | - /** 获取第一个切路段的点 @return Point*/ | |
| 50 | - getFirstPoint : function() { | |
| 51 | - return firstPoint; | |
| 52 | - }, | |
| 53 | - /** 获取地图对象 @return 地图对象map */ | |
| 54 | - getmapBValue : function() { | |
| 55 | - | |
| 56 | - return mapBValue; | |
| 57 | - | |
| 58 | - }, | |
| 59 | - | |
| 60 | - getPolyUpline : function() { | |
| 61 | - | |
| 62 | - return polyUpline; | |
| 63 | - }, | |
| 64 | - | |
| 65 | - /** 获取截取过的路段 @return 路段对象List */ | |
| 66 | - getSectionList : function() { | |
| 67 | - | |
| 68 | - return sectionList; | |
| 69 | - | |
| 70 | - }, | |
| 71 | - setSectionList : function(list) { | |
| 72 | - | |
| 73 | - sectionList = list; | |
| 74 | - }, | |
| 75 | - initCutSectionPoint : function() { | |
| 76 | - sectionList = []; | |
| 77 | - var tbodyHtml = template('section_list',{list : sectionList}); | |
| 78 | - $('#section_table tbody').html(tbodyHtml); | |
| 79 | - }, | |
| 80 | - /** 获取切路段的点下标 @return int*/ | |
| 81 | - setPointIndex : function(index) { | |
| 82 | - pointIndex = index; | |
| 83 | - }, | |
| 84 | - getPointIndex : function() { | |
| 85 | - | |
| 86 | - return pointIndex; | |
| 87 | - | |
| 88 | - }, | |
| 89 | - /** 获取路段是否在编辑状态 @return boolean*/ | |
| 90 | - getIsEditStatus : function() { | |
| 91 | - return iseditStatus; | |
| 92 | - }, | |
| 93 | - setIsEditStatus : function(v) { | |
| 94 | - iseditStatus = v ; | |
| 95 | - }, | |
| 96 | - | |
| 97 | - /** 获取路段是否在截取状态 @return boolean*/ | |
| 98 | - getIsCutSection : function() { | |
| 99 | - return isCutSection; | |
| 100 | - }, | |
| 101 | - setIsCutSection : function(v) { | |
| 102 | - isCutSection = v ; | |
| 103 | - }, | |
| 104 | - | |
| 105 | - /** 获取距离与时间 @param <points：坐标点集合> */ | |
| 106 | - getDistanceAndDuration : function(points,callback){ | |
| 107 | - | |
| 108 | - // 获取长度 | |
| 109 | - var len = points.length; | |
| 110 | - (function(){ | |
| 111 | - | |
| 112 | - if (!arguments.callee.count) { | |
| 113 | - | |
| 114 | - arguments.callee.count = 0; | |
| 115 | - | |
| 116 | - } | |
| 117 | - | |
| 118 | - arguments.callee.count++; | |
| 119 | - | |
| 120 | - var index = parseInt(arguments.callee.count) - 1; | |
| 121 | - | |
| 122 | - if (index >= len-1) { | |
| 123 | - | |
| 124 | - callback && callback(points); | |
| 125 | - | |
| 126 | - return; | |
| 127 | - } | |
| 128 | - | |
| 129 | - // 当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。(当前正在执行的函数。) | |
| 130 | - var f = arguments.callee; | |
| 131 | - // 起点坐标 <坐标格式：40.056878,116.30815> | |
| 132 | - var origin = points[index].potion.lat + ',' + points[index].potion.lng; | |
| 133 | - | |
| 134 | - // 终点坐标 <坐标格式：40.056878,116.30815> | |
| 135 | - var destination = points[index+1].potion.lat + ',' + points[index+1].potion.lng; | |
| 136 | - var region = '上海'; | |
| 137 | - | |
| 138 | - var origin_region = '上海'; | |
| 139 | - | |
| 140 | - var destination_region = '上海'; | |
| 141 | - | |
| 142 | - var output = 'json'; | |
| 143 | - | |
| 144 | - var ak_My = 'wjlITmXeCek5MxyU3ZUBkTeU8B0o0npk'; | |
| 145 | - | |
| 146 | - /** | |
| 147 | - * origin：起点名称或经纬度； | |
| 148 | - * | |
| 149 | - * destination：终点名称或经纬度； | |
| 150 | - * | |
| 151 | - * origin_region：起始点所在城市，驾车导航时必填。 | |
| 152 | - * | |
| 153 | - * destination_region：终点所在城市，驾车导航时必填。 | |
| 154 | - * | |
| 155 | - * output :表示输出类型，可设置为xml或json，默认为xml。 | |
| 156 | - * | |
| 157 | - **/ | |
| 158 | - var paramsB = {origin:origin,destination:destination,region:region,origin_region:origin_region,destination_region:destination_region,output:output,ak:ak_My}; | |
| 159 | - | |
| 160 | - /** @description :未认证开发者默认配额为：2000次/天。 */ | |
| 161 | - $.ajax({ | |
| 162 | - | |
| 163 | - // 百度地图根据坐标获取两点之间的时间与距离 | |
| 164 | - url: 'http://api.map.baidu.com/direction/v1?mode=transit', | |
| 165 | - | |
| 166 | - data: paramsB, | |
| 167 | - | |
| 168 | - dataType: 'jsonp', | |
| 169 | - | |
| 170 | - success: function(r){ | |
| 171 | - | |
| 172 | - if(r) { | |
| 173 | - | |
| 174 | - if(r.message=='ok') { | |
| 175 | - | |
| 176 | - if(r.result.taxi==null) { | |
| 177 | - | |
| 178 | - // 获取距离(单位：米) | |
| 179 | - points[index+1].distance = 0; | |
| 180 | - | |
| 181 | - // 获取时间(单位：秒) | |
| 182 | - points[index+1].duration = 0; | |
| 183 | - | |
| 184 | - }else { | |
| 185 | - | |
| 186 | - // 获取距离(单位：米) | |
| 187 | - points[index+1].distance = r.result.taxi.distance; | |
| 188 | - | |
| 189 | - // 获取时间(单位：秒) | |
| 190 | - points[index+1].duration = r.result.taxi.duration; | |
| 191 | - | |
| 192 | - } | |
| 193 | - | |
| 194 | - | |
| 195 | - } | |
| 196 | - | |
| 197 | - } | |
| 198 | - | |
| 199 | - f(); | |
| 200 | - } | |
| 201 | - }); | |
| 202 | - | |
| 203 | - })(); | |
| 204 | - | |
| 205 | - }, | |
| 206 | - // 在地图上画出上行线路走向 | |
| 207 | - drawingUpline01 : function (polylineArray,polyline_center,data) { | |
| 208 | - var polyUpline01 = 'polyline' + '_' + data.sectionrouteId; | |
| 209 | - // 创建线路走向 | |
| 210 | - polyUpline01 = new BMap.Polyline(polylineArray, {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5}); | |
| 211 | - polyUpline01.data = data; | |
| 212 | - // 把折线添加到地图上 | |
| 213 | - mapBValue.addOverlay(polyUpline01); | |
| 214 | - var sectionPoint = []; | |
| 215 | - // 线路单击事件 | |
| 216 | - polyUpline01.addEventListener('click',function(e) { | |
| 217 | - if(BasicMap.getIsEditStatus()) { | |
| 218 | - layer.msg('请先保存正在编辑的路段信息...'); | |
| 219 | - return false; | |
| 220 | - } | |
| 221 | - if(BasicMap.getIsCutSection()) { | |
| 222 | - layer.msg('请先撤销所有切路段的点...'); | |
| 223 | - return false; | |
| 224 | - } | |
| 225 | - polyUpline01.enableEditing(); | |
| 226 | - BasicMap.setIsEditStatus(true); | |
| 227 | - }); | |
| 228 | - | |
| 229 | - // 添加路段双击事件 | |
| 230 | - polyUpline01.addEventListener("dblclick",function(e){ | |
| 231 | - if(BasicMap.getIsCutSection()) { | |
| 232 | - layer.msg('请先撤销所有切路段的点...'); | |
| 233 | - return false; | |
| 234 | - } | |
| 235 | - BasicMap.setIsEditStatus(false); | |
| 236 | - // 关闭 | |
| 237 | - layer.closeAll(); | |
| 238 | - polyUpline01.disableEditing(); | |
| 239 | - EditSectionObj.setEitdSection(polyUpline01.data); | |
| 240 | - // 获取折线坐标集合 | |
| 241 | - var editPloyLineArray = polyUpline01.getPath(); | |
| 242 | - EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 243 | - sectionList = []; | |
| 244 | - var tbodyHtml = template('section_list',{list : sectionList}); | |
| 245 | - // 截取路段 | |
| 246 | - $('#section_table tbody').html(tbodyHtml); | |
| 247 | - // 加载修改路段弹出层mobal页面 | |
| 248 | - $.get('editsection.html', function(m){ | |
| 249 | - $(pjaxContainer).append(m); | |
| 250 | - $('#edit_section_mobal_cache').trigger('editSectionMobalCache_show', [BasicMap,GetAjaxData,EditSectionObj,PublicFunctions]); | |
| 251 | - }); | |
| 252 | - }); | |
| 253 | - | |
| 254 | - // 路段右击事件 | |
| 255 | - var editSection = function(e,ee,marker){ | |
| 256 | - if(BasicMap.getIsEditStatus()) { | |
| 257 | - layer.msg('请先保存正在编辑的路段信息...'); | |
| 258 | - return false; | |
| 259 | - } | |
| 260 | - var lng = e.lng; | |
| 261 | - var lat = e.lat; | |
| 262 | - var sectionName = null; | |
| 263 | - var marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建点 | |
| 264 | - marker.isFlag = true; | |
| 265 | - if(pointIndex == 0) { | |
| 266 | - sectionPoint[pointIndex] = {lng:lng , lat:lat}; | |
| 267 | - layer.msg('进入切路段状态，请选择本路段的终点！'); | |
| 268 | - mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 269 | - firstPoint = {lng:lng, lat:lat}; | |
| 270 | - pointIndex++; | |
| 271 | - EditSectionObj.setEitdSection(polyUpline01.data); | |
| 272 | - // 获取折线坐标集合 | |
| 273 | - var editPloyLineArray = polyUpline01.getPath(); | |
| 274 | - EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 275 | - } else if (pointIndex > 0) { | |
| 276 | - layer.prompt({title: '请输入路段名！'}, function(sectionName, index){ | |
| 277 | - pointList = []; | |
| 278 | - sectionPoint[pointIndex] = {lng:lng , lat:lat}; | |
| 279 | - pointList[0] = sectionPoint[pointIndex-1]; | |
| 280 | - pointList[1] = sectionPoint[pointIndex]; | |
| 281 | - sectionList.push({name:sectionName, section:pointList}); | |
| 282 | - layer.close(index); | |
| 283 | - layer.msg('路段截取成功，请选择下一个路段的终点'); | |
| 284 | - mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 285 | - var tbodyHtml = template('section_list',{list : sectionList}); | |
| 286 | - // 截取路段 | |
| 287 | - $('#section_table tbody').html(tbodyHtml); | |
| 288 | - pointIndex++; | |
| 289 | - }); | |
| 290 | - } | |
| 291 | - BasicMap.setIsCutSection(true); | |
| 292 | - } | |
| 293 | - var markerMenu=new BMap.ContextMenu(); | |
| 294 | - markerMenu.addItem(new BMap.MenuItem('切路段',editSection.bind(polyUpline01))); | |
| 295 | - polyUpline01.addContextMenu(markerMenu); | |
| 296 | - | |
| 297 | - | |
| 298 | - var PanOptions_ ={noAnimation :true}; | |
| 299 | - mapBValue.reset(); | |
| 300 | - mapBValue.panTo(polyline_center,PanOptions_); | |
| 301 | - mapBValue.panBy(500,-510,PanOptions_); | |
| 302 | - mapBValue.setZoom(14); | |
| 303 | - }, | |
| 304 | - // 删除点刷新cutSectionTable | |
| 305 | - refreshCutSectionTable : function() { | |
| 306 | - var tbodyHtml = template('section_list',{list : sectionList}); | |
| 307 | - $('#section_table tbody').html(tbodyHtml); | |
| 308 | - }, | |
| 309 | - // 删除点刷新覆盖物 | |
| 310 | - deleteCutSectionPoint : function(point) { | |
| 311 | - var lng = point.lng; | |
| 312 | - var lat = point.lat; | |
| 313 | - var allOverlay = mapBValue.getOverlays(); | |
| 314 | - // 删除最后一个点 | |
| 315 | - for (var i = 0; i < allOverlay.length -1; i++){ | |
| 316 | - if(allOverlay[i].isFlag) { | |
| 317 | - if(allOverlay[i].point.lng == lng && allOverlay[i].point.lat == lat){ | |
| 318 | - mapBValue.removeOverlay(allOverlay[i]); | |
| 319 | - break; | |
| 320 | - } | |
| 321 | - } | |
| 322 | - } | |
| 323 | - }, | |
| 324 | - /** 在地图上画点 @param：<point_center：中心坐标点> */ | |
| 325 | - drawingUpStationPoint : function(point_center,stationName,s) { | |
| 326 | - | |
| 327 | - // 自定义标注物图片 | |
| 328 | - var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/gjzd.png',new BMap.Size(10, 10)); | |
| 329 | - | |
| 330 | - var html2 = '<div style="position: absolute; margin: 0pt; padding: 0pt; width: 160px; height: 26px; left: -10px; top: -35px; overflow: hidden;">' | |
| 331 | - + '<img class="rm3_image" style="border:none;left:0px; top:0px; position:absolute;" src="/pages/base/stationroute/css/img/back160.png">' | |
| 332 | - + '</div>' | |
| 333 | - + '<label class=" BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: inline; cursor: inherit; border: 0px none; padding: 2px 1px 1px; white-space: nowrap; font: 12px arial,simsun; z-index: 80; color: rgb(255, 102, 0); left: 15px; top: -35px;"><span style="float: left; color: #fdfdfd; margin-left: -22px; font-size: 6px;">'+ s+'</span>'+ stationName+'</label>'; | |
| 334 | - | |
| 335 | - | |
| 336 | - var myRichMarker1 = new BMapLib.RichMarker(html2, point_center,{ | |
| 337 | - "anchor" : new BMap.Size(-10,8), | |
| 338 | - "enableDragging" : true}); | |
| 339 | - | |
| 340 | - | |
| 341 | - myRichMarker1.disableDragging(); | |
| 342 | - mapBValue.addOverlay(myRichMarker1); | |
| 343 | - | |
| 344 | - | |
| 345 | - // 创建标注物 | |
| 346 | - marker = new BMap.Marker(point_center,{icon : icon_target}); | |
| 347 | - | |
| 348 | - // 允许覆盖物在map.clearOverlays方法中被清除。 | |
| 349 | - marker.enableMassClear(); | |
| 350 | - | |
| 351 | - mapBValue.addOverlay(marker); | |
| 352 | - }, | |
| 353 | - | |
| 354 | - // 根据站点坐标匹配库中的公交站点（手动规划） | |
| 355 | - stationsPointsToLibraryPoint : function(arra,callback) { | |
| 356 | - // 获取长度 | |
| 357 | - var len = arra.length; | |
| 358 | - var station = {}; | |
| 359 | - var stationList = []; | |
| 360 | - (function(){ | |
| 361 | - if (!arguments.callee.count) { | |
| 362 | - arguments.callee.count = 0; | |
| 363 | - } | |
| 364 | - arguments.callee.count++; | |
| 365 | - var index = parseInt(arguments.callee.count) - 1; | |
| 366 | - if (index >= len) { | |
| 367 | - callback && callback(stationList); | |
| 368 | - return ; | |
| 369 | - } | |
| 370 | - var f = arguments.callee; | |
| 371 | - station = arra[index]; | |
| 372 | - if(arra[index].name!=''){ | |
| 373 | - | |
| 374 | - $.get('/station/matchStation',station,function(resultStation) { | |
| 375 | - stationList.push({name:resultStation.name ,wgs:arra[index].wgs,potion:{lng:resultStation.potion_lng, lat:resultStation.potion_lat}, isHave:resultStation.isHave , id:resultStation.id}); | |
| 376 | - f(); | |
| 377 | - }); | |
| 378 | - }else { | |
| 379 | - f(); | |
| 380 | - } | |
| 381 | - })() | |
| 382 | - }, | |
| 383 | - clearMarkAndOverlays : function() { | |
| 384 | - | |
| 385 | - // 清楚地图覆盖物 | |
| 386 | - mapBValue.clearOverlays(); | |
| 387 | - | |
| 388 | - mapBValue.removeOverlay(); | |
| 389 | - | |
| 390 | - } | |
| 391 | - | |
| 392 | - } | |
| 393 | - | |
| 394 | - return Bmap; | |
| 395 | - | |
| 1 | +/** | |
| 2 | + * 百度地图 | |
| 3 | + * | |
| 4 | + * - - - - - -》init：地图初始化 | |
| 5 | + * | |
| 6 | + * - - - - - -》getDistanceAndDuration：获取距离与时间 | |
| 7 | + * | |
| 8 | + * - - - - - -》drawingUpline：在地图上画出上行线路走向 | |
| 9 | + * | |
| 10 | + * - - - - - -》stationsPointsToLibraryPoint：根据站点坐标匹配库中的公交站点（手动规划） | |
| 11 | + */ | |
| 12 | + | |
| 13 | +var BasicMap = function () { | |
| 14 | + | |
| 15 | + /** BasicMap 全局变量定义 mapBValue：地图对象；polyUpline：走向折线；sectionList：截取过的路段 ；pointIndex：计算路段被切的次数; | |
| 16 | + * firstPoint:截取路段的第一个点;iseditStatus：路段是否在编辑状态；isCutSection ： 获取路段是否在截取状态*/ | |
| 17 | + var mapBValue = '', polyUpline='', sectionList = [], pointIndex = 0, iseditStatus = false, firstPoint = {}, isCutSection = false; | |
| 18 | + | |
| 19 | + var Bmap = { | |
| 20 | + | |
| 21 | + init : function() { | |
| 22 | + | |
| 23 | + // 设置中心点, | |
| 24 | + var CENTER_POINT = {lng : 121.528733,lat : 31.237425}; | |
| 25 | + | |
| 26 | + // 百度API Key | |
| 27 | + var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT'; | |
| 28 | + | |
| 29 | + // 初始化百度地图 | |
| 30 | + mapBValue = new BMap.Map("BasicMap"); | |
| 31 | + | |
| 32 | + //中心点和缩放级别 | |
| 33 | + mapBValue.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat),15); | |
| 34 | + | |
| 35 | + //启用地图拖拽事件，默认启用(可不写) | |
| 36 | + mapBValue.enableDragging(); | |
| 37 | + | |
| 38 | + //启用地图滚轮放大缩小 | |
| 39 | + mapBValue.enableScrollWheelZoom(); | |
| 40 | + | |
| 41 | + //禁用鼠标双击放大 | |
| 42 | + mapBValue.disableDoubleClickZoom(); | |
| 43 | + | |
| 44 | + //启用键盘上下左右键移动地图 | |
| 45 | + mapBValue.enableKeyboard(); | |
| 46 | + | |
| 47 | + return mapBValue; | |
| 48 | + }, | |
| 49 | + /** 获取第一个切路段的点 @return Point*/ | |
| 50 | + getFirstPoint : function() { | |
| 51 | + return firstPoint; | |
| 52 | + }, | |
| 53 | + /** 获取地图对象 @return 地图对象map */ | |
| 54 | + getmapBValue : function() { | |
| 55 | + | |
| 56 | + return mapBValue; | |
| 57 | + | |
| 58 | + }, | |
| 59 | + | |
| 60 | + getPolyUpline : function() { | |
| 61 | + | |
| 62 | + return polyUpline; | |
| 63 | + }, | |
| 64 | + | |
| 65 | + /** 获取截取过的路段 @return 路段对象List */ | |
| 66 | + getSectionList : function() { | |
| 67 | + | |
| 68 | + return sectionList; | |
| 69 | + | |
| 70 | + }, | |
| 71 | + setSectionList : function(list) { | |
| 72 | + | |
| 73 | + sectionList = list; | |
| 74 | + }, | |
| 75 | + initCutSectionPoint : function() { | |
| 76 | + sectionList = []; | |
| 77 | + var tbodyHtml = template('section_list',{list : sectionList}); | |
| 78 | + $('#section_table tbody').html(tbodyHtml); | |
| 79 | + }, | |
| 80 | + /** 获取切路段的点下标 @return int*/ | |
| 81 | + setPointIndex : function(index) { | |
| 82 | + pointIndex = index; | |
| 83 | + }, | |
| 84 | + getPointIndex : function() { | |
| 85 | + | |
| 86 | + return pointIndex; | |
| 87 | + | |
| 88 | + }, | |
| 89 | + /** 获取路段是否在编辑状态 @return boolean*/ | |
| 90 | + getIsEditStatus : function() { | |
| 91 | + return iseditStatus; | |
| 92 | + }, | |
| 93 | + setIsEditStatus : function(v) { | |
| 94 | + iseditStatus = v ; | |
| 95 | + }, | |
| 96 | + | |
| 97 | + /** 获取路段是否在截取状态 @return boolean*/ | |
| 98 | + getIsCutSection : function() { | |
| 99 | + return isCutSection; | |
| 100 | + }, | |
| 101 | + setIsCutSection : function(v) { | |
| 102 | + isCutSection = v ; | |
| 103 | + }, | |
| 104 | + | |
| 105 | + /** 获取距离与时间 @param <points：坐标点集合> */ | |
| 106 | + getDistanceAndDuration : function(points,callback){ | |
| 107 | + | |
| 108 | + // 获取长度 | |
| 109 | + var len = points.length; | |
| 110 | + (function(){ | |
| 111 | + | |
| 112 | + if (!arguments.callee.count) { | |
| 113 | + | |
| 114 | + arguments.callee.count = 0; | |
| 115 | + | |
| 116 | + } | |
| 117 | + | |
| 118 | + arguments.callee.count++; | |
| 119 | + | |
| 120 | + var index = parseInt(arguments.callee.count) - 1; | |
| 121 | + | |
| 122 | + if (index >= len-1) { | |
| 123 | + | |
| 124 | + callback && callback(points); | |
| 125 | + | |
| 126 | + return; | |
| 127 | + } | |
| 128 | + | |
| 129 | + // 当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。(当前正在执行的函数。) | |
| 130 | + var f = arguments.callee; | |
| 131 | + // 起点坐标 <坐标格式：40.056878,116.30815> | |
| 132 | + var origin = points[index].potion.lat + ',' + points[index].potion.lng; | |
| 133 | + | |
| 134 | + // 终点坐标 <坐标格式：40.056878,116.30815> | |
| 135 | + var destination = points[index+1].potion.lat + ',' + points[index+1].potion.lng; | |
| 136 | + var region = '上海'; | |
| 137 | + | |
| 138 | + var origin_region = '上海'; | |
| 139 | + | |
| 140 | + var destination_region = '上海'; | |
| 141 | + | |
| 142 | + var output = 'json'; | |
| 143 | + | |
| 144 | + var ak_My = 'wjlITmXeCek5MxyU3ZUBkTeU8B0o0npk'; | |
| 145 | + | |
| 146 | + /** | |
| 147 | + * origin：起点名称或经纬度； | |
| 148 | + * | |
| 149 | + * destination：终点名称或经纬度； | |
| 150 | + * | |
| 151 | + * origin_region：起始点所在城市，驾车导航时必填。 | |
| 152 | + * | |
| 153 | + * destination_region：终点所在城市，驾车导航时必填。 | |
| 154 | + * | |
| 155 | + * output :表示输出类型，可设置为xml或json，默认为xml。 | |
| 156 | + * | |
| 157 | + **/ | |
| 158 | + var paramsB = {origin:origin,destination:destination,region:region,origin_region:origin_region,destination_region:destination_region,output:output,ak:ak_My}; | |
| 159 | + | |
| 160 | + /** @description :未认证开发者默认配额为：2000次/天。 */ | |
| 161 | + $.ajax({ | |
| 162 | + | |
| 163 | + // 百度地图根据坐标获取两点之间的时间与距离 | |
| 164 | + url: '//api.map.baidu.com/direction/v1?mode=transit', | |
| 165 | + | |
| 166 | + data: paramsB, | |
| 167 | + | |
| 168 | + dataType: 'jsonp', | |
| 169 | + | |
| 170 | + success: function(r){ | |
| 171 | + | |
| 172 | + if(r) { | |
| 173 | + | |
| 174 | + if(r.message=='ok') { | |
| 175 | + | |
| 176 | + if(r.result.taxi==null) { | |
| 177 | + | |
| 178 | + // 获取距离(单位：米) | |
| 179 | + points[index+1].distance = 0; | |
| 180 | + | |
| 181 | + // 获取时间(单位：秒) | |
| 182 | + points[index+1].duration = 0; | |
| 183 | + | |
| 184 | + }else { | |
| 185 | + | |
| 186 | + // 获取距离(单位：米) | |
| 187 | + points[index+1].distance = r.result.taxi.distance; | |
| 188 | + | |
| 189 | + // 获取时间(单位：秒) | |
| 190 | + points[index+1].duration = r.result.taxi.duration; | |
| 191 | + | |
| 192 | + } | |
| 193 | + | |
| 194 | + | |
| 195 | + } | |
| 196 | + | |
| 197 | + } | |
| 198 | + | |
| 199 | + f(); | |
| 200 | + } | |
| 201 | + }); | |
| 202 | + | |
| 203 | + })(); | |
| 204 | + | |
| 205 | + }, | |
| 206 | + // 在地图上画出上行线路走向 | |
| 207 | + drawingUpline01 : function (polylineArray,polyline_center,data) { | |
| 208 | + var polyUpline01 = 'polyline' + '_' + data.sectionrouteId; | |
| 209 | + // 创建线路走向 | |
| 210 | + polyUpline01 = new BMap.Polyline(polylineArray, {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5}); | |
| 211 | + polyUpline01.data = data; | |
| 212 | + // 把折线添加到地图上 | |
| 213 | + mapBValue.addOverlay(polyUpline01); | |
| 214 | + var sectionPoint = []; | |
| 215 | + // 线路单击事件 | |
| 216 | + polyUpline01.addEventListener('click',function(e) { | |
| 217 | + if(BasicMap.getIsEditStatus()) { | |
| 218 | + layer.msg('请先保存正在编辑的路段信息...'); | |
| 219 | + return false; | |
| 220 | + } | |
| 221 | + if(BasicMap.getIsCutSection()) { | |
| 222 | + layer.msg('请先撤销所有切路段的点...'); | |
| 223 | + return false; | |
| 224 | + } | |
| 225 | + polyUpline01.enableEditing(); | |
| 226 | + BasicMap.setIsEditStatus(true); | |
| 227 | + }); | |
| 228 | + | |
| 229 | + // 添加路段双击事件 | |
| 230 | + polyUpline01.addEventListener("dblclick",function(e){ | |
| 231 | + if(BasicMap.getIsCutSection()) { | |
| 232 | + layer.msg('请先撤销所有切路段的点...'); | |
| 233 | + return false; | |
| 234 | + } | |
| 235 | + BasicMap.setIsEditStatus(false); | |
| 236 | + // 关闭 | |
| 237 | + layer.closeAll(); | |
| 238 | + polyUpline01.disableEditing(); | |
| 239 | + EditSectionObj.setEitdSection(polyUpline01.data); | |
| 240 | + // 获取折线坐标集合 | |
| 241 | + var editPloyLineArray = polyUpline01.getPath(); | |
| 242 | + EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 243 | + sectionList = []; | |
| 244 | + var tbodyHtml = template('section_list',{list : sectionList}); | |
| 245 | + // 截取路段 | |
| 246 | + $('#section_table tbody').html(tbodyHtml); | |
| 247 | + // 加载修改路段弹出层mobal页面 | |
| 248 | + $.get('editsection.html', function(m){ | |
| 249 | + $(pjaxContainer).append(m); | |
| 250 | + $('#edit_section_mobal_cache').trigger('editSectionMobalCache_show', [BasicMap,GetAjaxData,EditSectionObj,PublicFunctions]); | |
| 251 | + }); | |
| 252 | + }); | |
| 253 | + | |
| 254 | + // 路段右击事件 | |
| 255 | + var editSection = function(e,ee,marker){ | |
| 256 | + if(BasicMap.getIsEditStatus()) { | |
| 257 | + layer.msg('请先保存正在编辑的路段信息...'); | |
| 258 | + return false; | |
| 259 | + } | |
| 260 | + var lng = e.lng; | |
| 261 | + var lat = e.lat; | |
| 262 | + var sectionName = null; | |
| 263 | + var marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建点 | |
| 264 | + marker.isFlag = true; | |
| 265 | + if(pointIndex == 0) { | |
| 266 | + sectionPoint[pointIndex] = {lng:lng , lat:lat}; | |
| 267 | + layer.msg('进入切路段状态，请选择本路段的终点！'); | |
| 268 | + mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 269 | + firstPoint = {lng:lng, lat:lat}; | |
| 270 | + pointIndex++; | |
| 271 | + EditSectionObj.setEitdSection(polyUpline01.data); | |
| 272 | + // 获取折线坐标集合 | |
| 273 | + var editPloyLineArray = polyUpline01.getPath(); | |
| 274 | + EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 275 | + } else if (pointIndex > 0) { | |
| 276 | + layer.prompt({title: '请输入路段名！'}, function(sectionName, index){ | |
| 277 | + pointList = []; | |
| 278 | + sectionPoint[pointIndex] = {lng:lng , lat:lat}; | |
| 279 | + pointList[0] = sectionPoint[pointIndex-1]; | |
| 280 | + pointList[1] = sectionPoint[pointIndex]; | |
| 281 | + sectionList.push({name:sectionName, section:pointList}); | |
| 282 | + layer.close(index); | |
| 283 | + layer.msg('路段截取成功，请选择下一个路段的终点'); | |
| 284 | + mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 285 | + var tbodyHtml = template('section_list',{list : sectionList}); | |
| 286 | + // 截取路段 | |
| 287 | + $('#section_table tbody').html(tbodyHtml); | |
| 288 | + pointIndex++; | |
| 289 | + }); | |
| 290 | + } | |
| 291 | + BasicMap.setIsCutSection(true); | |
| 292 | + } | |
| 293 | + var markerMenu=new BMap.ContextMenu(); | |
| 294 | + markerMenu.addItem(new BMap.MenuItem('切路段',editSection.bind(polyUpline01))); | |
| 295 | + polyUpline01.addContextMenu(markerMenu); | |
| 296 | + | |
| 297 | + | |
| 298 | + var PanOptions_ ={noAnimation :true}; | |
| 299 | + mapBValue.reset(); | |
| 300 | + mapBValue.panTo(polyline_center,PanOptions_); | |
| 301 | + mapBValue.panBy(500,-510,PanOptions_); | |
| 302 | + mapBValue.setZoom(14); | |
| 303 | + }, | |
| 304 | + // 删除点刷新cutSectionTable | |
| 305 | + refreshCutSectionTable : function() { | |
| 306 | + var tbodyHtml = template('section_list',{list : sectionList}); | |
| 307 | + $('#section_table tbody').html(tbodyHtml); | |
| 308 | + }, | |
| 309 | + // 删除点刷新覆盖物 | |
| 310 | + deleteCutSectionPoint : function(point) { | |
| 311 | + var lng = point.lng; | |
| 312 | + var lat = point.lat; | |
| 313 | + var allOverlay = mapBValue.getOverlays(); | |
| 314 | + // 删除最后一个点 | |
| 315 | + for (var i = 0; i < allOverlay.length -1; i++){ | |
| 316 | + if(allOverlay[i].isFlag) { | |
| 317 | + if(allOverlay[i].point.lng == lng && allOverlay[i].point.lat == lat){ | |
| 318 | + mapBValue.removeOverlay(allOverlay[i]); | |
| 319 | + break; | |
| 320 | + } | |
| 321 | + } | |
| 322 | + } | |
| 323 | + }, | |
| 324 | + /** 在地图上画点 @param：<point_center：中心坐标点> */ | |
| 325 | + drawingUpStationPoint : function(point_center,stationName,s) { | |
| 326 | + | |
| 327 | + // 自定义标注物图片 | |
| 328 | + var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/gjzd.png',new BMap.Size(10, 10)); | |
| 329 | + | |
| 330 | + var html2 = '<div style="position: absolute; margin: 0pt; padding: 0pt; width: 160px; height: 26px; left: -10px; top: -35px; overflow: hidden;">' | |
| 331 | + + '<img class="rm3_image" style="border:none;left:0px; top:0px; position:absolute;" src="/pages/base/stationroute/css/img/back160.png">' | |
| 332 | + + '</div>' | |
| 333 | + + '<label class=" BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: inline; cursor: inherit; border: 0px none; padding: 2px 1px 1px; white-space: nowrap; font: 12px arial,simsun; z-index: 80; color: rgb(255, 102, 0); left: 15px; top: -35px;"><span style="float: left; color: #fdfdfd; margin-left: -22px; font-size: 6px;">'+ s+'</span>'+ stationName+'</label>'; | |
| 334 | + | |
| 335 | + | |
| 336 | + var myRichMarker1 = new BMapLib.RichMarker(html2, point_center,{ | |
| 337 | + "anchor" : new BMap.Size(-10,8), | |
| 338 | + "enableDragging" : true}); | |
| 339 | + | |
| 340 | + | |
| 341 | + myRichMarker1.disableDragging(); | |
| 342 | + mapBValue.addOverlay(myRichMarker1); | |
| 343 | + | |
| 344 | + | |
| 345 | + // 创建标注物 | |
| 346 | + marker = new BMap.Marker(point_center,{icon : icon_target}); | |
| 347 | + | |
| 348 | + // 允许覆盖物在map.clearOverlays方法中被清除。 | |
| 349 | + marker.enableMassClear(); | |
| 350 | + | |
| 351 | + mapBValue.addOverlay(marker); | |
| 352 | + }, | |
| 353 | + | |
| 354 | + // 根据站点坐标匹配库中的公交站点（手动规划） | |
| 355 | + stationsPointsToLibraryPoint : function(arra,callback) { | |
| 356 | + // 获取长度 | |
| 357 | + var len = arra.length; | |
| 358 | + var station = {}; | |
| 359 | + var stationList = []; | |
| 360 | + (function(){ | |
| 361 | + if (!arguments.callee.count) { | |
| 362 | + arguments.callee.count = 0; | |
| 363 | + } | |
| 364 | + arguments.callee.count++; | |
| 365 | + var index = parseInt(arguments.callee.count) - 1; | |
| 366 | + if (index >= len) { | |
| 367 | + callback && callback(stationList); | |
| 368 | + return ; | |
| 369 | + } | |
| 370 | + var f = arguments.callee; | |
| 371 | + station = arra[index]; | |
| 372 | + if(arra[index].name!=''){ | |
| 373 | + | |
| 374 | + $.get('/station/matchStation',station,function(resultStation) { | |
| 375 | + stationList.push({name:resultStation.name ,wgs:arra[index].wgs,potion:{lng:resultStation.potion_lng, lat:resultStation.potion_lat}, isHave:resultStation.isHave , id:resultStation.id}); | |
| 376 | + f(); | |
| 377 | + }); | |
| 378 | + }else { | |
| 379 | + f(); | |
| 380 | + } | |
| 381 | + })() | |
| 382 | + }, | |
| 383 | + clearMarkAndOverlays : function() { | |
| 384 | + | |
| 385 | + // 清楚地图覆盖物 | |
| 386 | + mapBValue.clearOverlays(); | |
| 387 | + | |
| 388 | + mapBValue.removeOverlay(); | |
| 389 | + | |
| 390 | + } | |
| 391 | + | |
| 392 | + } | |
| 393 | + | |
| 394 | + return Bmap; | |
| 395 | + | |
| 396 | 396 | }(); |
| 397 | 397 | \ No newline at end of file | ... | ... |
src/main/resources/static/pages/excep/js/outbound-map.js
| 1 | -/** | |
| 2 | - * 百度地图 | |
| 3 | - * | |
| 4 | - * - - - - - -》init：地图初始化 | |
| 5 | - * | |
| 6 | - * - - - - - -》lineInfoPanl：从百度地图抓去站点与路段数据 | |
| 7 | - * | |
| 8 | - * - - - - - -》getDistanceAndDuration：获取距离与时间 | |
| 9 | - * | |
| 10 | - * - - - - - -》pointsPolygon：地图画多边行 | |
| 11 | - * | |
| 12 | - * - - - - - -》pointsCircle：画圆 | |
| 13 | - * | |
| 14 | - * - - - - - -》localSearchFromAdreesToPoint：根据地理名称获取百度经纬度坐标 | |
| 15 | - * | |
| 16 | - * - - - - - -》drawingUpline：在地图上画出上行线路走向 | |
| 17 | - * | |
| 18 | - * - - - - - -》stationsNameToPoints：站点名称获取百度坐标（手动规划） | |
| 19 | - * | |
| 20 | - * - - - - - -》getDistanceAndTotime：根据坐标点获取两点之间的时间与距离（手动规划） | |
| 21 | - * | |
| 22 | - * - - - - - -》getSectionListPlonly：根据坐标点获取两点之间的折线路段（手动规划） | |
| 23 | - */ | |
| 24 | - | |
| 25 | -var WorldsBMap = function () { | |
| 26 | - | |
| 27 | - /** WorldsBMap 全局变量定义 mapBValue：地图对象；polygon：多边形；polyUpline：走向折线；circle：圆 */ | |
| 28 | - var mapBValue = '';polygon='',polyUpline='',circle='',iseditStatus = false; | |
| 29 | - | |
| 30 | - var Bmap = { | |
| 31 | - | |
| 32 | - init : function() { | |
| 33 | - | |
| 34 | - // 设置中心点, | |
| 35 | - var CENTER_POINT = {lng : 121.528733,lat : 31.237425}; | |
| 36 | - | |
| 37 | - // 百度API Key | |
| 38 | - var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT'; | |
| 39 | - | |
| 40 | - // 初始化百度地图 | |
| 41 | - mapBValue = new BMap.Map("bmap_basic"); | |
| 42 | - | |
| 43 | - //中心点和缩放级别 | |
| 44 | - mapBValue.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat), 15); | |
| 45 | - | |
| 46 | - //启用地图拖拽事件，默认启用(可不写) | |
| 47 | - mapBValue.enableDragging(); | |
| 48 | - | |
| 49 | - //启用地图滚轮放大缩小 | |
| 50 | - mapBValue.enableScrollWheelZoom(); | |
| 51 | - | |
| 52 | - //禁用鼠标双击放大 | |
| 53 | - mapBValue.disableDoubleClickZoom(); | |
| 54 | - | |
| 55 | - //启用键盘上下左右键移动地图 | |
| 56 | - mapBValue.enableKeyboard(); | |
| 57 | - | |
| 58 | - return mapBValue; | |
| 59 | - }, | |
| 60 | - | |
| 61 | - /** 获取地图对象 @return 地图对象map */ | |
| 62 | - getmapBValue : function() { | |
| 63 | - | |
| 64 | - return mapBValue; | |
| 65 | - | |
| 66 | - }, | |
| 67 | - | |
| 68 | - getPolygon : function(){ | |
| 69 | - | |
| 70 | - return polygon; | |
| 71 | - }, | |
| 72 | - | |
| 73 | - getPolyUpline : function() { | |
| 74 | - | |
| 75 | - return polyUpline; | |
| 76 | - }, | |
| 77 | - | |
| 78 | - getCircle : function() { | |
| 79 | - | |
| 80 | - return circle; | |
| 81 | - }, | |
| 82 | - | |
| 83 | - getIsEditStatus : function() { | |
| 84 | - return iseditStatus; | |
| 85 | - }, | |
| 86 | - | |
| 87 | - setIsEditStatus : function(v) { | |
| 88 | - iseditStatus = v ; | |
| 89 | - }, | |
| 90 | - | |
| 91 | - initDrawingManager: function(map,styleOptions) { | |
| 92 | - | |
| 93 | - }, | |
| 94 | - | |
| 95 | - getDrawingManagerObj : function() { | |
| 96 | - | |
| 97 | - return drawingManagerInitV; | |
| 98 | - }, | |
| 99 | - | |
| 100 | - // 从百度地图抓去站点与路段数据 | |
| 101 | - lineInfoPanl : function(lineNameValue,i,cb) { | |
| 102 | - | |
| 103 | - /** 根据线路名称与方向从百度地图获取站点与路段 @param lineNameValue：线路名称；i：方向<0：上行；1：下行> */ | |
| 104 | - WorldsBMap.getBmapStationNames(lineNameValue,i,function(BusLine){ | |
| 105 | - | |
| 106 | - return cb && cb(BusLine); | |
| 107 | - | |
| 108 | - }); | |
| 109 | - | |
| 110 | - }, | |
| 111 | - | |
| 112 | - /** 获取距离与时间 @param <points：坐标点集合> */ | |
| 113 | - getDistanceAndDuration : function(points,callback){ | |
| 114 | - | |
| 115 | - // 获取长度 | |
| 116 | - var len = points.length; | |
| 117 | - | |
| 118 | - (function(){ | |
| 119 | - | |
| 120 | - if (!arguments.callee.count) { | |
| 121 | - | |
| 122 | - arguments.callee.count = 0; | |
| 123 | - | |
| 124 | - } | |
| 125 | - | |
| 126 | - arguments.callee.count++; | |
| 127 | - | |
| 128 | - var index = parseInt(arguments.callee.count) - 1; | |
| 129 | - | |
| 130 | - if (index >= len-1) { | |
| 131 | - | |
| 132 | - callback && callback(points); | |
| 133 | - | |
| 134 | - return; | |
| 135 | - } | |
| 136 | - | |
| 137 | - // 当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。(当前正在执行的函数。) | |
| 138 | - var f = arguments.callee; | |
| 139 | - | |
| 140 | - // 起点坐标 <坐标格式：40.056878,116.30815> | |
| 141 | - var origin = points[index].potion.lat + ',' + points[index].potion.lng; | |
| 142 | - | |
| 143 | - // 终点坐标 <坐标格式：40.056878,116.30815> | |
| 144 | - var destination = points[index+1].potion.lat + ',' + points[index+1].potion.lng; | |
| 145 | - | |
| 146 | - var region = '上海'; | |
| 147 | - | |
| 148 | - var origin_region = '上海'; | |
| 149 | - | |
| 150 | - var destination_region = '上海'; | |
| 151 | - | |
| 152 | - var output = 'json'; | |
| 153 | - | |
| 154 | - var ak_My = 'wjlITmXeCek5MxyU3ZUBkTeU8B0o0npk'; | |
| 155 | - | |
| 156 | - /** | |
| 157 | - * origin：起点名称或经纬度； | |
| 158 | - * | |
| 159 | - * destination：终点名称或经纬度； | |
| 160 | - * | |
| 161 | - * origin_region：起始点所在城市，驾车导航时必填。 | |
| 162 | - * | |
| 163 | - * destination_region：终点所在城市，驾车导航时必填。 | |
| 164 | - * | |
| 165 | - * output :表示输出类型，可设置为xml或json，默认为xml。 | |
| 166 | - * | |
| 167 | - **/ | |
| 168 | - var paramsB = {origin:origin,destination:destination,region:region,origin_region:origin_region,destination_region:destination_region,output:output,ak:ak_My}; | |
| 169 | - | |
| 170 | - /** @description :未认证开发者默认配额为：2000次/天。 */ | |
| 171 | - $.ajax({ | |
| 172 | - | |
| 173 | - // 百度地图根据坐标获取两点之间的时间与距离 | |
| 174 | - url: 'http://api.map.baidu.com/direction/v1?mode=transit', | |
| 175 | - | |
| 176 | - data: paramsB, | |
| 177 | - | |
| 178 | - dataType: 'jsonp', | |
| 179 | - | |
| 180 | - success: function(r){ | |
| 181 | - | |
| 182 | - if(r) { | |
| 183 | - | |
| 184 | - if(r.message=='ok') { | |
| 185 | - | |
| 186 | - if(r.result.taxi==null) { | |
| 187 | - | |
| 188 | - // 获取距离(单位：米) | |
| 189 | - points[index+1].distance = 0; | |
| 190 | - | |
| 191 | - // 获取时间(单位：秒) | |
| 192 | - points[index+1].duration = 0; | |
| 193 | - | |
| 194 | - }else { | |
| 195 | - | |
| 196 | - // 获取距离(单位：米) | |
| 197 | - points[index+1].distance = r.result.taxi.distance; | |
| 198 | - | |
| 199 | - // 获取时间(单位：秒) | |
| 200 | - points[index+1].duration = r.result.taxi.duration; | |
| 201 | - | |
| 202 | - } | |
| 203 | - | |
| 204 | - | |
| 205 | - } | |
| 206 | - | |
| 207 | - } | |
| 208 | - | |
| 209 | - f(); | |
| 210 | - } | |
| 211 | - }); | |
| 212 | - | |
| 213 | - })(); | |
| 214 | - | |
| 215 | - }, | |
| 216 | - | |
| 217 | - // 地图画多边形 | |
| 218 | - pointsPolygon : function(objStation) { | |
| 219 | - | |
| 220 | - // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 221 | - mapBValue.setZoom(15); | |
| 222 | - | |
| 223 | - // 如果不为空 | |
| 224 | - if(objStation) { | |
| 225 | - | |
| 226 | - // 获取中心点坐标字符串 | |
| 227 | - var testpointStr = objStation.stationBJwpoints; | |
| 228 | - | |
| 229 | - // 按空格切割中心点坐标字符串 | |
| 230 | - var BJwpointsPolygon = testpointStr.split(' '); | |
| 231 | - | |
| 232 | - // 中心点坐标 | |
| 233 | - var pointPolygon = new BMap.Point(BJwpointsPolygon[0], BJwpointsPolygon[1]); | |
| 234 | - | |
| 235 | - // 获取多边形坐标字符串 | |
| 236 | - var stationBPolygonGrid = objStation.stationBPolygonGrid; | |
| 237 | - | |
| 238 | - // 截取多边形坐标字符串 | |
| 239 | - var stationBPolygonGridStr = stationBPolygonGrid.substring(9,stationBPolygonGrid.length-2); | |
| 240 | - | |
| 241 | - // 按逗号切割 | |
| 242 | - var pointPolygonArray = stationBPolygonGridStr.split(','); | |
| 243 | - | |
| 244 | - // 多边形坐标集合 | |
| 245 | - var polygonP = []; | |
| 246 | - | |
| 247 | - for(var v = 0;v<pointPolygonArray.length;v++) { | |
| 248 | - | |
| 249 | - polygonP.push(new BMap.Point(pointPolygonArray[v].split(" ")[0],pointPolygonArray[v].split(" ")[1])); | |
| 250 | - | |
| 251 | - } | |
| 252 | - | |
| 253 | - // 画多边形 | |
| 254 | - polygon = new BMap.Polygon(polygonP, { | |
| 255 | - | |
| 256 | - // 线条显色 | |
| 257 | - strokeColor : "blue", | |
| 258 | - | |
| 259 | - // 边线的宽度，以像素为单位。 | |
| 260 | - strokeWeight : 2, | |
| 261 | - | |
| 262 | - // 边线透明度，取值范围0 - 1。 | |
| 263 | - strokeOpacity : 0.5 | |
| 264 | - }); | |
| 265 | - | |
| 266 | - // 增加地图覆盖物多边形 | |
| 267 | - mapBValue.addOverlay(polygon); | |
| 268 | - | |
| 269 | - // 信息窗口属性 | |
| 270 | - var opts_polygon = { | |
| 271 | - | |
| 272 | - // 信息窗口宽度 | |
| 273 | - width : 200, | |
| 274 | - | |
| 275 | - // 信息窗口高度 | |
| 276 | - height : 400, | |
| 277 | - | |
| 278 | - // 信息窗位置偏移值。 | |
| 279 | - offset: new BMap.Size(500,20), | |
| 280 | - | |
| 281 | - //标题 | |
| 282 | - title : '<h4 style="color:#FFFFFF">'+objStation.stationStationName+'站详情</h4>', | |
| 283 | - | |
| 284 | - //设置不允许信窗发送短息 | |
| 285 | - enableMessage : false, | |
| 286 | - | |
| 287 | - //是否开启点击地图关闭信息窗口 | |
| 288 | - enableCloseOnClick : false | |
| 289 | - }; | |
| 290 | - | |
| 291 | - var markTypeStr = ''; | |
| 292 | - | |
| 293 | - if(objStation.stationRouteStationMark=='B') { | |
| 294 | - | |
| 295 | - markTypeStr='起点站'; | |
| 296 | - | |
| 297 | - }else if(objStation.stationRouteStationMark=='Z') { | |
| 298 | - | |
| 299 | - markTypeStr ='中途站'; | |
| 300 | - | |
| 301 | - | |
| 302 | - }else if(objStation.stationRouteStationMark=='E') { | |
| 303 | - | |
| 304 | - markTypeStr='终点站'; | |
| 305 | - | |
| 306 | - } | |
| 307 | - | |
| 308 | - var htm = '<HR style="border:1 dashed #987cb9" width="100%" color=#987cb9 SIZE=1>'+ | |
| 309 | - '<span style="color:#DDD;font-size: 15px;">站点名称：' + objStation.stationStationName + '</span>' + | |
| 310 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">站点编码：' + objStation.stationStationCod + '</span>' + | |
| 311 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">站点序号：' + objStation.stationRouteStationRouteCode + '</span>' + | |
| 312 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">站点类型：' + markTypeStr + '</span>' + | |
| 313 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">纬度坐标：' + objStation.stationBJwpoints + '</span>' + | |
| 314 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">到站时间：' + objStation.stationRouteToTime + ' 分钟</span>' + | |
| 315 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">到站距离：' + objStation.stationRouteDistances + ' 公里</span>' + | |
| 316 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">范围半径：' + objStation.stationRadius + '</span>' + | |
| 317 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">版本 号：' + objStation.stationRouteVersions + '</span>' + | |
| 318 | - '<span class="help-block" style="width: 100%;font-size: 15px;;color:#DDD;'+ | |
| 319 | - 'overflow: hidden; white-space: nowrap; text-overflow: ellipsis; " title="'+ | |
| 320 | - objStation.stationRouteDescriptions +'" >说明/描述：' + objStation.stationRouteDescriptions + '</span>' ; | |
| 321 | - | |
| 322 | - // 创建信息窗口 | |
| 323 | - var infoWindow_target = new BMap.InfoWindow(htm, opts_polygon); | |
| 324 | - // 自定义标注物图片 | |
| 325 | - var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/cz.png',new BMap.Size(20, 20)); | |
| 326 | - | |
| 327 | - // 创建点 | |
| 328 | - marker = new BMap.Marker(pointPolygon,{icon : icon_target}); | |
| 329 | - | |
| 330 | - // 把标注添物加到地图上 | |
| 331 | - mapBValue.addOverlay(marker); | |
| 332 | - | |
| 333 | - // 是否在平移过程中禁止动画。（自1.2新增） | |
| 334 | - var PanOptions_ ={noAnimation :true}; | |
| 335 | - | |
| 336 | - // 将地图的中心点更改为给定的点。 | |
| 337 | - mapBValue.panTo(pointPolygon,PanOptions_); | |
| 338 | - | |
| 339 | - // 将地图在水平位置上移动x像素，垂直位置上移动y像素。 | |
| 340 | - mapBValue.panBy(10,-150,PanOptions_); | |
| 341 | - | |
| 342 | - //开启信息窗口 | |
| 343 | - mapBValue.openInfoWindow(infoWindow_target,pointPolygon); | |
| 344 | - | |
| 345 | - } | |
| 346 | - | |
| 347 | - }, | |
| 348 | - | |
| 349 | - editPolyUpline : function() { | |
| 350 | - // 禁止覆盖物在map.clearOverlays方法中被清除。(自 1.1 新增) | |
| 351 | - polyUpline.disableMassClear(); | |
| 352 | - WorldsBMap.clearMarkAndOverlays(); | |
| 353 | - // 允许覆盖物在map.clearOverlays方法中被清除。(自 1.1 新增) | |
| 354 | - polyUpline.enableMassClear(); | |
| 355 | - // 开启线路编辑 | |
| 356 | - polyUpline.enableEditing(); | |
| 357 | - // 添加双击折线保存事件 | |
| 358 | - polyUpline.addEventListener('dblclick',function(e) { | |
| 359 | - // 关闭 | |
| 360 | - layer.closeAll(); | |
| 361 | - polyUpline.disableEditing(); | |
| 362 | - // 获取折线坐标集合 | |
| 363 | - var editPloyLineArray = polyUpline.getPath(); | |
| 364 | - EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 365 | - polyUpline= ''; | |
| 366 | - // 加载修改路段弹出层mobal页面 | |
| 367 | - $.get('editsection.html', function(m){ | |
| 368 | - $(pjaxContainer).append(m); | |
| 369 | - $('#edit_section_mobal').trigger('editSectionMobal_show', [WorldsBMap,GetAjaxData,EditSectionObj,PublicFunctions]); | |
| 370 | - }); | |
| 371 | - }); | |
| 372 | - }, | |
| 373 | - | |
| 374 | - // 画圆 | |
| 375 | - pointsCircle : function(objStation) { | |
| 376 | - | |
| 377 | - // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 378 | - mapBValue.setZoom(16); | |
| 379 | - | |
| 380 | - if(objStation) { | |
| 381 | - | |
| 382 | - // 清除地图覆盖物 | |
| 383 | - mapBValue.clearOverlays(); | |
| 384 | - | |
| 385 | - // 获取中心坐标点字符串分割 | |
| 386 | - var BJwpoints = objStation.stationBJwpoints.split(' '); | |
| 387 | - | |
| 388 | - // 中心坐标点 | |
| 389 | - var point = new BMap.Point(BJwpoints[0], BJwpoints[1]); | |
| 390 | - | |
| 391 | - //创建圆 | |
| 392 | - circle = new BMap.Circle(point,objStation.stationRadius,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); | |
| 393 | - | |
| 394 | - // 允许覆盖物在map.clearOverlays方法中被清除 | |
| 395 | - circle.enableMassClear(); | |
| 396 | - | |
| 397 | - // 百度地图添加覆盖物圆 | |
| 398 | - mapBValue.addOverlay(circle); | |
| 399 | - | |
| 400 | - // 信息窗口参数属性 | |
| 401 | - var opts = { | |
| 402 | - | |
| 403 | - // 信息窗口宽度 | |
| 404 | - width : 200, | |
| 405 | - | |
| 406 | - // 信息窗口高度 | |
| 407 | - height : 450, | |
| 408 | - | |
| 409 | - // 信息窗位置偏移值。 | |
| 410 | - offset: new BMap.Size(500,120), | |
| 411 | - | |
| 412 | - //标题 | |
| 413 | - title : '<h4 style="color:#FFFFFF">'+objStation.stationStationName+'站详情</h4>', | |
| 414 | - | |
| 415 | - //设置不允许信窗发送短息 | |
| 416 | - enableMessage : false, | |
| 417 | - | |
| 418 | - //是否开启点击地图关闭信息窗口 | |
| 419 | - enableCloseOnClick : false, | |
| 420 | - | |
| 421 | - // 是否开启信息窗口打开时地图自动移动（默认开启）。(自 1.1 新增) | |
| 422 | - enableAutoPan:false | |
| 423 | - }; | |
| 424 | - | |
| 425 | - var markTypeStr = ''; | |
| 426 | - | |
| 427 | - if(objStation.stationRouteStationMark=='B') { | |
| 428 | - | |
| 429 | - markTypeStr='起点站'; | |
| 430 | - | |
| 431 | - }else if(objStation.stationRouteStationMark=='Z') { | |
| 432 | - | |
| 433 | - markTypeStr ='中途站'; | |
| 434 | - | |
| 435 | - | |
| 436 | - }else if(objStation.stationRouteStationMark=='E') { | |
| 437 | - | |
| 438 | - markTypeStr='终点站'; | |
| 439 | - | |
| 440 | - } | |
| 441 | - | |
| 442 | - var htm = '<HR style="border:1 dashed #987cb9" width="100%" color=#987cb9 SIZE=1>'+ | |
| 443 | - '<span style="color:#DDD;font-size: 15px;">站点名称：' + objStation.stationStationName + '</span>' + | |
| 444 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">站点编码：' + objStation.stationStationCod + '</span>' + | |
| 445 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">站点序号：' + objStation.stationRouteStationRouteCode + '</span>' + | |
| 446 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">站点类型：' + markTypeStr + '</span>' + | |
| 447 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">纬度坐标：' + objStation.stationBJwpoints + '</span>' + | |
| 448 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">到站时间：' + objStation.stationRouteToTime + ' 分钟</span>' + | |
| 449 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">到站距离：' + objStation.stationRouteDistances + ' 公里</span>' + | |
| 450 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">范围半径：' + objStation.stationRadius + '</span>' + | |
| 451 | - '<span class="help-block" style="color:#DDD;font-size: 15px;">版本 号：' + objStation.stationRouteVersions + '</span>' + | |
| 452 | - '<span class="help-block" style="width: 100%;font-size: 15px;;color:#DDD;'+ | |
| 453 | - 'overflow: hidden; white-space: nowrap; text-overflow: ellipsis; " title="'+ | |
| 454 | - objStation.stationRouteDescriptions +'" >说明/描述：' + objStation.stationRouteDescriptions + '</span>' ; | |
| 455 | - | |
| 456 | - // 创建信息窗口 | |
| 457 | - var infoWindow_target = new BMap.InfoWindow(htm, opts); | |
| 458 | - // 自定义标注物图片 | |
| 459 | - var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/cz.png',new BMap.Size(20, 20)); | |
| 460 | - | |
| 461 | - // 创建点 | |
| 462 | - marker = new BMap.Marker(point,{icon : icon_target}); | |
| 463 | - | |
| 464 | - // 把标注添物加到地图上 | |
| 465 | - mapBValue.addOverlay(marker); | |
| 466 | - | |
| 467 | - setTimeout(function(){ | |
| 468 | - //开启信息窗口 | |
| 469 | - marker.openInfoWindow(infoWindow_target,point); | |
| 470 | - | |
| 471 | - },100); | |
| 472 | - | |
| 473 | - // 是否在平移过程中禁止动画。（自1.2新增） | |
| 474 | - var PanOptions_ ={noAnimation :true}; | |
| 475 | - | |
| 476 | - // 将地图的中心点更改为给定的点。 | |
| 477 | - mapBValue.panTo(point,PanOptions_); | |
| 478 | - | |
| 479 | - mapBValue.panBy(10,-200,PanOptions_); | |
| 480 | - | |
| 481 | - // 添加标志物监听事件 | |
| 482 | - marker.addEventListener("click",function() { | |
| 483 | - | |
| 484 | - //开启信息窗口 | |
| 485 | - marker.openInfoWindow(infoWindow_target,point); | |
| 486 | - | |
| 487 | - }); | |
| 488 | - | |
| 489 | - } | |
| 490 | - | |
| 491 | - }, | |
| 492 | - | |
| 493 | - // 根据地理名称获取百度经纬度坐标 | |
| 494 | - localSearchFromAdreesToPoint: function(Address,callback) { | |
| 495 | - | |
| 496 | - // 创建一个搜索类实例 | |
| 497 | - var localSearch = new BMap.LocalSearch(mapBValue); | |
| 498 | - | |
| 499 | - // 检索完成后的回调函数。 | |
| 500 | - localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 501 | - | |
| 502 | - var resultPoints = ''; | |
| 503 | - | |
| 504 | - if(searchResult) { | |
| 505 | - | |
| 506 | - // 返回索引指定的结果。索引0表示第1条结果 | |
| 507 | - var poi = searchResult.getPoi(0); | |
| 508 | - | |
| 509 | - if(poi) { | |
| 510 | - | |
| 511 | - //获取经度和纬度 | |
| 512 | - resultPoints = poi.point.lng + ' ' + poi.point.lat; | |
| 513 | - | |
| 514 | - callback && callback(resultPoints); | |
| 515 | - | |
| 516 | - }else { | |
| 517 | - | |
| 518 | - callback && callback(false); | |
| 519 | - | |
| 520 | - } | |
| 521 | - | |
| 522 | - }else { | |
| 523 | - | |
| 524 | - callback && callback(false); | |
| 525 | - } | |
| 526 | - | |
| 527 | - }); | |
| 528 | - | |
| 529 | - // 根据检索词发起检索。 | |
| 530 | - localSearch.search(Address); | |
| 531 | - | |
| 532 | - }, | |
| 533 | - | |
| 534 | - // 编辑图形 | |
| 535 | - editShapes : function(editStationName,stationShapesTypeV,mindex) { | |
| 536 | - | |
| 537 | - // 关闭信息窗口 | |
| 538 | - marker.closeInfoWindow(); | |
| 539 | - | |
| 540 | - // 清除marker | |
| 541 | - mapBValue.removeOverlay(marker); | |
| 542 | - | |
| 543 | - // 编辑圆 | |
| 544 | - if(stationShapesTypeV =='r') { | |
| 545 | - | |
| 546 | - // 开启编辑功能 | |
| 547 | - circle.enableEditing(); | |
| 548 | - | |
| 549 | - // 编辑圆监听事件 | |
| 550 | - circle.addEventListener('dblclick',function() { | |
| 551 | - | |
| 552 | - // 关闭提示弹出层 | |
| 553 | - layer.close(mindex); | |
| 554 | - | |
| 555 | - // 返回圆形的半径，单位为米。 | |
| 556 | - var newRadius = circle.getRadius(); | |
| 557 | - | |
| 558 | - // 返回圆形的中心点坐标。 | |
| 559 | - var newCenter = circle.getCenter().lng + ' ' + circle.getCenter().lat; | |
| 560 | - | |
| 561 | - var centre_New = [{potion:{lng:circle.getCenter().lng,lat:circle.getCenter().lat}}]; | |
| 562 | - | |
| 563 | - /** 设置修改站点集合对象站点中心点百度坐标属性值 @param：<bJwpoints：中心点百度坐标） */ | |
| 564 | - EditStationObj.setEitdStationBJwpoints(newCenter); | |
| 565 | - | |
| 566 | - /** 设置修改站点集合对象范围图形类型属性值 @param：<shapesType：范围图形类型） */ | |
| 567 | - EditStationObj.setEitdStationShapesType('r'); | |
| 568 | - | |
| 569 | - /** 设置修改站点集合对象圆形半径属性值 @param：<radius：圆形半径） */ | |
| 570 | - EditStationObj.setEitdStationRadius(Math.round(newRadius)); | |
| 571 | - | |
| 572 | - /** 设置修改站点集合对象图形百度坐标集合属性值 @param：<bPolygonGrid：图形百度坐标集合） */ | |
| 573 | - EditStationObj.setEitdBPolygonGrid(''); | |
| 574 | - | |
| 575 | - // 加载编辑页面 | |
| 576 | - $.get('edit.html', function(m){ | |
| 577 | - | |
| 578 | - $(pjaxContainer).append(m); | |
| 579 | - | |
| 580 | - $('#edit_station_mobal').trigger('editSelectMobal_show', [WorldsBMap,GetAjaxData,EditStationObj,LineObj,PublicFunctions]); | |
| 581 | - | |
| 582 | - }); | |
| 583 | - | |
| 584 | - }); | |
| 585 | - | |
| 586 | - // 编辑多变行 | |
| 587 | - }else if(stationShapesTypeV =='d') { | |
| 588 | - | |
| 589 | - // 开启编辑功能(自 1.1 新增) | |
| 590 | - polygon.enableEditing(); | |
| 591 | - | |
| 592 | - // 添加多变行编辑事件 | |
| 593 | - polygon.addEventListener('dblclick',function(e) { | |
| 594 | - | |
| 595 | - // 获取编辑的多边形对象 | |
| 596 | - var edit_pointE = polygon; | |
| 597 | - | |
| 598 | - var edit_bPloygonGrid = ""; | |
| 599 | - | |
| 600 | - var editPolyGonLen_ = edit_pointE.getPath().length; | |
| 601 | - | |
| 602 | - for(var k =0;k<editPolyGonLen_;k++) { | |
| 603 | - | |
| 604 | - if(k==0) { | |
| 605 | - | |
| 606 | - edit_bPloygonGrid = edit_pointE.getPath()[k].lng + ' ' + edit_pointE.getPath()[k].lat; | |
| 607 | - | |
| 608 | - }else { | |
| 609 | - | |
| 610 | - edit_bPloygonGrid = edit_bPloygonGrid + ',' + edit_pointE.getPath()[k].lng + ' ' + edit_pointE.getPath()[k].lat; | |
| 611 | - | |
| 612 | - } | |
| 613 | - | |
| 614 | - } | |
| 615 | - | |
| 616 | - edit_bPloygonGrid = edit_bPloygonGrid + ',' + edit_pointE.getPath()[0].lng + ' ' + edit_pointE.getPath()[0].lat; | |
| 617 | - | |
| 618 | - // 多边形中心点 | |
| 619 | - var centre_points = edit_pointE.getBounds().getCenter().lng + ' ' + edit_pointE.getBounds().getCenter().lat; | |
| 620 | - | |
| 621 | - /** 设置修改站点集合对象站点中心点百度坐标属性值 @param：<bJwpoints：中心点百度坐标） */ | |
| 622 | - EditStationObj.setEitdStationBJwpoints(centre_points); | |
| 623 | - | |
| 624 | - /** 设置修改站点集合对象范围图形类型属性值 @param：<shapesType：范围图形类型） */ | |
| 625 | - EditStationObj.setEitdStationShapesType('d'); | |
| 626 | - | |
| 627 | - /** 设置修改站点集合对象圆形半径属性值 @param：<radius：圆形半径） */ | |
| 628 | - EditStationObj.setEitdStationRadius(''); | |
| 629 | - | |
| 630 | - /** 设置修改站点集合对象图形百度坐标集合属性值 @param：<bPolygonGrid：图形百度坐标集合） */ | |
| 631 | - EditStationObj.setEitdBPolygonGrid(edit_bPloygonGrid); | |
| 632 | - | |
| 633 | - $.get('edit.html', function(m){ | |
| 634 | - | |
| 635 | - $(pjaxContainer).append(m); | |
| 636 | - | |
| 637 | - $('#edit_station_mobal').trigger('editSelectMobal_show', [WorldsBMap,GetAjaxData,EditStationObj,LineObj,PublicFunctions]); | |
| 638 | - | |
| 639 | - }); | |
| 640 | - | |
| 641 | - }); | |
| 642 | - | |
| 643 | - } | |
| 644 | - | |
| 645 | - }, | |
| 646 | - | |
| 647 | - // 在地图上画出上行线路走向 | |
| 648 | - drawingUpline : function (polylineArray,polyline_center,data) { | |
| 649 | - /*WorldsBMap.clearMarkAndOverlays();*/ | |
| 650 | - polyUpline = ''; | |
| 651 | - // 创建线路走向 | |
| 652 | - polyUpline = new BMap.Polyline(polylineArray, {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5}); | |
| 653 | - // polyUpline.data = data; | |
| 654 | - // 把折线添加到地图上 | |
| 655 | - mapBValue.addOverlay(polyUpline); | |
| 656 | - /*var ceter_index = Math.round(resultdata.length / 2); | |
| 657 | - | |
| 658 | - var ceterPointsStr = resultdata[ceter_index].bJwpoints; | |
| 659 | - | |
| 660 | - var ceterPointsArray = ceterPointsStr.split(' '); | |
| 661 | - | |
| 662 | - var polyline_center = new BMap.Point(ceterPointsArray[0],ceterPointsArray[1]);*/ | |
| 663 | - var PanOptions_ ={noAnimation :true}; | |
| 664 | - mapBValue.reset(); | |
| 665 | - mapBValue.panTo(polyline_center,PanOptions_); | |
| 666 | - mapBValue.panBy(500,-510,PanOptions_); | |
| 667 | - mapBValue.setZoom(14); | |
| 668 | - }, | |
| 669 | - | |
| 670 | - //在地图上画出公交位置。 | |
| 671 | - drawingBus :function(lon,lat){ | |
| 672 | - var point = new BMap.Point(lon,lat); | |
| 673 | - var myIcon = new BMap.Icon("/pages/excep/img/bus.png", new BMap.Size(300,157)); | |
| 674 | - var marker = new BMap.Marker(point,{icon:myIcon}); // 创建标注 | |
| 675 | - mapBValue.addOverlay(marker); | |
| 676 | - marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 | |
| 677 | - }, | |
| 678 | - | |
| 679 | - // 在地图上画出上行线路走向 | |
| 680 | - drawingUpline01 : function (polylineArray,polyline_center,data) { | |
| 681 | - var polyUpline01 = 'polyline' + '_' + data.sectionrouteId; | |
| 682 | - // 创建线路走向 | |
| 683 | - polyUpline01 = new BMap.Polyline(polylineArray, {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5}); | |
| 684 | - polyUpline01.data = data; | |
| 685 | - // 把折线添加到地图上 | |
| 686 | - mapBValue.addOverlay(polyUpline01); | |
| 687 | - polyUpline01.addEventListener('click',function(e) { | |
| 688 | - if(WorldsBMap.getIsEditStatus()) { | |
| 689 | - layer.msg('请先保存正在编辑的路段信息...'); | |
| 690 | - return false; | |
| 691 | - } | |
| 692 | - polyUpline01.enableEditing(); | |
| 693 | - WorldsBMap.setIsEditStatus(true); | |
| 694 | - }); | |
| 695 | - // 添加双击折线保存事件 | |
| 696 | - polyUpline01.addEventListener('dblclick',function(e) { | |
| 697 | - WorldsBMap.setIsEditStatus(false); | |
| 698 | - // 关闭 | |
| 699 | - layer.closeAll(); | |
| 700 | - polyUpline01.disableEditing(); | |
| 701 | - EditSectionObj.setEitdSection(polyUpline01.data); | |
| 702 | - // 获取折线坐标集合 | |
| 703 | - var editPloyLineArray = polyUpline01.getPath(); | |
| 704 | - EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 705 | - // polyUpline= ''; | |
| 706 | - // 加载修改路段弹出层mobal页面 | |
| 707 | - $.get('editsection.html', function(m){ | |
| 708 | - $(pjaxContainer).append(m); | |
| 709 | - $('#edit_section_mobal').trigger('editSectionMobal_show', [WorldsBMap,GetAjaxData,EditSectionObj,PublicFunctions]); | |
| 710 | - }); | |
| 711 | - }); | |
| 712 | - var PanOptions_ ={noAnimation :true}; | |
| 713 | - mapBValue.reset(); | |
| 714 | - mapBValue.panTo(polyline_center,PanOptions_); | |
| 715 | - mapBValue.panBy(500,-510,PanOptions_); | |
| 716 | - mapBValue.setZoom(14); | |
| 717 | - }, | |
| 718 | - | |
| 719 | - /** 在地图上画点 @param：<point_center：中心坐标点> */ | |
| 720 | - drawingUpStationPoint : function(point_center,stationName,s) { | |
| 721 | - | |
| 722 | - // 自定义标注物图片 | |
| 723 | - var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/gjzd.png',new BMap.Size(10, 10)); | |
| 724 | - | |
| 725 | - var html2 = '<div style="position: absolute; margin: 0pt; padding: 0pt; width: 160px; height: 26px; left: -10px; top: -35px; overflow: hidden;">' | |
| 726 | - + '<img class="rm3_image" style="border:none;left:0px; top:0px; position:absolute;" src="/pages/base/stationroute/css/img/back160.png">' | |
| 727 | - + '</div>' | |
| 728 | - + '<label class=" BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: inline; cursor: inherit; border: 0px none; padding: 2px 1px 1px; white-space: nowrap; font: 12px arial,simsun; z-index: 80; color: rgb(255, 102, 0); left: 15px; top: -35px;"><span style="float: left; color: #fdfdfd; margin-left: -22px; font-size: 6px;">'+ s+'</span>'+ stationName+'</label>'; | |
| 729 | - | |
| 730 | - | |
| 731 | - var myRichMarker1 = new BMapLib.RichMarker(html2, point_center,{ | |
| 732 | - "anchor" : new BMap.Size(-10,8), | |
| 733 | - "enableDragging" : true}); | |
| 734 | - | |
| 735 | - | |
| 736 | - myRichMarker1.disableDragging(); | |
| 737 | - mapBValue.addOverlay(myRichMarker1); | |
| 738 | - | |
| 739 | - | |
| 740 | - // 创建标注物 | |
| 741 | - marker = new BMap.Marker(point_center,{icon : icon_target}); | |
| 742 | - | |
| 743 | - // 允许覆盖物在map.clearOverlays方法中被清除。 | |
| 744 | - marker.enableMassClear(); | |
| 745 | - | |
| 746 | - mapBValue.addOverlay(marker); | |
| 747 | - }, | |
| 748 | - | |
| 749 | - // 站点名称获取百度坐标（手动规划） | |
| 750 | - stationsNameToPoints : function(arra,callback) { | |
| 751 | - // 获取长度 | |
| 752 | - var len = arra.length; | |
| 753 | - var stationList = []; | |
| 754 | - (function(){ | |
| 755 | - if (!arguments.callee.count) { | |
| 756 | - arguments.callee.count = 0; | |
| 757 | - } | |
| 758 | - arguments.callee.count++; | |
| 759 | - var index = parseInt(arguments.callee.count) - 1; | |
| 760 | - if (index >= len) { | |
| 761 | - callback && callback(stationList); | |
| 762 | - return ; | |
| 763 | - } | |
| 764 | - var f = arguments.callee; | |
| 765 | - if(arra[index].name!=''){ | |
| 766 | - var localSearch = new BMap.LocalSearch(mapBValue); | |
| 767 | - localSearch.search(arra[index].name); | |
| 768 | - localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 769 | - var poi = searchResult.getPoi(0); | |
| 770 | - if(poi) { | |
| 771 | - stationList.push({name:arra[index].name.replace('公交车站',''),wgs:arra[index].wgs,potion:{lng:poi.point.lng,lat:poi.point.lat}}); | |
| 772 | - }else { | |
| 773 | - stationList.push({name:arra[index].name.replace('公交车站',''),wgs:arra[index].wgs,potion:{lng:arra[index].wgs.x,lat:arra[index].wgs.y}}); | |
| 774 | - } | |
| 775 | - f(); | |
| 776 | - }); | |
| 777 | - }else { | |
| 778 | - f(); | |
| 779 | - } | |
| 780 | - })(); | |
| 781 | - }, | |
| 782 | - | |
| 783 | - // 根据坐标点获取两点之间的时间与距离（手动规划） | |
| 784 | - getDistanceAndTotime : function(stationList,cb) { | |
| 785 | - | |
| 786 | - stationList[0].distance = ''; | |
| 787 | - | |
| 788 | - stationList[0].duration = ''; | |
| 789 | - | |
| 790 | - // var sectionList = []; | |
| 791 | - | |
| 792 | - // 获取长度 | |
| 793 | - var len = stationList.length; | |
| 794 | - | |
| 795 | - (function(){ | |
| 796 | - | |
| 797 | - if (!arguments.callee.count) { | |
| 798 | - | |
| 799 | - arguments.callee.count = 0; | |
| 800 | - | |
| 801 | - } | |
| 802 | - | |
| 803 | - arguments.callee.count++; | |
| 804 | - | |
| 805 | - var index = parseInt(arguments.callee.count) - 1; | |
| 806 | - | |
| 807 | - if (index >= len-1) { | |
| 808 | - | |
| 809 | - // cb && cb(stationList,sectionList); | |
| 810 | - cb && cb(stationList); | |
| 811 | - return; | |
| 812 | - } | |
| 813 | - | |
| 814 | - var f = arguments.callee; | |
| 815 | - | |
| 816 | - var poiOne = new BMap.Point(stationList[index].potion.lng,stationList[index].potion.lat); | |
| 817 | - | |
| 818 | - var poiTwo = new BMap.Point(stationList[index+1].potion.lng,stationList[index+1].potion.lat); | |
| 819 | - | |
| 820 | - var transit = new BMap.TransitRoute(mapBValue, {renderOptions: {map: mapBValue},onSearchComplete: searchComplete}); | |
| 821 | - | |
| 822 | - transit.search(poiOne,poiTwo); | |
| 823 | - | |
| 824 | - function searchComplete(results){ | |
| 825 | - | |
| 826 | - var plan = results.getPlan(0); | |
| 827 | - | |
| 828 | - if (transit.getStatus() != BMAP_STATUS_SUCCESS){ | |
| 829 | - | |
| 830 | - stationList[index+1].distance = ''; | |
| 831 | - | |
| 832 | - stationList[index+1].duration = ''; | |
| 833 | - | |
| 834 | - // sectionList.push({sectionName:stationList[index].name+stationList[index+1].name,points:''}); | |
| 835 | - | |
| 836 | - }else { | |
| 837 | - | |
| 838 | - stationList[index+1].distance = plan.getDistance(true); | |
| 839 | - | |
| 840 | - stationList[index+1].duration = plan.getDuration(true); | |
| 841 | - | |
| 842 | - // var line = plan.getRoute(0); | |
| 843 | - | |
| 844 | - // sectionList.push({sectionName:stationList[index].name+stationList[index+1].name,points:line.getPath()}); | |
| 845 | - | |
| 846 | - } | |
| 847 | - | |
| 848 | - f(); | |
| 849 | - } | |
| 850 | - | |
| 851 | - })(); | |
| 852 | - | |
| 853 | - }, | |
| 854 | - | |
| 855 | - // 根据坐标点获取两点之间的折线路段（手动规划） | |
| 856 | - getSectionListPlonly : function(stationsPoint,cb) { | |
| 857 | - | |
| 858 | - var len = stationsPoint.length; | |
| 859 | - | |
| 860 | - var sectionList = []; | |
| 861 | - | |
| 862 | - (function(){ | |
| 863 | - | |
| 864 | - if (!arguments.callee.count) { | |
| 865 | - | |
| 866 | - arguments.callee.count = 0; | |
| 867 | - | |
| 868 | - } | |
| 869 | - | |
| 870 | - arguments.callee.count++; | |
| 871 | - | |
| 872 | - var index = parseInt(arguments.callee.count) - 1; | |
| 873 | - | |
| 874 | - if (index >= len-1 ) { | |
| 875 | - | |
| 876 | - cb && cb(sectionList); | |
| 877 | - return; | |
| 878 | - } | |
| 879 | - | |
| 880 | - var f = arguments.callee; | |
| 881 | - | |
| 882 | - var poiOne = new BMap.Point(stationsPoint[index].potion.lng,stationsPoint[index].potion.lat); | |
| 883 | - | |
| 884 | - var poiTwo = new BMap.Point(stationsPoint[index+1].potion.lng,stationsPoint[index+1].potion.lat); | |
| 885 | - | |
| 886 | - /* var transit = new BMap.TransitRoute(mapB, {renderOptions: {map: mapB},onPolylinesSet: searchPolylinesSet});*/ | |
| 887 | - | |
| 888 | - var transit = new BMap.DrivingRoute(mapBValue, {renderOptions: {map: mapBValue},onPolylinesSet: searchPolylinesSet}); | |
| 889 | - | |
| 890 | - function searchPolylinesSet(results){ | |
| 891 | - | |
| 892 | - if (transit.getStatus() != BMAP_STATUS_SUCCESS){ | |
| 893 | - | |
| 894 | - | |
| 895 | - }else { | |
| 896 | - | |
| 897 | - var sectionArrayList = []; | |
| 898 | - for (i = 0; i < results.length; i++){ | |
| 899 | - | |
| 900 | - // console.log(results[i].getPolyline().getPath()); | |
| 901 | - sectionArrayList = sectionArrayList.concat(results[i].getPolyline().getPath()); | |
| 902 | - | |
| 903 | - } | |
| 904 | - | |
| 905 | - var sectionName = stationsPoint[index].name + '至' + stationsPoint[index+1].name; | |
| 906 | - | |
| 907 | - sectionList.push({sectionName:sectionName,points:sectionArrayList}); | |
| 908 | - | |
| 909 | - } | |
| 910 | - | |
| 911 | - f(); | |
| 912 | - } | |
| 913 | - | |
| 914 | - transit.search(poiOne,poiTwo); | |
| 915 | - | |
| 916 | - })(); | |
| 917 | - | |
| 918 | - }, | |
| 919 | - | |
| 920 | - localtionPoint : function(stationNameV) { | |
| 921 | - | |
| 922 | - WorldsBMap.localSearchFromAdreesToPoint(stationNameV,function(Points) { | |
| 923 | - | |
| 924 | - if(Points) { | |
| 925 | - | |
| 926 | - var BJwpointsArray = Points.split(' '); | |
| 927 | - | |
| 928 | - var stationNameChangePoint = new BMap.Point(BJwpointsArray[0], BJwpointsArray[1]); | |
| 929 | - | |
| 930 | - var marker_stargt2 = new BMap.Marker(stationNameChangePoint); | |
| 931 | - | |
| 932 | - var PanOptions ={noAnimation :true}; | |
| 933 | - | |
| 934 | - mapBValue.panTo(stationNameChangePoint,PanOptions); | |
| 935 | - | |
| 936 | - mapBValue.panBy(0,-100); | |
| 937 | - | |
| 938 | - // 将标注添加到地图中 | |
| 939 | - mapBValue.addOverlay(marker_stargt2); | |
| 940 | - | |
| 941 | - //跳动的动画 | |
| 942 | - marker_stargt2.setAnimation(BMAP_ANIMATION_BOUNCE); | |
| 943 | - | |
| 944 | - } | |
| 945 | - | |
| 946 | - }); | |
| 947 | - | |
| 948 | - }, | |
| 949 | - | |
| 950 | - /** 系统规划抓去数据 @param lineNameValue:线路名称；i：方向*/ | |
| 951 | - getBmapStationNames : function(lineNameValue,i,callback) { | |
| 952 | - | |
| 953 | - var busline = new BMap.BusLineSearch(mapBValue,{ | |
| 954 | - | |
| 955 | - // 设置公交列表查询后的回调函数。参数：rs: BusListResult类型 | |
| 956 | - onGetBusListComplete:function(BusListResult) { | |
| 957 | - | |
| 958 | - // 如果不为空 | |
| 959 | - if(BusListResult){ | |
| 960 | - | |
| 961 | - //获取第一个公交列表显示到map上 | |
| 962 | - var fstLine = BusListResult.getBusListItem(i); | |
| 963 | - | |
| 964 | - /*if(fstLine==undefined){ | |
| 965 | - | |
| 966 | - layer.confirm('系统无法生成该线路【'+lineNameValue+'】的站点与路段！请点击返回选择其它方式规划', {btn : [ '返回' ],icon: 3, title:'提示' }, function(index){ | |
| 967 | - | |
| 968 | - layer.closeAll(); | |
| 969 | - | |
| 970 | - if(i==0){ | |
| 971 | - | |
| 972 | - $('#upToolsMobal').show(); | |
| 973 | - | |
| 974 | - }else if(i==1){ | |
| 975 | - | |
| 976 | - $('#downToolsMobal').show(); | |
| 977 | - | |
| 978 | - } | |
| 979 | - | |
| 980 | - return; | |
| 981 | - }); | |
| 982 | - | |
| 983 | - }*/ | |
| 984 | - | |
| 985 | - if(fstLine==undefined){ | |
| 986 | - | |
| 987 | - | |
| 988 | - callback && callback(null); | |
| 989 | - | |
| 990 | - } | |
| 991 | - | |
| 992 | - busline.getBusLine(fstLine); | |
| 993 | - | |
| 994 | - } | |
| 995 | - | |
| 996 | - }, | |
| 997 | - | |
| 998 | - //设置公交线路查询后的回调函数.参数：rs: BusLine类型 | |
| 999 | - onGetBusLineComplete: function(BusLine){ | |
| 1000 | - | |
| 1001 | - // 如果不为空 | |
| 1002 | - if(BusLine){ | |
| 1003 | - | |
| 1004 | - callback && callback(BusLine); | |
| 1005 | - | |
| 1006 | - } | |
| 1007 | - | |
| 1008 | - } | |
| 1009 | - | |
| 1010 | - }); | |
| 1011 | - | |
| 1012 | - busline.getBusList(lineNameValue); | |
| 1013 | - | |
| 1014 | - }, | |
| 1015 | - | |
| 1016 | - clearMarkAndOverlays : function() { | |
| 1017 | - | |
| 1018 | - // 清楚地图覆盖物 | |
| 1019 | - mapBValue.clearOverlays(); | |
| 1020 | - | |
| 1021 | - mapBValue.removeOverlay(); | |
| 1022 | - | |
| 1023 | - } | |
| 1024 | - | |
| 1025 | - } | |
| 1026 | - | |
| 1027 | - return Bmap; | |
| 1028 | - | |
| 1 | +/** | |
| 2 | + * 百度地图 | |
| 3 | + * | |
| 4 | + * - - - - - -》init：地图初始化 | |
| 5 | + * | |
| 6 | + * - - - - - -》lineInfoPanl：从百度地图抓去站点与路段数据 | |
| 7 | + * | |
| 8 | + * - - - - - -》getDistanceAndDuration：获取距离与时间 | |
| 9 | + * | |
| 10 | + * - - - - - -》pointsPolygon：地图画多边行 | |
| 11 | + * | |
| 12 | + * - - - - - -》pointsCircle：画圆 | |
| 13 | + * | |
| 14 | + * - - - - - -》localSearchFromAdreesToPoint：根据地理名称获取百度经纬度坐标 | |
| 15 | + * | |
| 16 | + * - - - - - -》drawingUpline：在地图上画出上行线路走向 | |
| 17 | + * | |
| 18 | + * - - - - - -》stationsNameToPoints：站点名称获取百度坐标（手动规划） | |
| 19 | + * | |
| 20 | + * - - - - - -》getDistanceAndTotime：根据坐标点获取两点之间的时间与距离（手动规划） | |
| 21 | + * | |
| 22 | + * - - - - - -》getSectionListPlonly：根据坐标点获取两点之间的折线路段（手动规划） | |
| 23 | + */ | |
| 24 | + | |
| 25 | +var WorldsBMap = function () { | |
| 26 | + | |
| 27 | + /** WorldsBMap 全局变量定义 mapBValue：地图对象；polygon：多边形；polyUpline：走向折线；circle：圆 */ | |
| 28 | + var mapBValue = '';polygon='',polyUpline='',circle='',iseditStatus = false; | |
| 29 | + | |
| 30 | + var Bmap = { | |
| 31 | + | |
| 32 | + init : function() { | |
| 33 | + | |
| 34 | + // 设置中心点, | |
| 35 | + var CENTER_POINT = {lng : 121.528733,lat : 31.237425}; | |
| 36 | + | |
| 37 | + // 百度API Key | |
| 38 | + var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT'; | |
| 39 | + | |
| 40 | + // 初始化百度地图 | |
| 41 | + mapBValue = new BMap.Map("bmap_basic"); | |
| 42 | + | |
| 43 | + //中心点和缩放级别 | |
| 44 | + mapBValue.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat), 15); | |
| 45 | + | |
| 46 | + //启用地图拖拽事件，默认启用(可不写) | |
| 47 | + mapBValue.enableDragging(); | |
| 48 | + | |
| 49 | + //启用地图滚轮放大缩小 | |
| 50 | + mapBValue.enableScrollWheelZoom(); | |
| 51 | + | |
| 52 | + //禁用鼠标双击放大 | |
| 53 | + mapBValue.disableDoubleClickZoom(); | |
| 54 | + | |
| 55 | + //启用键盘上下左右键移动地图 | |
| 56 | + mapBValue.enableKeyboard(); | |
| 57 | + | |
| 58 | + return mapBValue; | |
| 59 | + }, | |
| 60 | + | |
| 61 | + /** 获取地图对象 @return 地图对象map */ | |
| 62 | + getmapBValue : function() { | |
| 63 | + | |
| 64 | + return mapBValue; | |
| 65 | + | |
| 66 | + }, | |
| 67 | + | |
| 68 | + getPolygon : function(){ | |
| 69 | + | |
| 70 | + return polygon; | |
| 71 | + }, | |
| 72 | + | |
| 73 | + getPolyUpline : function() { | |
| 74 | + | |
| 75 | + return polyUpline; | |
| 76 | + }, | |
| 77 | + | |
| 78 | + getCircle : function() { | |
| 79 | + | |
| 80 | + return circle; | |
| 81 | + }, | |
| 82 | + | |
| 83 | + getIsEditStatus : function() { | |
| 84 | + return iseditStatus; | |
| 85 | + }, | |
| 86 | + | |
| 87 | + setIsEditStatus : function(v) { | |
| 88 | + iseditStatus = v ; | |
| 89 | + }, | |
| 90 | + | |
| 91 | + initDrawingManager: function(map,styleOptions) { | |
| 92 | + | |
| 93 | + }, | |
| 94 | + | |
| 95 | + getDrawingManagerObj : function() { | |
| 96 | + | |
| 97 | + return drawingManagerInitV; | |
| 98 | + }, | |
| 99 | + | |
| 100 | + // 从百度地图抓去站点与路段数据 | |
| 101 | + lineInfoPanl : function(lineNameValue,i,cb) { | |
| 102 | + | |
| 103 | + /** 根据线路名称与方向从百度地图获取站点与路段 @param lineNameValue：线路名称；i：方向<0：上行；1：下行> */ | |
| 104 | + WorldsBMap.getBmapStationNames(lineNameValue,i,function(BusLine){ | |
| 105 | + | |
| 106 | + return cb && cb(BusLine); | |
| 107 | + | |
| 108 | + }); | |
| 109 | + | |
| 110 | + }, | |
| 111 | + | |
| 112 | + /** 获取距离与时间 @param <points：坐标点集合> */ | |
| 113 | + getDistanceAndDuration : function(points,callback){ | |
| 114 | + | |
| 115 | + // 获取长度 | |
| 116 | + var len = points.length; | |
| 117 | + | |
| 118 | + (function(){ | |
| 119 | + | |
| 120 | + if (!arguments.callee.count) { | |
| 121 | + | |
| 122 | + arguments.callee.count = 0; | |
| 123 | + | |
| 124 | + } | |
| 125 | + | |
| 126 | + arguments.callee.count++; | |
| 127 | + | |
| 128 | + var index = parseInt(arguments.callee.count) - 1; | |
| 129 | + | |
| 130 | + if (index >= len-1) { | |
| 131 | + | |
| 132 | + callback && callback(points); | |
| 133 | + | |
| 134 | + return; | |
| 135 | + } | |
| 136 | + | |
| 137 | + // 当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。(当前正在执行的函数。) | |
| 138 | + var f = arguments.callee; | |
| 139 | + | |
| 140 | + // 起点坐标 <坐标格式：40.056878,116.30815> | |
| 141 | + var origin = points[index].potion.lat + ',' + points[index].potion.lng; | |
| 142 | + | |
| 143 | + // 终点坐标 <坐标格式：40.056878,116.30815> | |
| 144 | + var destination = points[index+1].potion.lat + ',' + points[index+1].potion.lng; | |
| 145 | + | |
| 146 | + var region = '上海'; | |
| 147 | + | |
| 148 | + var origin_region = '上海'; | |
| 149 | + | |
| 150 | + var destination_region = '上海'; | |
| 151 | + | |
| 152 | + var output = 'json'; | |
| 153 | + | |
| 154 | + var ak_My = 'wjlITmXeCek5MxyU3ZUBkTeU8B0o0npk'; | |
| 155 | + | |
| 156 | + /** | |
| 157 | + * origin：起点名称或经纬度； | |
| 158 | + * | |
| 159 | + * destination：终点名称或经纬度； | |
| 160 | + * | |
| 161 | + * origin_region：起始点所在城市，驾车导航时必填。 | |
| 162 | + * | |
| 163 | + * destination_region：终点所在城市，驾车导航时必填。 | |
| 164 | + * | |
| 165 | + * output :表示输出类型，可设置为xml或json，默认为xml。 | |
| 166 | + * | |
| 167 | + **/ | |
| 168 | + var paramsB = {origin:origin,destination:destination,region:region,origin_region:origin_region,destination_region:destination_region,output:output,ak:ak_My}; | |
| 169 | + | |
| 170 | + /** @description :未认证开发者默认配额为：2000次/天。 */ | |
| 171 | + $.ajax({ | |
| 172 | + | |
| 173 | + // 百度地图根据坐标获取两点之间的时间与距离 | |
| 174 | + url: '//api.map.baidu.com/direction/v1?mode=transit', | |
| 175 | + | |
| 176 | + data: paramsB, | |
| 177 | + | |
| 178 | + dataType: 'jsonp', | |
| 179 | + | |
| 180 | + success: function(r){ | |
| 181 | + | |
| 182 | + if(r) { | |
| 183 | + | |
| 184 | + if(r.message=='ok') { | |
| 185 | + | |
| 186 | + if(r.result.taxi==null) { | |
| 187 | + | |
| 188 | + // 获取距离(单位：米) | |
| 189 | + points[index+1].distance = 0; | |
| 190 | + | |
| 191 | + // 获取时间(单位：秒) | |
| 192 | + points[index+1].duration = 0; | |
| 193 | + | |
| 194 | + }else { | |
| 195 | + | |
| 196 | + // 获取距离(单位：米) | |
| 197 | + points[index+1].distance = r.result.taxi.distance; | |
| 198 | + | |
| 199 | + // 获取时间(单位：秒) | |
| 200 | + points[index+1].duration = r.result.taxi.duration; | |
| 201 | + | |
| 202 | + } | |
| 203 | + | |
| 204 | + | |
| 205 | + } | |
| 206 | + | |
| 207 | + } | |
| 208 | + | |
| 209 | + f(); | |
| 210 | + } | |
| 211 | + }); | |
| 212 | + | |
| 213 | + })(); | |
| 214 | + | |
| 215 | + }, | |
| 216 | + | |
| 217 | + // 地图画多边形 | |
| 218 | + pointsPolygon : function(objStation) { | |
| 219 | + | |
| 220 | + // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 221 | + mapBValue.setZoom(15); | |
| 222 | + | |
| 223 | + // 如果不为空 | |
| 224 | + if(objStation) { | |
| 225 | + | |
| 226 | + // 获取中心点坐标字符串 | |
| 227 | + var testpointStr = objStation.stationBJwpoints; | |
| 228 | + | |
| 229 | + // 按空格切割中心点坐标字符串 | |
| 230 | + var BJwpointsPolygon = testpointStr.split(' '); | |
| 231 | + | |
| 232 | + // 中心点坐标 | |
| 233 | + var pointPolygon = new BMap.Point(BJwpointsPolygon[0], BJwpointsPolygon[1]); | |
| 234 | + | |
| 235 | + // 获取多边形坐标字符串 | |
| 236 | + var stationBPolygonGrid = objStation.stationBPolygonGrid; | |
| 237 | + | |
| 238 | + // 截取多边形坐标字符串 | |
| 239 | + var stationBPolygonGridStr = stationBPolygonGrid.substring(9,stationBPolygonGrid.length-2); | |
| 240 | + | |
| 241 | + // 按逗号切割 | |
| 242 | + var pointPolygonArray = stationBPolygonGridStr.split(','); | |
| 243 | + | |
| 244 | + // 多边形坐标集合 | |
| 245 | + var polygonP = []; | |
| 246 | + | |
| 247 | + for(var v = 0;v<pointPolygonArray.length;v++) { | |
| 248 | + | |
| 249 | + polygonP.push(new BMap.Point(pointPolygonArray[v].split(" ")[0],pointPolygonArray[v].split(" ")[1])); | |
| 250 | + | |
| 251 | + } | |
| 252 | + | |
| 253 | + // 画多边形 | |
| 254 | + polygon = new BMap.Polygon(polygonP, { | |
| 255 | + | |
| 256 | + // 线条显色 | |
| 257 | + strokeColor : "blue", | |
| 258 | + | |
| 259 | + // 边线的宽度，以像素为单位。 | |
| 260 | + strokeWeight : 2, | |
| 261 | + | |
| 262 | + // 边线透明度，取值范围0 - 1。 | |
| 263 | + strokeOpacity : 0.5 | |
| 264 | + }); | |
| 265 | + | |
| 266 | + // 增加地图覆盖物多边形 | |
| 267 | + mapBValue.addOverlay(polygon); | |
| 268 | + | |
| 269 | + // 信息窗口属性 | |
| 270 | + var opts_polygon = { | |
| 271 | + | |
| 272 | + // 信息窗口宽度 | |
| 273 | + width : 200, | |
| 274 | + | |
| 275 | + // 信息窗口高度 | |
| 276 | + height : 400, | |
| 277 | + | |
| 278 | + // 信息窗位置偏移值。 | |
| 279 | + offset: new BMap.Size(500,20), | |
| 280 | + | |
| 281 | + //标题 | |
| 282 | + title : '<h4 style="color:#FFFFFF">'+objStation.stationStationName+'站详情</h4>', | |
| 283 | + | |
| 284 | + //设置不允许信窗发送短息 | |
| 285 | + enableMessage : false, | |
| 286 | + | |
| 287 | + //是否开启点击地图关闭信息窗口 | |
| 288 | + enableCloseOnClick : false | |
| 289 | + }; | |
| 290 | + | |
| 291 | + var markTypeStr = ''; | |
| 292 | + | |
| 293 | + if(objStation.stationRouteStationMark=='B') { | |
| 294 | + | |
| 295 | + markTypeStr='起点站'; | |
| 296 | + | |
| 297 | + }else if(objStation.stationRouteStationMark=='Z') { | |
| 298 | + | |
| 299 | + markTypeStr ='中途站'; | |
| 300 | + | |
| 301 | + | |
| 302 | + }else if(objStation.stationRouteStationMark=='E') { | |
| 303 | + | |
| 304 | + markTypeStr='终点站'; | |
| 305 | + | |
| 306 | + } | |
| 307 | + | |
| 308 | + var htm = '<HR style="border:1 dashed #987cb9" width="100%" color=#987cb9 SIZE=1>'+ | |
| 309 | + '<span style="color:#DDD;font-size: 15px;">站点名称：' + objStation.stationStationName + '</span>' + | |
| 310 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">站点编码：' + objStation.stationStationCod + '</span>' + | |
| 311 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">站点序号：' + objStation.stationRouteStationRouteCode + '</span>' + | |
| 312 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">站点类型：' + markTypeStr + '</span>' + | |
| 313 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">纬度坐标：' + objStation.stationBJwpoints + '</span>' + | |
| 314 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">到站时间：' + objStation.stationRouteToTime + ' 分钟</span>' + | |
| 315 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">到站距离：' + objStation.stationRouteDistances + ' 公里</span>' + | |
| 316 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">范围半径：' + objStation.stationRadius + '</span>' + | |
| 317 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">版本 号：' + objStation.stationRouteVersions + '</span>' + | |
| 318 | + '<span class="help-block" style="width: 100%;font-size: 15px;;color:#DDD;'+ | |
| 319 | + 'overflow: hidden; white-space: nowrap; text-overflow: ellipsis; " title="'+ | |
| 320 | + objStation.stationRouteDescriptions +'" >说明/描述：' + objStation.stationRouteDescriptions + '</span>' ; | |
| 321 | + | |
| 322 | + // 创建信息窗口 | |
| 323 | + var infoWindow_target = new BMap.InfoWindow(htm, opts_polygon); | |
| 324 | + // 自定义标注物图片 | |
| 325 | + var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/cz.png',new BMap.Size(20, 20)); | |
| 326 | + | |
| 327 | + // 创建点 | |
| 328 | + marker = new BMap.Marker(pointPolygon,{icon : icon_target}); | |
| 329 | + | |
| 330 | + // 把标注添物加到地图上 | |
| 331 | + mapBValue.addOverlay(marker); | |
| 332 | + | |
| 333 | + // 是否在平移过程中禁止动画。（自1.2新增） | |
| 334 | + var PanOptions_ ={noAnimation :true}; | |
| 335 | + | |
| 336 | + // 将地图的中心点更改为给定的点。 | |
| 337 | + mapBValue.panTo(pointPolygon,PanOptions_); | |
| 338 | + | |
| 339 | + // 将地图在水平位置上移动x像素，垂直位置上移动y像素。 | |
| 340 | + mapBValue.panBy(10,-150,PanOptions_); | |
| 341 | + | |
| 342 | + //开启信息窗口 | |
| 343 | + mapBValue.openInfoWindow(infoWindow_target,pointPolygon); | |
| 344 | + | |
| 345 | + } | |
| 346 | + | |
| 347 | + }, | |
| 348 | + | |
| 349 | + editPolyUpline : function() { | |
| 350 | + // 禁止覆盖物在map.clearOverlays方法中被清除。(自 1.1 新增) | |
| 351 | + polyUpline.disableMassClear(); | |
| 352 | + WorldsBMap.clearMarkAndOverlays(); | |
| 353 | + // 允许覆盖物在map.clearOverlays方法中被清除。(自 1.1 新增) | |
| 354 | + polyUpline.enableMassClear(); | |
| 355 | + // 开启线路编辑 | |
| 356 | + polyUpline.enableEditing(); | |
| 357 | + // 添加双击折线保存事件 | |
| 358 | + polyUpline.addEventListener('dblclick',function(e) { | |
| 359 | + // 关闭 | |
| 360 | + layer.closeAll(); | |
| 361 | + polyUpline.disableEditing(); | |
| 362 | + // 获取折线坐标集合 | |
| 363 | + var editPloyLineArray = polyUpline.getPath(); | |
| 364 | + EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 365 | + polyUpline= ''; | |
| 366 | + // 加载修改路段弹出层mobal页面 | |
| 367 | + $.get('editsection.html', function(m){ | |
| 368 | + $(pjaxContainer).append(m); | |
| 369 | + $('#edit_section_mobal').trigger('editSectionMobal_show', [WorldsBMap,GetAjaxData,EditSectionObj,PublicFunctions]); | |
| 370 | + }); | |
| 371 | + }); | |
| 372 | + }, | |
| 373 | + | |
| 374 | + // 画圆 | |
| 375 | + pointsCircle : function(objStation) { | |
| 376 | + | |
| 377 | + // 将视图切换到指定的缩放等级，中心点坐标不变。注意：当有信息窗口在地图上打开时，地图缩放将保证信息窗口所在的坐标位置不动。（自1.2新增） | |
| 378 | + mapBValue.setZoom(16); | |
| 379 | + | |
| 380 | + if(objStation) { | |
| 381 | + | |
| 382 | + // 清除地图覆盖物 | |
| 383 | + mapBValue.clearOverlays(); | |
| 384 | + | |
| 385 | + // 获取中心坐标点字符串分割 | |
| 386 | + var BJwpoints = objStation.stationBJwpoints.split(' '); | |
| 387 | + | |
| 388 | + // 中心坐标点 | |
| 389 | + var point = new BMap.Point(BJwpoints[0], BJwpoints[1]); | |
| 390 | + | |
| 391 | + //创建圆 | |
| 392 | + circle = new BMap.Circle(point,objStation.stationRadius,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); | |
| 393 | + | |
| 394 | + // 允许覆盖物在map.clearOverlays方法中被清除 | |
| 395 | + circle.enableMassClear(); | |
| 396 | + | |
| 397 | + // 百度地图添加覆盖物圆 | |
| 398 | + mapBValue.addOverlay(circle); | |
| 399 | + | |
| 400 | + // 信息窗口参数属性 | |
| 401 | + var opts = { | |
| 402 | + | |
| 403 | + // 信息窗口宽度 | |
| 404 | + width : 200, | |
| 405 | + | |
| 406 | + // 信息窗口高度 | |
| 407 | + height : 450, | |
| 408 | + | |
| 409 | + // 信息窗位置偏移值。 | |
| 410 | + offset: new BMap.Size(500,120), | |
| 411 | + | |
| 412 | + //标题 | |
| 413 | + title : '<h4 style="color:#FFFFFF">'+objStation.stationStationName+'站详情</h4>', | |
| 414 | + | |
| 415 | + //设置不允许信窗发送短息 | |
| 416 | + enableMessage : false, | |
| 417 | + | |
| 418 | + //是否开启点击地图关闭信息窗口 | |
| 419 | + enableCloseOnClick : false, | |
| 420 | + | |
| 421 | + // 是否开启信息窗口打开时地图自动移动（默认开启）。(自 1.1 新增) | |
| 422 | + enableAutoPan:false | |
| 423 | + }; | |
| 424 | + | |
| 425 | + var markTypeStr = ''; | |
| 426 | + | |
| 427 | + if(objStation.stationRouteStationMark=='B') { | |
| 428 | + | |
| 429 | + markTypeStr='起点站'; | |
| 430 | + | |
| 431 | + }else if(objStation.stationRouteStationMark=='Z') { | |
| 432 | + | |
| 433 | + markTypeStr ='中途站'; | |
| 434 | + | |
| 435 | + | |
| 436 | + }else if(objStation.stationRouteStationMark=='E') { | |
| 437 | + | |
| 438 | + markTypeStr='终点站'; | |
| 439 | + | |
| 440 | + } | |
| 441 | + | |
| 442 | + var htm = '<HR style="border:1 dashed #987cb9" width="100%" color=#987cb9 SIZE=1>'+ | |
| 443 | + '<span style="color:#DDD;font-size: 15px;">站点名称：' + objStation.stationStationName + '</span>' + | |
| 444 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">站点编码：' + objStation.stationStationCod + '</span>' + | |
| 445 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">站点序号：' + objStation.stationRouteStationRouteCode + '</span>' + | |
| 446 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">站点类型：' + markTypeStr + '</span>' + | |
| 447 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">纬度坐标：' + objStation.stationBJwpoints + '</span>' + | |
| 448 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">到站时间：' + objStation.stationRouteToTime + ' 分钟</span>' + | |
| 449 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">到站距离：' + objStation.stationRouteDistances + ' 公里</span>' + | |
| 450 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">范围半径：' + objStation.stationRadius + '</span>' + | |
| 451 | + '<span class="help-block" style="color:#DDD;font-size: 15px;">版本 号：' + objStation.stationRouteVersions + '</span>' + | |
| 452 | + '<span class="help-block" style="width: 100%;font-size: 15px;;color:#DDD;'+ | |
| 453 | + 'overflow: hidden; white-space: nowrap; text-overflow: ellipsis; " title="'+ | |
| 454 | + objStation.stationRouteDescriptions +'" >说明/描述：' + objStation.stationRouteDescriptions + '</span>' ; | |
| 455 | + | |
| 456 | + // 创建信息窗口 | |
| 457 | + var infoWindow_target = new BMap.InfoWindow(htm, opts); | |
| 458 | + // 自定义标注物图片 | |
| 459 | + var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/cz.png',new BMap.Size(20, 20)); | |
| 460 | + | |
| 461 | + // 创建点 | |
| 462 | + marker = new BMap.Marker(point,{icon : icon_target}); | |
| 463 | + | |
| 464 | + // 把标注添物加到地图上 | |
| 465 | + mapBValue.addOverlay(marker); | |
| 466 | + | |
| 467 | + setTimeout(function(){ | |
| 468 | + //开启信息窗口 | |
| 469 | + marker.openInfoWindow(infoWindow_target,point); | |
| 470 | + | |
| 471 | + },100); | |
| 472 | + | |
| 473 | + // 是否在平移过程中禁止动画。（自1.2新增） | |
| 474 | + var PanOptions_ ={noAnimation :true}; | |
| 475 | + | |
| 476 | + // 将地图的中心点更改为给定的点。 | |
| 477 | + mapBValue.panTo(point,PanOptions_); | |
| 478 | + | |
| 479 | + mapBValue.panBy(10,-200,PanOptions_); | |
| 480 | + | |
| 481 | + // 添加标志物监听事件 | |
| 482 | + marker.addEventListener("click",function() { | |
| 483 | + | |
| 484 | + //开启信息窗口 | |
| 485 | + marker.openInfoWindow(infoWindow_target,point); | |
| 486 | + | |
| 487 | + }); | |
| 488 | + | |
| 489 | + } | |
| 490 | + | |
| 491 | + }, | |
| 492 | + | |
| 493 | + // 根据地理名称获取百度经纬度坐标 | |
| 494 | + localSearchFromAdreesToPoint: function(Address,callback) { | |
| 495 | + | |
| 496 | + // 创建一个搜索类实例 | |
| 497 | + var localSearch = new BMap.LocalSearch(mapBValue); | |
| 498 | + | |
| 499 | + // 检索完成后的回调函数。 | |
| 500 | + localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 501 | + | |
| 502 | + var resultPoints = ''; | |
| 503 | + | |
| 504 | + if(searchResult) { | |
| 505 | + | |
| 506 | + // 返回索引指定的结果。索引0表示第1条结果 | |
| 507 | + var poi = searchResult.getPoi(0); | |
| 508 | + | |
| 509 | + if(poi) { | |
| 510 | + | |
| 511 | + //获取经度和纬度 | |
| 512 | + resultPoints = poi.point.lng + ' ' + poi.point.lat; | |
| 513 | + | |
| 514 | + callback && callback(resultPoints); | |
| 515 | + | |
| 516 | + }else { | |
| 517 | + | |
| 518 | + callback && callback(false); | |
| 519 | + | |
| 520 | + } | |
| 521 | + | |
| 522 | + }else { | |
| 523 | + | |
| 524 | + callback && callback(false); | |
| 525 | + } | |
| 526 | + | |
| 527 | + }); | |
| 528 | + | |
| 529 | + // 根据检索词发起检索。 | |
| 530 | + localSearch.search(Address); | |
| 531 | + | |
| 532 | + }, | |
| 533 | + | |
| 534 | + // 编辑图形 | |
| 535 | + editShapes : function(editStationName,stationShapesTypeV,mindex) { | |
| 536 | + | |
| 537 | + // 关闭信息窗口 | |
| 538 | + marker.closeInfoWindow(); | |
| 539 | + | |
| 540 | + // 清除marker | |
| 541 | + mapBValue.removeOverlay(marker); | |
| 542 | + | |
| 543 | + // 编辑圆 | |
| 544 | + if(stationShapesTypeV =='r') { | |
| 545 | + | |
| 546 | + // 开启编辑功能 | |
| 547 | + circle.enableEditing(); | |
| 548 | + | |
| 549 | + // 编辑圆监听事件 | |
| 550 | + circle.addEventListener('dblclick',function() { | |
| 551 | + | |
| 552 | + // 关闭提示弹出层 | |
| 553 | + layer.close(mindex); | |
| 554 | + | |
| 555 | + // 返回圆形的半径，单位为米。 | |
| 556 | + var newRadius = circle.getRadius(); | |
| 557 | + | |
| 558 | + // 返回圆形的中心点坐标。 | |
| 559 | + var newCenter = circle.getCenter().lng + ' ' + circle.getCenter().lat; | |
| 560 | + | |
| 561 | + var centre_New = [{potion:{lng:circle.getCenter().lng,lat:circle.getCenter().lat}}]; | |
| 562 | + | |
| 563 | + /** 设置修改站点集合对象站点中心点百度坐标属性值 @param：<bJwpoints：中心点百度坐标） */ | |
| 564 | + EditStationObj.setEitdStationBJwpoints(newCenter); | |
| 565 | + | |
| 566 | + /** 设置修改站点集合对象范围图形类型属性值 @param：<shapesType：范围图形类型） */ | |
| 567 | + EditStationObj.setEitdStationShapesType('r'); | |
| 568 | + | |
| 569 | + /** 设置修改站点集合对象圆形半径属性值 @param：<radius：圆形半径） */ | |
| 570 | + EditStationObj.setEitdStationRadius(Math.round(newRadius)); | |
| 571 | + | |
| 572 | + /** 设置修改站点集合对象图形百度坐标集合属性值 @param：<bPolygonGrid：图形百度坐标集合） */ | |
| 573 | + EditStationObj.setEitdBPolygonGrid(''); | |
| 574 | + | |
| 575 | + // 加载编辑页面 | |
| 576 | + $.get('edit.html', function(m){ | |
| 577 | + | |
| 578 | + $(pjaxContainer).append(m); | |
| 579 | + | |
| 580 | + $('#edit_station_mobal').trigger('editSelectMobal_show', [WorldsBMap,GetAjaxData,EditStationObj,LineObj,PublicFunctions]); | |
| 581 | + | |
| 582 | + }); | |
| 583 | + | |
| 584 | + }); | |
| 585 | + | |
| 586 | + // 编辑多变行 | |
| 587 | + }else if(stationShapesTypeV =='d') { | |
| 588 | + | |
| 589 | + // 开启编辑功能(自 1.1 新增) | |
| 590 | + polygon.enableEditing(); | |
| 591 | + | |
| 592 | + // 添加多变行编辑事件 | |
| 593 | + polygon.addEventListener('dblclick',function(e) { | |
| 594 | + | |
| 595 | + // 获取编辑的多边形对象 | |
| 596 | + var edit_pointE = polygon; | |
| 597 | + | |
| 598 | + var edit_bPloygonGrid = ""; | |
| 599 | + | |
| 600 | + var editPolyGonLen_ = edit_pointE.getPath().length; | |
| 601 | + | |
| 602 | + for(var k =0;k<editPolyGonLen_;k++) { | |
| 603 | + | |
| 604 | + if(k==0) { | |
| 605 | + | |
| 606 | + edit_bPloygonGrid = edit_pointE.getPath()[k].lng + ' ' + edit_pointE.getPath()[k].lat; | |
| 607 | + | |
| 608 | + }else { | |
| 609 | + | |
| 610 | + edit_bPloygonGrid = edit_bPloygonGrid + ',' + edit_pointE.getPath()[k].lng + ' ' + edit_pointE.getPath()[k].lat; | |
| 611 | + | |
| 612 | + } | |
| 613 | + | |
| 614 | + } | |
| 615 | + | |
| 616 | + edit_bPloygonGrid = edit_bPloygonGrid + ',' + edit_pointE.getPath()[0].lng + ' ' + edit_pointE.getPath()[0].lat; | |
| 617 | + | |
| 618 | + // 多边形中心点 | |
| 619 | + var centre_points = edit_pointE.getBounds().getCenter().lng + ' ' + edit_pointE.getBounds().getCenter().lat; | |
| 620 | + | |
| 621 | + /** 设置修改站点集合对象站点中心点百度坐标属性值 @param：<bJwpoints：中心点百度坐标） */ | |
| 622 | + EditStationObj.setEitdStationBJwpoints(centre_points); | |
| 623 | + | |
| 624 | + /** 设置修改站点集合对象范围图形类型属性值 @param：<shapesType：范围图形类型） */ | |
| 625 | + EditStationObj.setEitdStationShapesType('d'); | |
| 626 | + | |
| 627 | + /** 设置修改站点集合对象圆形半径属性值 @param：<radius：圆形半径） */ | |
| 628 | + EditStationObj.setEitdStationRadius(''); | |
| 629 | + | |
| 630 | + /** 设置修改站点集合对象图形百度坐标集合属性值 @param：<bPolygonGrid：图形百度坐标集合） */ | |
| 631 | + EditStationObj.setEitdBPolygonGrid(edit_bPloygonGrid); | |
| 632 | + | |
| 633 | + $.get('edit.html', function(m){ | |
| 634 | + | |
| 635 | + $(pjaxContainer).append(m); | |
| 636 | + | |
| 637 | + $('#edit_station_mobal').trigger('editSelectMobal_show', [WorldsBMap,GetAjaxData,EditStationObj,LineObj,PublicFunctions]); | |
| 638 | + | |
| 639 | + }); | |
| 640 | + | |
| 641 | + }); | |
| 642 | + | |
| 643 | + } | |
| 644 | + | |
| 645 | + }, | |
| 646 | + | |
| 647 | + // 在地图上画出上行线路走向 | |
| 648 | + drawingUpline : function (polylineArray,polyline_center,data) { | |
| 649 | + /*WorldsBMap.clearMarkAndOverlays();*/ | |
| 650 | + polyUpline = ''; | |
| 651 | + // 创建线路走向 | |
| 652 | + polyUpline = new BMap.Polyline(polylineArray, {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5}); | |
| 653 | + // polyUpline.data = data; | |
| 654 | + // 把折线添加到地图上 | |
| 655 | + mapBValue.addOverlay(polyUpline); | |
| 656 | + /*var ceter_index = Math.round(resultdata.length / 2); | |
| 657 | + | |
| 658 | + var ceterPointsStr = resultdata[ceter_index].bJwpoints; | |
| 659 | + | |
| 660 | + var ceterPointsArray = ceterPointsStr.split(' '); | |
| 661 | + | |
| 662 | + var polyline_center = new BMap.Point(ceterPointsArray[0],ceterPointsArray[1]);*/ | |
| 663 | + var PanOptions_ ={noAnimation :true}; | |
| 664 | + mapBValue.reset(); | |
| 665 | + mapBValue.panTo(polyline_center,PanOptions_); | |
| 666 | + mapBValue.panBy(500,-510,PanOptions_); | |
| 667 | + mapBValue.setZoom(14); | |
| 668 | + }, | |
| 669 | + | |
| 670 | + //在地图上画出公交位置。 | |
| 671 | + drawingBus :function(lon,lat){ | |
| 672 | + var point = new BMap.Point(lon,lat); | |
| 673 | + var myIcon = new BMap.Icon("/pages/excep/img/bus.png", new BMap.Size(300,157)); | |
| 674 | + var marker = new BMap.Marker(point,{icon:myIcon}); // 创建标注 | |
| 675 | + mapBValue.addOverlay(marker); | |
| 676 | + marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 | |
| 677 | + }, | |
| 678 | + | |
| 679 | + // 在地图上画出上行线路走向 | |
| 680 | + drawingUpline01 : function (polylineArray,polyline_center,data) { | |
| 681 | + var polyUpline01 = 'polyline' + '_' + data.sectionrouteId; | |
| 682 | + // 创建线路走向 | |
| 683 | + polyUpline01 = new BMap.Polyline(polylineArray, {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5}); | |
| 684 | + polyUpline01.data = data; | |
| 685 | + // 把折线添加到地图上 | |
| 686 | + mapBValue.addOverlay(polyUpline01); | |
| 687 | + polyUpline01.addEventListener('click',function(e) { | |
| 688 | + if(WorldsBMap.getIsEditStatus()) { | |
| 689 | + layer.msg('请先保存正在编辑的路段信息...'); | |
| 690 | + return false; | |
| 691 | + } | |
| 692 | + polyUpline01.enableEditing(); | |
| 693 | + WorldsBMap.setIsEditStatus(true); | |
| 694 | + }); | |
| 695 | + // 添加双击折线保存事件 | |
| 696 | + polyUpline01.addEventListener('dblclick',function(e) { | |
| 697 | + WorldsBMap.setIsEditStatus(false); | |
| 698 | + // 关闭 | |
| 699 | + layer.closeAll(); | |
| 700 | + polyUpline01.disableEditing(); | |
| 701 | + EditSectionObj.setEitdSection(polyUpline01.data); | |
| 702 | + // 获取折线坐标集合 | |
| 703 | + var editPloyLineArray = polyUpline01.getPath(); | |
| 704 | + EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 705 | + // polyUpline= ''; | |
| 706 | + // 加载修改路段弹出层mobal页面 | |
| 707 | + $.get('editsection.html', function(m){ | |
| 708 | + $(pjaxContainer).append(m); | |
| 709 | + $('#edit_section_mobal').trigger('editSectionMobal_show', [WorldsBMap,GetAjaxData,EditSectionObj,PublicFunctions]); | |
| 710 | + }); | |
| 711 | + }); | |
| 712 | + var PanOptions_ ={noAnimation :true}; | |
| 713 | + mapBValue.reset(); | |
| 714 | + mapBValue.panTo(polyline_center,PanOptions_); | |
| 715 | + mapBValue.panBy(500,-510,PanOptions_); | |
| 716 | + mapBValue.setZoom(14); | |
| 717 | + }, | |
| 718 | + | |
| 719 | + /** 在地图上画点 @param：<point_center：中心坐标点> */ | |
| 720 | + drawingUpStationPoint : function(point_center,stationName,s) { | |
| 721 | + | |
| 722 | + // 自定义标注物图片 | |
| 723 | + var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/gjzd.png',new BMap.Size(10, 10)); | |
| 724 | + | |
| 725 | + var html2 = '<div style="position: absolute; margin: 0pt; padding: 0pt; width: 160px; height: 26px; left: -10px; top: -35px; overflow: hidden;">' | |
| 726 | + + '<img class="rm3_image" style="border:none;left:0px; top:0px; position:absolute;" src="/pages/base/stationroute/css/img/back160.png">' | |
| 727 | + + '</div>' | |
| 728 | + + '<label class=" BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: inline; cursor: inherit; border: 0px none; padding: 2px 1px 1px; white-space: nowrap; font: 12px arial,simsun; z-index: 80; color: rgb(255, 102, 0); left: 15px; top: -35px;"><span style="float: left; color: #fdfdfd; margin-left: -22px; font-size: 6px;">'+ s+'</span>'+ stationName+'</label>'; | |
| 729 | + | |
| 730 | + | |
| 731 | + var myRichMarker1 = new BMapLib.RichMarker(html2, point_center,{ | |
| 732 | + "anchor" : new BMap.Size(-10,8), | |
| 733 | + "enableDragging" : true}); | |
| 734 | + | |
| 735 | + | |
| 736 | + myRichMarker1.disableDragging(); | |
| 737 | + mapBValue.addOverlay(myRichMarker1); | |
| 738 | + | |
| 739 | + | |
| 740 | + // 创建标注物 | |
| 741 | + marker = new BMap.Marker(point_center,{icon : icon_target}); | |
| 742 | + | |
| 743 | + // 允许覆盖物在map.clearOverlays方法中被清除。 | |
| 744 | + marker.enableMassClear(); | |
| 745 | + | |
| 746 | + mapBValue.addOverlay(marker); | |
| 747 | + }, | |
| 748 | + | |
| 749 | + // 站点名称获取百度坐标（手动规划） | |
| 750 | + stationsNameToPoints : function(arra,callback) { | |
| 751 | + // 获取长度 | |
| 752 | + var len = arra.length; | |
| 753 | + var stationList = []; | |
| 754 | + (function(){ | |
| 755 | + if (!arguments.callee.count) { | |
| 756 | + arguments.callee.count = 0; | |
| 757 | + } | |
| 758 | + arguments.callee.count++; | |
| 759 | + var index = parseInt(arguments.callee.count) - 1; | |
| 760 | + if (index >= len) { | |
| 761 | + callback && callback(stationList); | |
| 762 | + return ; | |
| 763 | + } | |
| 764 | + var f = arguments.callee; | |
| 765 | + if(arra[index].name!=''){ | |
| 766 | + var localSearch = new BMap.LocalSearch(mapBValue); | |
| 767 | + localSearch.search(arra[index].name); | |
| 768 | + localSearch.setSearchCompleteCallback(function (searchResult) { | |
| 769 | + var poi = searchResult.getPoi(0); | |
| 770 | + if(poi) { | |
| 771 | + stationList.push({name:arra[index].name.replace('公交车站',''),wgs:arra[index].wgs,potion:{lng:poi.point.lng,lat:poi.point.lat}}); | |
| 772 | + }else { | |
| 773 | + stationList.push({name:arra[index].name.replace('公交车站',''),wgs:arra[index].wgs,potion:{lng:arra[index].wgs.x,lat:arra[index].wgs.y}}); | |
| 774 | + } | |
| 775 | + f(); | |
| 776 | + }); | |
| 777 | + }else { | |
| 778 | + f(); | |
| 779 | + } | |
| 780 | + })(); | |
| 781 | + }, | |
| 782 | + | |
| 783 | + // 根据坐标点获取两点之间的时间与距离（手动规划） | |
| 784 | + getDistanceAndTotime : function(stationList,cb) { | |
| 785 | + | |
| 786 | + stationList[0].distance = ''; | |
| 787 | + | |
| 788 | + stationList[0].duration = ''; | |
| 789 | + | |
| 790 | + // var sectionList = []; | |
| 791 | + | |
| 792 | + // 获取长度 | |
| 793 | + var len = stationList.length; | |
| 794 | + | |
| 795 | + (function(){ | |
| 796 | + | |
| 797 | + if (!arguments.callee.count) { | |
| 798 | + | |
| 799 | + arguments.callee.count = 0; | |
| 800 | + | |
| 801 | + } | |
| 802 | + | |
| 803 | + arguments.callee.count++; | |
| 804 | + | |
| 805 | + var index = parseInt(arguments.callee.count) - 1; | |
| 806 | + | |
| 807 | + if (index >= len-1) { | |
| 808 | + | |
| 809 | + // cb && cb(stationList,sectionList); | |
| 810 | + cb && cb(stationList); | |
| 811 | + return; | |
| 812 | + } | |
| 813 | + | |
| 814 | + var f = arguments.callee; | |
| 815 | + | |
| 816 | + var poiOne = new BMap.Point(stationList[index].potion.lng,stationList[index].potion.lat); | |
| 817 | + | |
| 818 | + var poiTwo = new BMap.Point(stationList[index+1].potion.lng,stationList[index+1].potion.lat); | |
| 819 | + | |
| 820 | + var transit = new BMap.TransitRoute(mapBValue, {renderOptions: {map: mapBValue},onSearchComplete: searchComplete}); | |
| 821 | + | |
| 822 | + transit.search(poiOne,poiTwo); | |
| 823 | + | |
| 824 | + function searchComplete(results){ | |
| 825 | + | |
| 826 | + var plan = results.getPlan(0); | |
| 827 | + | |
| 828 | + if (transit.getStatus() != BMAP_STATUS_SUCCESS){ | |
| 829 | + | |
| 830 | + stationList[index+1].distance = ''; | |
| 831 | + | |
| 832 | + stationList[index+1].duration = ''; | |
| 833 | + | |
| 834 | + // sectionList.push({sectionName:stationList[index].name+stationList[index+1].name,points:''}); | |
| 835 | + | |
| 836 | + }else { | |
| 837 | + | |
| 838 | + stationList[index+1].distance = plan.getDistance(true); | |
| 839 | + | |
| 840 | + stationList[index+1].duration = plan.getDuration(true); | |
| 841 | + | |
| 842 | + // var line = plan.getRoute(0); | |
| 843 | + | |
| 844 | + // sectionList.push({sectionName:stationList[index].name+stationList[index+1].name,points:line.getPath()}); | |
| 845 | + | |
| 846 | + } | |
| 847 | + | |
| 848 | + f(); | |
| 849 | + } | |
| 850 | + | |
| 851 | + })(); | |
| 852 | + | |
| 853 | + }, | |
| 854 | + | |
| 855 | + // 根据坐标点获取两点之间的折线路段（手动规划） | |
| 856 | + getSectionListPlonly : function(stationsPoint,cb) { | |
| 857 | + | |
| 858 | + var len = stationsPoint.length; | |
| 859 | + | |
| 860 | + var sectionList = []; | |
| 861 | + | |
| 862 | + (function(){ | |
| 863 | + | |
| 864 | + if (!arguments.callee.count) { | |
| 865 | + | |
| 866 | + arguments.callee.count = 0; | |
| 867 | + | |
| 868 | + } | |
| 869 | + | |
| 870 | + arguments.callee.count++; | |
| 871 | + | |
| 872 | + var index = parseInt(arguments.callee.count) - 1; | |
| 873 | + | |
| 874 | + if (index >= len-1 ) { | |
| 875 | + | |
| 876 | + cb && cb(sectionList); | |
| 877 | + return; | |
| 878 | + } | |
| 879 | + | |
| 880 | + var f = arguments.callee; | |
| 881 | + | |
| 882 | + var poiOne = new BMap.Point(stationsPoint[index].potion.lng,stationsPoint[index].potion.lat); | |
| 883 | + | |
| 884 | + var poiTwo = new BMap.Point(stationsPoint[index+1].potion.lng,stationsPoint[index+1].potion.lat); | |
| 885 | + | |
| 886 | + /* var transit = new BMap.TransitRoute(mapB, {renderOptions: {map: mapB},onPolylinesSet: searchPolylinesSet});*/ | |
| 887 | + | |
| 888 | + var transit = new BMap.DrivingRoute(mapBValue, {renderOptions: {map: mapBValue},onPolylinesSet: searchPolylinesSet}); | |
| 889 | + | |
| 890 | + function searchPolylinesSet(results){ | |
| 891 | + | |
| 892 | + if (transit.getStatus() != BMAP_STATUS_SUCCESS){ | |
| 893 | + | |
| 894 | + | |
| 895 | + }else { | |
| 896 | + | |
| 897 | + var sectionArrayList = []; | |
| 898 | + for (i = 0; i < results.length; i++){ | |
| 899 | + | |
| 900 | + // console.log(results[i].getPolyline().getPath()); | |
| 901 | + sectionArrayList = sectionArrayList.concat(results[i].getPolyline().getPath()); | |
| 902 | + | |
| 903 | + } | |
| 904 | + | |
| 905 | + var sectionName = stationsPoint[index].name + '至' + stationsPoint[index+1].name; | |
| 906 | + | |
| 907 | + sectionList.push({sectionName:sectionName,points:sectionArrayList}); | |
| 908 | + | |
| 909 | + } | |
| 910 | + | |
| 911 | + f(); | |
| 912 | + } | |
| 913 | + | |
| 914 | + transit.search(poiOne,poiTwo); | |
| 915 | + | |
| 916 | + })(); | |
| 917 | + | |
| 918 | + }, | |
| 919 | + | |
| 920 | + localtionPoint : function(stationNameV) { | |
| 921 | + | |
| 922 | + WorldsBMap.localSearchFromAdreesToPoint(stationNameV,function(Points) { | |
| 923 | + | |
| 924 | + if(Points) { | |
| 925 | + | |
| 926 | + var BJwpointsArray = Points.split(' '); | |
| 927 | + | |
| 928 | + var stationNameChangePoint = new BMap.Point(BJwpointsArray[0], BJwpointsArray[1]); | |
| 929 | + | |
| 930 | + var marker_stargt2 = new BMap.Marker(stationNameChangePoint); | |
| 931 | + | |
| 932 | + var PanOptions ={noAnimation :true}; | |
| 933 | + | |
| 934 | + mapBValue.panTo(stationNameChangePoint,PanOptions); | |
| 935 | + | |
| 936 | + mapBValue.panBy(0,-100); | |
| 937 | + | |
| 938 | + // 将标注添加到地图中 | |
| 939 | + mapBValue.addOverlay(marker_stargt2); | |
| 940 | + | |
| 941 | + //跳动的动画 | |
| 942 | + marker_stargt2.setAnimation(BMAP_ANIMATION_BOUNCE); | |
| 943 | + | |
| 944 | + } | |
| 945 | + | |
| 946 | + }); | |
| 947 | + | |
| 948 | + }, | |
| 949 | + | |
| 950 | + /** 系统规划抓去数据 @param lineNameValue:线路名称；i：方向*/ | |
| 951 | + getBmapStationNames : function(lineNameValue,i,callback) { | |
| 952 | + | |
| 953 | + var busline = new BMap.BusLineSearch(mapBValue,{ | |
| 954 | + | |
| 955 | + // 设置公交列表查询后的回调函数。参数：rs: BusListResult类型 | |
| 956 | + onGetBusListComplete:function(BusListResult) { | |
| 957 | + | |
| 958 | + // 如果不为空 | |
| 959 | + if(BusListResult){ | |
| 960 | + | |
| 961 | + //获取第一个公交列表显示到map上 | |
| 962 | + var fstLine = BusListResult.getBusListItem(i); | |
| 963 | + | |
| 964 | + /*if(fstLine==undefined){ | |
| 965 | + | |
| 966 | + layer.confirm('系统无法生成该线路【'+lineNameValue+'】的站点与路段！请点击返回选择其它方式规划', {btn : [ '返回' ],icon: 3, title:'提示' }, function(index){ | |
| 967 | + | |
| 968 | + layer.closeAll(); | |
| 969 | + | |
| 970 | + if(i==0){ | |
| 971 | + | |
| 972 | + $('#upToolsMobal').show(); | |
| 973 | + | |
| 974 | + }else if(i==1){ | |
| 975 | + | |
| 976 | + $('#downToolsMobal').show(); | |
| 977 | + | |
| 978 | + } | |
| 979 | + | |
| 980 | + return; | |
| 981 | + }); | |
| 982 | + | |
| 983 | + }*/ | |
| 984 | + | |
| 985 | + if(fstLine==undefined){ | |
| 986 | + | |
| 987 | + | |
| 988 | + callback && callback(null); | |
| 989 | + | |
| 990 | + } | |
| 991 | + | |
| 992 | + busline.getBusLine(fstLine); | |
| 993 | + | |
| 994 | + } | |
| 995 | + | |
| 996 | + }, | |
| 997 | + | |
| 998 | + //设置公交线路查询后的回调函数.参数：rs: BusLine类型 | |
| 999 | + onGetBusLineComplete: function(BusLine){ | |
| 1000 | + | |
| 1001 | + // 如果不为空 | |
| 1002 | + if(BusLine){ | |
| 1003 | + | |
| 1004 | + callback && callback(BusLine); | |
| 1005 | + | |
| 1006 | + } | |
| 1007 | + | |
| 1008 | + } | |
| 1009 | + | |
| 1010 | + }); | |
| 1011 | + | |
| 1012 | + busline.getBusList(lineNameValue); | |
| 1013 | + | |
| 1014 | + }, | |
| 1015 | + | |
| 1016 | + clearMarkAndOverlays : function() { | |
| 1017 | + | |
| 1018 | + // 清楚地图覆盖物 | |
| 1019 | + mapBValue.clearOverlays(); | |
| 1020 | + | |
| 1021 | + mapBValue.removeOverlay(); | |
| 1022 | + | |
| 1023 | + } | |
| 1024 | + | |
| 1025 | + } | |
| 1026 | + | |
| 1027 | + return Bmap; | |
| 1028 | + | |
| 1029 | 1029 | }(); |
| 1030 | 1030 | \ No newline at end of file | ... | ... |
src/main/resources/static/pages/excep/js/speeding-map.js
| 1 | -/** | |
| 2 | - * 百度地图 | |
| 3 | - * | |
| 4 | - * - - - - - -》init：地图初始化 | |
| 5 | - * | |
| 6 | - * - - - - - -》getDistanceAndDuration：获取距离与时间 | |
| 7 | - * | |
| 8 | - * - - - - - -》drawingUpline：在地图上画出上行线路走向 | |
| 9 | - * | |
| 10 | - * - - - - - -》stationsPointsToLibraryPoint：根据站点坐标匹配库中的公交站点（手动规划） | |
| 11 | - */ | |
| 12 | - | |
| 13 | -var SpeedingMap = function () { | |
| 14 | - | |
| 15 | - /** SpeedingMap 全局变量定义 mapBValue：地图对象；polyUpline：走向折线；sectionList：截取过的路段 ；pointIndex：计算路段被切的次数; | |
| 16 | - * firstPoint:截取路段的第一个点;iseditStatus：路段是否在编辑状态；isCutSection ： 获取路段是否在截取状态*/ | |
| 17 | - var mapBValue = '', polyUpline='', sectionList = [], pointIndex = 0, iseditStatus = false, firstPoint = {}, isCutSection = false; | |
| 18 | - | |
| 19 | - var Bmap = { | |
| 20 | - | |
| 21 | - init : function() { | |
| 22 | - | |
| 23 | - // 设置中心点, | |
| 24 | - var CENTER_POINT = {lng : 121.528733,lat : 31.237425}; | |
| 25 | - | |
| 26 | - // 百度API Key | |
| 27 | - var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT'; | |
| 28 | - | |
| 29 | - // 初始化百度地图 | |
| 30 | - mapBValue = new BMap.Map("speedingMap"); | |
| 31 | - | |
| 32 | - //中心点和缩放级别 | |
| 33 | - mapBValue.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat),15); | |
| 34 | - | |
| 35 | - //启用地图拖拽事件，默认启用(可不写) | |
| 36 | - mapBValue.enableDragging(); | |
| 37 | - | |
| 38 | - //启用地图滚轮放大缩小 | |
| 39 | - mapBValue.enableScrollWheelZoom(); | |
| 40 | - | |
| 41 | - //禁用鼠标双击放大 | |
| 42 | - mapBValue.disableDoubleClickZoom(); | |
| 43 | - | |
| 44 | - //启用键盘上下左右键移动地图 | |
| 45 | - mapBValue.enableKeyboard(); | |
| 46 | - | |
| 47 | - return mapBValue; | |
| 48 | - }, | |
| 49 | - /** 获取第一个切路段的点 @return Point*/ | |
| 50 | - getFirstPoint : function() { | |
| 51 | - return firstPoint; | |
| 52 | - }, | |
| 53 | - /** 获取地图对象 @return 地图对象map */ | |
| 54 | - getmapBValue : function() { | |
| 55 | - | |
| 56 | - return mapBValue; | |
| 57 | - | |
| 58 | - }, | |
| 59 | - | |
| 60 | - getPolyUpline : function() { | |
| 61 | - | |
| 62 | - return polyUpline; | |
| 63 | - }, | |
| 64 | - | |
| 65 | - /** 获取截取过的路段 @return 路段对象List */ | |
| 66 | - getSectionList : function() { | |
| 67 | - | |
| 68 | - return sectionList; | |
| 69 | - | |
| 70 | - }, | |
| 71 | - setSectionList : function(list) { | |
| 72 | - | |
| 73 | - sectionList = list; | |
| 74 | - }, | |
| 75 | - initCutSectionPoint : function() { | |
| 76 | - sectionList = []; | |
| 77 | - var tbodyHtml = template('section_list',{list : sectionList}); | |
| 78 | - $('#section_table tbody').html(tbodyHtml); | |
| 79 | - }, | |
| 80 | - /** 获取切路段的点下标 @return int*/ | |
| 81 | - setPointIndex : function(index) { | |
| 82 | - pointIndex = index; | |
| 83 | - }, | |
| 84 | - getPointIndex : function() { | |
| 85 | - | |
| 86 | - return pointIndex; | |
| 87 | - | |
| 88 | - }, | |
| 89 | - /** 获取路段是否在编辑状态 @return boolean*/ | |
| 90 | - getIsEditStatus : function() { | |
| 91 | - return iseditStatus; | |
| 92 | - }, | |
| 93 | - setIsEditStatus : function(v) { | |
| 94 | - iseditStatus = v ; | |
| 95 | - }, | |
| 96 | - | |
| 97 | - /** 获取路段是否在截取状态 @return boolean*/ | |
| 98 | - getIsCutSection : function() { | |
| 99 | - return isCutSection; | |
| 100 | - }, | |
| 101 | - setIsCutSection : function(v) { | |
| 102 | - isCutSection = v ; | |
| 103 | - }, | |
| 104 | - | |
| 105 | - /** 获取距离与时间 @param <points：坐标点集合> */ | |
| 106 | - getDistanceAndDuration : function(points,callback){ | |
| 107 | - | |
| 108 | - // 获取长度 | |
| 109 | - var len = points.length; | |
| 110 | - (function(){ | |
| 111 | - | |
| 112 | - if (!arguments.callee.count) { | |
| 113 | - | |
| 114 | - arguments.callee.count = 0; | |
| 115 | - | |
| 116 | - } | |
| 117 | - | |
| 118 | - arguments.callee.count++; | |
| 119 | - | |
| 120 | - var index = parseInt(arguments.callee.count) - 1; | |
| 121 | - | |
| 122 | - if (index >= len-1) { | |
| 123 | - | |
| 124 | - callback && callback(points); | |
| 125 | - | |
| 126 | - return; | |
| 127 | - } | |
| 128 | - | |
| 129 | - // 当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。(当前正在执行的函数。) | |
| 130 | - var f = arguments.callee; | |
| 131 | - // 起点坐标 <坐标格式：40.056878,116.30815> | |
| 132 | - var origin = points[index].potion.lat + ',' + points[index].potion.lng; | |
| 133 | - | |
| 134 | - // 终点坐标 <坐标格式：40.056878,116.30815> | |
| 135 | - var destination = points[index+1].potion.lat + ',' + points[index+1].potion.lng; | |
| 136 | - var region = '上海'; | |
| 137 | - | |
| 138 | - var origin_region = '上海'; | |
| 139 | - | |
| 140 | - var destination_region = '上海'; | |
| 141 | - | |
| 142 | - var output = 'json'; | |
| 143 | - | |
| 144 | - var ak_My = 'wjlITmXeCek5MxyU3ZUBkTeU8B0o0npk'; | |
| 145 | - | |
| 146 | - /** | |
| 147 | - * origin：起点名称或经纬度； | |
| 148 | - * | |
| 149 | - * destination：终点名称或经纬度； | |
| 150 | - * | |
| 151 | - * origin_region：起始点所在城市，驾车导航时必填。 | |
| 152 | - * | |
| 153 | - * destination_region：终点所在城市，驾车导航时必填。 | |
| 154 | - * | |
| 155 | - * output :表示输出类型，可设置为xml或json，默认为xml。 | |
| 156 | - * | |
| 157 | - **/ | |
| 158 | - var paramsB = {origin:origin,destination:destination,region:region,origin_region:origin_region,destination_region:destination_region,output:output,ak:ak_My}; | |
| 159 | - | |
| 160 | - /** @description :未认证开发者默认配额为：2000次/天。 */ | |
| 161 | - $.ajax({ | |
| 162 | - | |
| 163 | - // 百度地图根据坐标获取两点之间的时间与距离 | |
| 164 | - url: 'http://api.map.baidu.com/direction/v1?mode=transit', | |
| 165 | - | |
| 166 | - data: paramsB, | |
| 167 | - | |
| 168 | - dataType: 'jsonp', | |
| 169 | - | |
| 170 | - success: function(r){ | |
| 171 | - | |
| 172 | - if(r) { | |
| 173 | - | |
| 174 | - if(r.message=='ok') { | |
| 175 | - | |
| 176 | - if(r.result.taxi==null) { | |
| 177 | - | |
| 178 | - // 获取距离(单位：米) | |
| 179 | - points[index+1].distance = 0; | |
| 180 | - | |
| 181 | - // 获取时间(单位：秒) | |
| 182 | - points[index+1].duration = 0; | |
| 183 | - | |
| 184 | - }else { | |
| 185 | - | |
| 186 | - // 获取距离(单位：米) | |
| 187 | - points[index+1].distance = r.result.taxi.distance; | |
| 188 | - | |
| 189 | - // 获取时间(单位：秒) | |
| 190 | - points[index+1].duration = r.result.taxi.duration; | |
| 191 | - | |
| 192 | - } | |
| 193 | - | |
| 194 | - | |
| 195 | - } | |
| 196 | - | |
| 197 | - } | |
| 198 | - | |
| 199 | - f(); | |
| 200 | - } | |
| 201 | - }); | |
| 202 | - | |
| 203 | - })(); | |
| 204 | - | |
| 205 | - }, | |
| 206 | - // 在地图上画出上行线路走向 | |
| 207 | - drawingUpline01 : function (polylineArray,polyline_center,data) { | |
| 208 | - var polyUpline01 = 'polyline' + '_' + data.sectionrouteId; | |
| 209 | - // 创建线路走向 | |
| 210 | - polyUpline01 = new BMap.Polyline(polylineArray, {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5}); | |
| 211 | - polyUpline01.data = data; | |
| 212 | - // 把折线添加到地图上 | |
| 213 | - mapBValue.addOverlay(polyUpline01); | |
| 214 | - var sectionPoint = []; | |
| 215 | - // 线路单击事件 | |
| 216 | - polyUpline01.addEventListener('click',function(e) { | |
| 217 | - if(SpeedingMap.getIsEditStatus()) { | |
| 218 | - layer.msg('请先保存正在编辑的路段信息...'); | |
| 219 | - return false; | |
| 220 | - } | |
| 221 | - if(SpeedingMap.getIsCutSection()) { | |
| 222 | - layer.msg('请先撤销所有切路段的点...'); | |
| 223 | - return false; | |
| 224 | - } | |
| 225 | - polyUpline01.enableEditing(); | |
| 226 | - SpeedingMap.setIsEditStatus(true); | |
| 227 | - }); | |
| 228 | - | |
| 229 | - // 添加路段双击事件 | |
| 230 | - polyUpline01.addEventListener("dblclick",function(e){ | |
| 231 | - if(SpeedingMap.getIsCutSection()) { | |
| 232 | - layer.msg('请先撤销所有切路段的点...'); | |
| 233 | - return false; | |
| 234 | - } | |
| 235 | - SpeedingMap.setIsEditStatus(false); | |
| 236 | - // 关闭 | |
| 237 | - layer.closeAll(); | |
| 238 | - polyUpline01.disableEditing(); | |
| 239 | - EditSectionObj.setEitdSection(polyUpline01.data); | |
| 240 | - // 获取折线坐标集合 | |
| 241 | - var editPloyLineArray = polyUpline01.getPath(); | |
| 242 | - EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 243 | - sectionList = []; | |
| 244 | - var tbodyHtml = template('section_list',{list : sectionList}); | |
| 245 | - // 截取路段 | |
| 246 | - $('#section_table tbody').html(tbodyHtml); | |
| 247 | - // 加载修改路段弹出层mobal页面 | |
| 248 | - $.get('editsection.html', function(m){ | |
| 249 | - $(pjaxContainer).append(m); | |
| 250 | - $('#edit_section_mobal_cache').trigger('editSectionMobalCache_show', [SpeedingMap,GetAjaxData,EditSectionObj,PublicFunctions]); | |
| 251 | - }); | |
| 252 | - }); | |
| 253 | - | |
| 254 | - // 路段右击事件 | |
| 255 | - var editSection = function(e,ee,marker){ | |
| 256 | - if(SpeedingMap.getIsEditStatus()) { | |
| 257 | - layer.msg('请先保存正在编辑的路段信息...'); | |
| 258 | - return false; | |
| 259 | - } | |
| 260 | - var lng = e.lng; | |
| 261 | - var lat = e.lat; | |
| 262 | - var sectionName = null; | |
| 263 | - var marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建点 | |
| 264 | - marker.isFlag = true; | |
| 265 | - if(pointIndex == 0) { | |
| 266 | - sectionPoint[pointIndex] = {lng:lng , lat:lat}; | |
| 267 | - layer.msg('进入切路段状态，请选择本路段的终点！'); | |
| 268 | - mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 269 | - firstPoint = {lng:lng, lat:lat}; | |
| 270 | - pointIndex++; | |
| 271 | - EditSectionObj.setEitdSection(polyUpline01.data); | |
| 272 | - // 获取折线坐标集合 | |
| 273 | - var editPloyLineArray = polyUpline01.getPath(); | |
| 274 | - EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 275 | - } else if (pointIndex > 0) { | |
| 276 | - layer.prompt({title: '请输入路段名！'}, function(sectionName, index){ | |
| 277 | - pointList = []; | |
| 278 | - sectionPoint[pointIndex] = {lng:lng , lat:lat}; | |
| 279 | - pointList[0] = sectionPoint[pointIndex-1]; | |
| 280 | - pointList[1] = sectionPoint[pointIndex]; | |
| 281 | - sectionList.push({name:sectionName, section:pointList}); | |
| 282 | - layer.close(index); | |
| 283 | - layer.msg('路段截取成功，请选择下一个路段的终点'); | |
| 284 | - mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 285 | - var tbodyHtml = template('section_list',{list : sectionList}); | |
| 286 | - // 截取路段 | |
| 287 | - $('#section_table tbody').html(tbodyHtml); | |
| 288 | - pointIndex++; | |
| 289 | - }); | |
| 290 | - } | |
| 291 | - SpeedingMap.setIsCutSection(true); | |
| 292 | - } | |
| 293 | - var markerMenu=new BMap.ContextMenu(); | |
| 294 | - markerMenu.addItem(new BMap.MenuItem('切路段',editSection.bind(polyUpline01))); | |
| 295 | - polyUpline01.addContextMenu(markerMenu); | |
| 296 | - | |
| 297 | - | |
| 298 | - var PanOptions_ ={noAnimation :true}; | |
| 299 | - mapBValue.reset(); | |
| 300 | - mapBValue.panTo(polyline_center,PanOptions_); | |
| 301 | - mapBValue.panBy(500,-510,PanOptions_); | |
| 302 | - mapBValue.setZoom(14); | |
| 303 | - }, | |
| 304 | - // 删除点刷新cutSectionTable | |
| 305 | - refreshCutSectionTable : function() { | |
| 306 | - var tbodyHtml = template('section_list',{list : sectionList}); | |
| 307 | - $('#section_table tbody').html(tbodyHtml); | |
| 308 | - }, | |
| 309 | - // 删除点刷新覆盖物 | |
| 310 | - deleteCutSectionPoint : function(point) { | |
| 311 | - var lng = point.lng; | |
| 312 | - var lat = point.lat; | |
| 313 | - var allOverlay = mapBValue.getOverlays(); | |
| 314 | - // 删除最后一个点 | |
| 315 | - for (var i = 0; i < allOverlay.length -1; i++){ | |
| 316 | - if(allOverlay[i].isFlag) { | |
| 317 | - if(allOverlay[i].point.lng == lng && allOverlay[i].point.lat == lat){ | |
| 318 | - mapBValue.removeOverlay(allOverlay[i]); | |
| 319 | - break; | |
| 320 | - } | |
| 321 | - } | |
| 322 | - } | |
| 323 | - }, | |
| 324 | - /** 在地图上画点 @param：<point_center：中心坐标点> */ | |
| 325 | - drawingUpStationPoint : function(point_center,stationName,s) { | |
| 326 | - | |
| 327 | - // 自定义标注物图片 | |
| 328 | - var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/gjzd.png',new BMap.Size(10, 10)); | |
| 329 | - | |
| 330 | - var html2 = '<div style="position: absolute; margin: 0pt; padding: 0pt; width: 160px; height: 26px; left: -10px; top: -35px; overflow: hidden;">' | |
| 331 | - + '<img class="rm3_image" style="border:none;left:0px; top:0px; position:absolute;" src="/pages/base/stationroute/css/img/back160.png">' | |
| 332 | - + '</div>' | |
| 333 | - + '<label class=" BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: inline; cursor: inherit; border: 0px none; padding: 2px 1px 1px; white-space: nowrap; font: 12px arial,simsun; z-index: 80; color: rgb(255, 102, 0); left: 15px; top: -35px;"><span style="float: left; color: #fdfdfd; margin-left: -22px; font-size: 6px;">'+ s+'</span>'+ stationName+'</label>'; | |
| 334 | - | |
| 335 | - | |
| 336 | - var myRichMarker1 = new BMapLib.RichMarker(html2, point_center,{ | |
| 337 | - "anchor" : new BMap.Size(-10,8), | |
| 338 | - "enableDragging" : true}); | |
| 339 | - | |
| 340 | - | |
| 341 | - myRichMarker1.disableDragging(); | |
| 342 | - mapBValue.addOverlay(myRichMarker1); | |
| 343 | - | |
| 344 | - | |
| 345 | - // 创建标注物 | |
| 346 | - marker = new BMap.Marker(point_center,{icon : icon_target}); | |
| 347 | - | |
| 348 | - // 允许覆盖物在map.clearOverlays方法中被清除。 | |
| 349 | - marker.enableMassClear(); | |
| 350 | - | |
| 351 | - mapBValue.addOverlay(marker); | |
| 352 | - }, | |
| 353 | - | |
| 354 | - // 根据站点坐标匹配库中的公交站点（手动规划） | |
| 355 | - stationsPointsToLibraryPoint : function(arra,callback) { | |
| 356 | - // 获取长度 | |
| 357 | - var len = arra.length; | |
| 358 | - var station = {}; | |
| 359 | - var stationList = []; | |
| 360 | - (function(){ | |
| 361 | - if (!arguments.callee.count) { | |
| 362 | - arguments.callee.count = 0; | |
| 363 | - } | |
| 364 | - arguments.callee.count++; | |
| 365 | - var index = parseInt(arguments.callee.count) - 1; | |
| 366 | - if (index >= len) { | |
| 367 | - callback && callback(stationList); | |
| 368 | - return ; | |
| 369 | - } | |
| 370 | - var f = arguments.callee; | |
| 371 | - station = arra[index]; | |
| 372 | - if(arra[index].name!=''){ | |
| 373 | - | |
| 374 | - $.get('/station/matchStation',station,function(resultStation) { | |
| 375 | - stationList.push({name:resultStation.name ,wgs:arra[index].wgs,potion:{lng:resultStation.potion_lng, lat:resultStation.potion_lat}, isHave:resultStation.isHave , id:resultStation.id}); | |
| 376 | - f(); | |
| 377 | - }); | |
| 378 | - }else { | |
| 379 | - f(); | |
| 380 | - } | |
| 381 | - })() | |
| 382 | - }, | |
| 383 | - clearMarkAndOverlays : function() { | |
| 384 | - | |
| 385 | - // 清楚地图覆盖物 | |
| 386 | - mapBValue.clearOverlays(); | |
| 387 | - | |
| 388 | - mapBValue.removeOverlay(); | |
| 389 | - | |
| 390 | - } | |
| 391 | - | |
| 392 | - } | |
| 393 | - | |
| 394 | - return Bmap; | |
| 395 | - | |
| 1 | +/** | |
| 2 | + * 百度地图 | |
| 3 | + * | |
| 4 | + * - - - - - -》init：地图初始化 | |
| 5 | + * | |
| 6 | + * - - - - - -》getDistanceAndDuration：获取距离与时间 | |
| 7 | + * | |
| 8 | + * - - - - - -》drawingUpline：在地图上画出上行线路走向 | |
| 9 | + * | |
| 10 | + * - - - - - -》stationsPointsToLibraryPoint：根据站点坐标匹配库中的公交站点（手动规划） | |
| 11 | + */ | |
| 12 | + | |
| 13 | +var SpeedingMap = function () { | |
| 14 | + | |
| 15 | + /** SpeedingMap 全局变量定义 mapBValue：地图对象；polyUpline：走向折线；sectionList：截取过的路段 ；pointIndex：计算路段被切的次数; | |
| 16 | + * firstPoint:截取路段的第一个点;iseditStatus：路段是否在编辑状态；isCutSection ： 获取路段是否在截取状态*/ | |
| 17 | + var mapBValue = '', polyUpline='', sectionList = [], pointIndex = 0, iseditStatus = false, firstPoint = {}, isCutSection = false; | |
| 18 | + | |
| 19 | + var Bmap = { | |
| 20 | + | |
| 21 | + init : function() { | |
| 22 | + | |
| 23 | + // 设置中心点, | |
| 24 | + var CENTER_POINT = {lng : 121.528733,lat : 31.237425}; | |
| 25 | + | |
| 26 | + // 百度API Key | |
| 27 | + var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT'; | |
| 28 | + | |
| 29 | + // 初始化百度地图 | |
| 30 | + mapBValue = new BMap.Map("speedingMap"); | |
| 31 | + | |
| 32 | + //中心点和缩放级别 | |
| 33 | + mapBValue.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat),15); | |
| 34 | + | |
| 35 | + //启用地图拖拽事件，默认启用(可不写) | |
| 36 | + mapBValue.enableDragging(); | |
| 37 | + | |
| 38 | + //启用地图滚轮放大缩小 | |
| 39 | + mapBValue.enableScrollWheelZoom(); | |
| 40 | + | |
| 41 | + //禁用鼠标双击放大 | |
| 42 | + mapBValue.disableDoubleClickZoom(); | |
| 43 | + | |
| 44 | + //启用键盘上下左右键移动地图 | |
| 45 | + mapBValue.enableKeyboard(); | |
| 46 | + | |
| 47 | + return mapBValue; | |
| 48 | + }, | |
| 49 | + /** 获取第一个切路段的点 @return Point*/ | |
| 50 | + getFirstPoint : function() { | |
| 51 | + return firstPoint; | |
| 52 | + }, | |
| 53 | + /** 获取地图对象 @return 地图对象map */ | |
| 54 | + getmapBValue : function() { | |
| 55 | + | |
| 56 | + return mapBValue; | |
| 57 | + | |
| 58 | + }, | |
| 59 | + | |
| 60 | + getPolyUpline : function() { | |
| 61 | + | |
| 62 | + return polyUpline; | |
| 63 | + }, | |
| 64 | + | |
| 65 | + /** 获取截取过的路段 @return 路段对象List */ | |
| 66 | + getSectionList : function() { | |
| 67 | + | |
| 68 | + return sectionList; | |
| 69 | + | |
| 70 | + }, | |
| 71 | + setSectionList : function(list) { | |
| 72 | + | |
| 73 | + sectionList = list; | |
| 74 | + }, | |
| 75 | + initCutSectionPoint : function() { | |
| 76 | + sectionList = []; | |
| 77 | + var tbodyHtml = template('section_list',{list : sectionList}); | |
| 78 | + $('#section_table tbody').html(tbodyHtml); | |
| 79 | + }, | |
| 80 | + /** 获取切路段的点下标 @return int*/ | |
| 81 | + setPointIndex : function(index) { | |
| 82 | + pointIndex = index; | |
| 83 | + }, | |
| 84 | + getPointIndex : function() { | |
| 85 | + | |
| 86 | + return pointIndex; | |
| 87 | + | |
| 88 | + }, | |
| 89 | + /** 获取路段是否在编辑状态 @return boolean*/ | |
| 90 | + getIsEditStatus : function() { | |
| 91 | + return iseditStatus; | |
| 92 | + }, | |
| 93 | + setIsEditStatus : function(v) { | |
| 94 | + iseditStatus = v ; | |
| 95 | + }, | |
| 96 | + | |
| 97 | + /** 获取路段是否在截取状态 @return boolean*/ | |
| 98 | + getIsCutSection : function() { | |
| 99 | + return isCutSection; | |
| 100 | + }, | |
| 101 | + setIsCutSection : function(v) { | |
| 102 | + isCutSection = v ; | |
| 103 | + }, | |
| 104 | + | |
| 105 | + /** 获取距离与时间 @param <points：坐标点集合> */ | |
| 106 | + getDistanceAndDuration : function(points,callback){ | |
| 107 | + | |
| 108 | + // 获取长度 | |
| 109 | + var len = points.length; | |
| 110 | + (function(){ | |
| 111 | + | |
| 112 | + if (!arguments.callee.count) { | |
| 113 | + | |
| 114 | + arguments.callee.count = 0; | |
| 115 | + | |
| 116 | + } | |
| 117 | + | |
| 118 | + arguments.callee.count++; | |
| 119 | + | |
| 120 | + var index = parseInt(arguments.callee.count) - 1; | |
| 121 | + | |
| 122 | + if (index >= len-1) { | |
| 123 | + | |
| 124 | + callback && callback(points); | |
| 125 | + | |
| 126 | + return; | |
| 127 | + } | |
| 128 | + | |
| 129 | + // 当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。(当前正在执行的函数。) | |
| 130 | + var f = arguments.callee; | |
| 131 | + // 起点坐标 <坐标格式：40.056878,116.30815> | |
| 132 | + var origin = points[index].potion.lat + ',' + points[index].potion.lng; | |
| 133 | + | |
| 134 | + // 终点坐标 <坐标格式：40.056878,116.30815> | |
| 135 | + var destination = points[index+1].potion.lat + ',' + points[index+1].potion.lng; | |
| 136 | + var region = '上海'; | |
| 137 | + | |
| 138 | + var origin_region = '上海'; | |
| 139 | + | |
| 140 | + var destination_region = '上海'; | |
| 141 | + | |
| 142 | + var output = 'json'; | |
| 143 | + | |
| 144 | + var ak_My = 'wjlITmXeCek5MxyU3ZUBkTeU8B0o0npk'; | |
| 145 | + | |
| 146 | + /** | |
| 147 | + * origin：起点名称或经纬度； | |
| 148 | + * | |
| 149 | + * destination：终点名称或经纬度； | |
| 150 | + * | |
| 151 | + * origin_region：起始点所在城市，驾车导航时必填。 | |
| 152 | + * | |
| 153 | + * destination_region：终点所在城市，驾车导航时必填。 | |
| 154 | + * | |
| 155 | + * output :表示输出类型，可设置为xml或json，默认为xml。 | |
| 156 | + * | |
| 157 | + **/ | |
| 158 | + var paramsB = {origin:origin,destination:destination,region:region,origin_region:origin_region,destination_region:destination_region,output:output,ak:ak_My}; | |
| 159 | + | |
| 160 | + /** @description :未认证开发者默认配额为：2000次/天。 */ | |
| 161 | + $.ajax({ | |
| 162 | + | |
| 163 | + // 百度地图根据坐标获取两点之间的时间与距离 | |
| 164 | + url: '//api.map.baidu.com/direction/v1?mode=transit', | |
| 165 | + | |
| 166 | + data: paramsB, | |
| 167 | + | |
| 168 | + dataType: 'jsonp', | |
| 169 | + | |
| 170 | + success: function(r){ | |
| 171 | + | |
| 172 | + if(r) { | |
| 173 | + | |
| 174 | + if(r.message=='ok') { | |
| 175 | + | |
| 176 | + if(r.result.taxi==null) { | |
| 177 | + | |
| 178 | + // 获取距离(单位：米) | |
| 179 | + points[index+1].distance = 0; | |
| 180 | + | |
| 181 | + // 获取时间(单位：秒) | |
| 182 | + points[index+1].duration = 0; | |
| 183 | + | |
| 184 | + }else { | |
| 185 | + | |
| 186 | + // 获取距离(单位：米) | |
| 187 | + points[index+1].distance = r.result.taxi.distance; | |
| 188 | + | |
| 189 | + // 获取时间(单位：秒) | |
| 190 | + points[index+1].duration = r.result.taxi.duration; | |
| 191 | + | |
| 192 | + } | |
| 193 | + | |
| 194 | + | |
| 195 | + } | |
| 196 | + | |
| 197 | + } | |
| 198 | + | |
| 199 | + f(); | |
| 200 | + } | |
| 201 | + }); | |
| 202 | + | |
| 203 | + })(); | |
| 204 | + | |
| 205 | + }, | |
| 206 | + // 在地图上画出上行线路走向 | |
| 207 | + drawingUpline01 : function (polylineArray,polyline_center,data) { | |
| 208 | + var polyUpline01 = 'polyline' + '_' + data.sectionrouteId; | |
| 209 | + // 创建线路走向 | |
| 210 | + polyUpline01 = new BMap.Polyline(polylineArray, {strokeColor : "blue",strokeWeight : 6,strokeOpacity : 0.5}); | |
| 211 | + polyUpline01.data = data; | |
| 212 | + // 把折线添加到地图上 | |
| 213 | + mapBValue.addOverlay(polyUpline01); | |
| 214 | + var sectionPoint = []; | |
| 215 | + // 线路单击事件 | |
| 216 | + polyUpline01.addEventListener('click',function(e) { | |
| 217 | + if(SpeedingMap.getIsEditStatus()) { | |
| 218 | + layer.msg('请先保存正在编辑的路段信息...'); | |
| 219 | + return false; | |
| 220 | + } | |
| 221 | + if(SpeedingMap.getIsCutSection()) { | |
| 222 | + layer.msg('请先撤销所有切路段的点...'); | |
| 223 | + return false; | |
| 224 | + } | |
| 225 | + polyUpline01.enableEditing(); | |
| 226 | + SpeedingMap.setIsEditStatus(true); | |
| 227 | + }); | |
| 228 | + | |
| 229 | + // 添加路段双击事件 | |
| 230 | + polyUpline01.addEventListener("dblclick",function(e){ | |
| 231 | + if(SpeedingMap.getIsCutSection()) { | |
| 232 | + layer.msg('请先撤销所有切路段的点...'); | |
| 233 | + return false; | |
| 234 | + } | |
| 235 | + SpeedingMap.setIsEditStatus(false); | |
| 236 | + // 关闭 | |
| 237 | + layer.closeAll(); | |
| 238 | + polyUpline01.disableEditing(); | |
| 239 | + EditSectionObj.setEitdSection(polyUpline01.data); | |
| 240 | + // 获取折线坐标集合 | |
| 241 | + var editPloyLineArray = polyUpline01.getPath(); | |
| 242 | + EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 243 | + sectionList = []; | |
| 244 | + var tbodyHtml = template('section_list',{list : sectionList}); | |
| 245 | + // 截取路段 | |
| 246 | + $('#section_table tbody').html(tbodyHtml); | |
| 247 | + // 加载修改路段弹出层mobal页面 | |
| 248 | + $.get('editsection.html', function(m){ | |
| 249 | + $(pjaxContainer).append(m); | |
| 250 | + $('#edit_section_mobal_cache').trigger('editSectionMobalCache_show', [SpeedingMap,GetAjaxData,EditSectionObj,PublicFunctions]); | |
| 251 | + }); | |
| 252 | + }); | |
| 253 | + | |
| 254 | + // 路段右击事件 | |
| 255 | + var editSection = function(e,ee,marker){ | |
| 256 | + if(SpeedingMap.getIsEditStatus()) { | |
| 257 | + layer.msg('请先保存正在编辑的路段信息...'); | |
| 258 | + return false; | |
| 259 | + } | |
| 260 | + var lng = e.lng; | |
| 261 | + var lat = e.lat; | |
| 262 | + var sectionName = null; | |
| 263 | + var marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建点 | |
| 264 | + marker.isFlag = true; | |
| 265 | + if(pointIndex == 0) { | |
| 266 | + sectionPoint[pointIndex] = {lng:lng , lat:lat}; | |
| 267 | + layer.msg('进入切路段状态，请选择本路段的终点！'); | |
| 268 | + mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 269 | + firstPoint = {lng:lng, lat:lat}; | |
| 270 | + pointIndex++; | |
| 271 | + EditSectionObj.setEitdSection(polyUpline01.data); | |
| 272 | + // 获取折线坐标集合 | |
| 273 | + var editPloyLineArray = polyUpline01.getPath(); | |
| 274 | + EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray)); | |
| 275 | + } else if (pointIndex > 0) { | |
| 276 | + layer.prompt({title: '请输入路段名！'}, function(sectionName, index){ | |
| 277 | + pointList = []; | |
| 278 | + sectionPoint[pointIndex] = {lng:lng , lat:lat}; | |
| 279 | + pointList[0] = sectionPoint[pointIndex-1]; | |
| 280 | + pointList[1] = sectionPoint[pointIndex]; | |
| 281 | + sectionList.push({name:sectionName, section:pointList}); | |
| 282 | + layer.close(index); | |
| 283 | + layer.msg('路段截取成功，请选择下一个路段的终点'); | |
| 284 | + mapBValue.addOverlay(marker);// 添加覆盖物 | |
| 285 | + var tbodyHtml = template('section_list',{list : sectionList}); | |
| 286 | + // 截取路段 | |
| 287 | + $('#section_table tbody').html(tbodyHtml); | |
| 288 | + pointIndex++; | |
| 289 | + }); | |
| 290 | + } | |
| 291 | + SpeedingMap.setIsCutSection(true); | |
| 292 | + } | |
| 293 | + var markerMenu=new BMap.ContextMenu(); | |
| 294 | + markerMenu.addItem(new BMap.MenuItem('切路段',editSection.bind(polyUpline01))); | |
| 295 | + polyUpline01.addContextMenu(markerMenu); | |
| 296 | + | |
| 297 | + | |
| 298 | + var PanOptions_ ={noAnimation :true}; | |
| 299 | + mapBValue.reset(); | |
| 300 | + mapBValue.panTo(polyline_center,PanOptions_); | |
| 301 | + mapBValue.panBy(500,-510,PanOptions_); | |
| 302 | + mapBValue.setZoom(14); | |
| 303 | + }, | |
| 304 | + // 删除点刷新cutSectionTable | |
| 305 | + refreshCutSectionTable : function() { | |
| 306 | + var tbodyHtml = template('section_list',{list : sectionList}); | |
| 307 | + $('#section_table tbody').html(tbodyHtml); | |
| 308 | + }, | |
| 309 | + // 删除点刷新覆盖物 | |
| 310 | + deleteCutSectionPoint : function(point) { | |
| 311 | + var lng = point.lng; | |
| 312 | + var lat = point.lat; | |
| 313 | + var allOverlay = mapBValue.getOverlays(); | |
| 314 | + // 删除最后一个点 | |
| 315 | + for (var i = 0; i < allOverlay.length -1; i++){ | |
| 316 | + if(allOverlay[i].isFlag) { | |
| 317 | + if(allOverlay[i].point.lng == lng && allOverlay[i].point.lat == lat){ | |
| 318 | + mapBValue.removeOverlay(allOverlay[i]); | |
| 319 | + break; | |
| 320 | + } | |
| 321 | + } | |
| 322 | + } | |
| 323 | + }, | |
| 324 | + /** 在地图上画点 @param：<point_center：中心坐标点> */ | |
| 325 | + drawingUpStationPoint : function(point_center,stationName,s) { | |
| 326 | + | |
| 327 | + // 自定义标注物图片 | |
| 328 | + var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/gjzd.png',new BMap.Size(10, 10)); | |
| 329 | + | |
| 330 | + var html2 = '<div style="position: absolute; margin: 0pt; padding: 0pt; width: 160px; height: 26px; left: -10px; top: -35px; overflow: hidden;">' | |
| 331 | + + '<img class="rm3_image" style="border:none;left:0px; top:0px; position:absolute;" src="/pages/base/stationroute/css/img/back160.png">' | |
| 332 | + + '</div>' | |
| 333 | + + '<label class=" BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: inline; cursor: inherit; border: 0px none; padding: 2px 1px 1px; white-space: nowrap; font: 12px arial,simsun; z-index: 80; color: rgb(255, 102, 0); left: 15px; top: -35px;"><span style="float: left; color: #fdfdfd; margin-left: -22px; font-size: 6px;">'+ s+'</span>'+ stationName+'</label>'; | |
| 334 | + | |
| 335 | + | |
| 336 | + var myRichMarker1 = new BMapLib.RichMarker(html2, point_center,{ | |
| 337 | + "anchor" : new BMap.Size(-10,8), | |
| 338 | + "enableDragging" : true}); | |
| 339 | + | |
| 340 | + | |
| 341 | + myRichMarker1.disableDragging(); | |
| 342 | + mapBValue.addOverlay(myRichMarker1); | |
| 343 | + | |
| 344 | + | |
| 345 | + // 创建标注物 | |
| 346 | + marker = new BMap.Marker(point_center,{icon : icon_target}); | |
| 347 | + | |
| 348 | + // 允许覆盖物在map.clearOverlays方法中被清除。 | |
| 349 | + marker.enableMassClear(); | |
| 350 | + | |
| 351 | + mapBValue.addOverlay(marker); | |
| 352 | + }, | |
| 353 | + | |
| 354 | + // 根据站点坐标匹配库中的公交站点（手动规划） | |
| 355 | + stationsPointsToLibraryPoint : function(arra,callback) { | |
| 356 | + // 获取长度 | |
| 357 | + var len = arra.length; | |
| 358 | + var station = {}; | |
| 359 | + var stationList = []; | |
| 360 | + (function(){ | |
| 361 | + if (!arguments.callee.count) { | |
| 362 | + arguments.callee.count = 0; | |
| 363 | + } | |
| 364 | + arguments.callee.count++; | |
| 365 | + var index = parseInt(arguments.callee.count) - 1; | |
| 366 | + if (index >= len) { | |
| 367 | + callback && callback(stationList); | |
| 368 | + return ; | |
| 369 | + } | |
| 370 | + var f = arguments.callee; | |
| 371 | + station = arra[index]; | |
| 372 | + if(arra[index].name!=''){ | |
| 373 | + | |
| 374 | + $.get('/station/matchStation',station,function(resultStation) { | |
| 375 | + stationList.push({name:resultStation.name ,wgs:arra[index].wgs,potion:{lng:resultStation.potion_lng, lat:resultStation.potion_lat}, isHave:resultStation.isHave , id:resultStation.id}); | |
| 376 | + f(); | |
| 377 | + }); | |
| 378 | + }else { | |
| 379 | + f(); | |
| 380 | + } | |
| 381 | + })() | |
| 382 | + }, | |
| 383 | + clearMarkAndOverlays : function() { | |
| 384 | + | |
| 385 | + // 清楚地图覆盖物 | |
| 386 | + mapBValue.clearOverlays(); | |
| 387 | + | |
| 388 | + mapBValue.removeOverlay(); | |
| 389 | + | |
| 390 | + } | |
| 391 | + | |
| 392 | + } | |
| 393 | + | |
| 394 | + return Bmap; | |
| 395 | + | |
| 396 | 396 | }(); |
| 397 | 397 | \ No newline at end of file | ... | ... |
src/main/resources/static/pages/mapmonitor/real/js/map_platform_old.js
| 1 | -var realMap = (function() { | |
| 2 | - | |
| 3 | - function getJSONP(url, data ,callback){ | |
| 4 | - $.ajax({ | |
| 5 | - url:url, | |
| 6 | - data: data, | |
| 7 | - dataType:'jsonp', | |
| 8 | - success:callback, | |
| 9 | - error: function(e){ | |
| 10 | - alert('error: jsonp,' + url); | |
| 11 | - } | |
| 12 | - }); | |
| 13 | - } | |
| 14 | - | |
| 15 | - /** | |
| 16 | - * 透明点，用于替换隐藏百度Marker的icon | |
| 17 | - */ | |
| 18 | - var tmIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKTWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaOWJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHiwmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryMAgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0lYqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHiNLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYAQH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6cwR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBiewhi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1cQPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqOY4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hMWEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgohJZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSUEko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/pdLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Yb1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7OUndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsbdi97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxrPGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H08PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+Hvqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsGLww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjgR2yIuB9pGZkX+X0UKSoyqi7qUbRTdHF09yzWrORZ+2e9jvGPqYy5O9tqtnJ2Z6xqbFJsY+ybuIC4qriBeIf4RfGXEnQTJAntieTE2MQ9ieNzAudsmjOc5JpUlnRjruXcorkX5unOy553PFk1WZB8OIWYEpeyP+WDIEJQLxhP5aduTR0T8oSbhU9FvqKNolGxt7hKPJLmnVaV9jjdO31D+miGT0Z1xjMJT1IreZEZkrkj801WRNberM/ZcdktOZSclJyjUg1plrQr1zC3KLdPZisrkw3keeZtyhuTh8r35CP5c/PbFWyFTNGjtFKuUA4WTC+oK3hbGFt4uEi9SFrUM99m/ur5IwuCFny9kLBQuLCz2Lh4WfHgIr9FuxYji1MXdy4xXVK6ZHhp8NJ9y2jLspb9UOJYUlXyannc8o5Sg9KlpUMrglc0lamUycturvRauWMVYZVkVe9ql9VbVn8qF5VfrHCsqK74sEa45uJXTl/VfPV5bdra3kq3yu3rSOuk626s91m/r0q9akHV0IbwDa0b8Y3lG19tSt50oXpq9Y7NtM3KzQM1YTXtW8y2rNvyoTaj9nqdf13LVv2tq7e+2Sba1r/dd3vzDoMdFTve75TsvLUreFdrvUV99W7S7oLdjxpiG7q/5n7duEd3T8Wej3ulewf2Re/ranRvbNyvv7+yCW1SNo0eSDpw5ZuAb9qb7Zp3tXBaKg7CQeXBJ9+mfHvjUOihzsPcw83fmX+39QjrSHkr0jq/dawto22gPaG97+iMo50dXh1Hvrf/fu8x42N1xzWPV56gnSg98fnkgpPjp2Snnp1OPz3Umdx590z8mWtdUV29Z0PPnj8XdO5Mt1/3yfPe549d8Lxw9CL3Ytslt0utPa49R35w/eFIr1tv62X3y+1XPK509E3rO9Hv03/6asDVc9f41y5dn3m978bsG7duJt0cuCW69fh29u0XdwruTNxdeo94r/y+2v3qB/oP6n+0/rFlwG3g+GDAYM/DWQ/vDgmHnv6U/9OH4dJHzEfVI0YjjY+dHx8bDRq98mTOk+GnsqcTz8p+Vv9563Or59/94vtLz1j82PAL+YvPv655qfNy76uprzrHI8cfvM55PfGm/K3O233vuO+638e9H5ko/ED+UPPR+mPHp9BP9z7nfP78L/eE8/sl0p8zAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAbSURBVHjaYvz//z8DAwMDAxMDFAAAAAD//wMAMAYDAW/BVI8AAAAASUVORK5CYII='; | |
| 19 | - | |
| 20 | - var REAL_BAIDU_TEXT = '百度地图', REAL_GAODE_TEXT = '高德地图'; | |
| 21 | - | |
| 22 | - // 中心点 （上海市浦东新区政府） | |
| 23 | - var CENTER_POINT = { | |
| 24 | - lng : 121.544336, | |
| 25 | - lat : 31.221315 | |
| 26 | - }; | |
| 27 | - | |
| 28 | - // 图层容器 | |
| 29 | - var mapContainer = $('#mapContainer'); | |
| 30 | - // 路况按钮 | |
| 31 | - var trafficBtn = $('#trafficItem'); | |
| 32 | - | |
| 33 | - var storage = window.localStorage; | |
| 34 | - | |
| 35 | - var currentMap; | |
| 36 | - | |
| 37 | - var city = "上海"; | |
| 38 | - | |
| 39 | - //百度API Key | |
| 40 | - var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT'; | |
| 41 | - | |
| 42 | - var bd_gps_info_win_opts = { | |
| 43 | - width : 190, | |
| 44 | - height: 255, | |
| 45 | - enableMessage:true | |
| 46 | - }; | |
| 47 | - | |
| 48 | - //线路路由 | |
| 49 | - var polylines; | |
| 50 | - | |
| 51 | - //百度 -轨迹回放点聚合 | |
| 52 | - //var historyClusterer; | |
| 53 | - | |
| 54 | - var markerClusterer; | |
| 55 | - | |
| 56 | - //设备号和marker对照 | |
| 57 | - var markersMap; | |
| 58 | - var real_map = { | |
| 59 | - getMap: function(){ | |
| 60 | - return currentMap; | |
| 61 | - }, | |
| 62 | - init: function(){ | |
| 63 | - var m = storage.getItem('real_map'); | |
| 64 | - if(m && m == REAL_GAODE_TEXT) | |
| 65 | - real_map.gaode.init(); | |
| 66 | - else | |
| 67 | - real_map.baidu.init(); | |
| 68 | - }, | |
| 69 | - //百度地图 | |
| 70 | - baidu : { | |
| 71 | - //初始化 | |
| 72 | - init : function() { | |
| 73 | - real_map.setText(REAL_BAIDU_TEXT); | |
| 74 | - | |
| 75 | - var map = new BMap.Map(mapContainer[0]); | |
| 76 | - //中心点和缩放级别 | |
| 77 | - map.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat), 15); | |
| 78 | - map.enableScrollWheelZoom(); | |
| 79 | - //加载完成 | |
| 80 | - map.addEventListener("tilesloaded", function() { | |
| 81 | - layer.closeAll(); | |
| 82 | - storage.setItem('real_map', REAL_BAIDU_TEXT); | |
| 83 | - }); | |
| 84 | - | |
| 85 | - // 路况控件 | |
| 86 | - var ctrl = new BMapLib.TrafficControl(); | |
| 87 | - map.addControl(ctrl); | |
| 88 | - | |
| 89 | - //historyClusterer = new BMapLib.MarkerClusterer(map, {isAverangeCenter : true,minClusterSize : 2}) | |
| 90 | - var isVisible; | |
| 91 | - trafficBtn.on('click', function() { | |
| 92 | - if (isVisible) { | |
| 93 | - ctrl.hide(); | |
| 94 | - isVisible = false; | |
| 95 | - //调整线路路由透明度 | |
| 96 | - $.each(polylines, function(){ | |
| 97 | - this.setStrokeOpacity(0.5); | |
| 98 | - }); | |
| 99 | - } else { | |
| 100 | - ctrl.show(); | |
| 101 | - isVisible = true; | |
| 102 | - //调整线路路由透明度 | |
| 103 | - $.each(polylines, function(){ | |
| 104 | - this.setStrokeOpacity(0.1); | |
| 105 | - }); | |
| 106 | - } | |
| 107 | - }); | |
| 108 | - //百度路况控件自身关闭按钮 | |
| 109 | - $('.portlet-fullscreen').on('click', '.maplibTc .maplibTcClose', function(){ | |
| 110 | - isVisible = false; | |
| 111 | - //调整线路路由透明度 | |
| 112 | - $.each(polylines, function(){ | |
| 113 | - this.setStrokeOpacity(0.5); | |
| 114 | - }); | |
| 115 | - }); | |
| 116 | - | |
| 117 | - $('#tcWrap.maplibTc').addClass('animated bounceInLeft'); | |
| 118 | - $('.maplibTcBtn_deskTop.anchorTR').remove(); | |
| 119 | - | |
| 120 | - //保存当前地图实例和名称 | |
| 121 | - currentMap = { | |
| 122 | - map: map, | |
| 123 | - mapName: REAL_BAIDU_TEXT, | |
| 124 | - fName : 'baidu' | |
| 125 | - } | |
| 126 | - | |
| 127 | - }, | |
| 128 | - clear: function(){ | |
| 129 | - currentMap.map.clearOverlays(); | |
| 130 | - markerClusterer && markerClusterer.clearMarkers(); | |
| 131 | - | |
| 132 | - }, | |
| 133 | - change : function() { | |
| 134 | - if(currentMap.mapName == REAL_BAIDU_TEXT) | |
| 135 | - return; | |
| 136 | - | |
| 137 | - showMsg(REAL_BAIDU_TEXT); | |
| 138 | - | |
| 139 | - real_map.destroy(); | |
| 140 | - real_map.baidu.init(); | |
| 141 | - }, | |
| 142 | - autocomplete: function(input, cb){ | |
| 143 | - var ac = new BMap.Autocomplete({ | |
| 144 | - 'location' : realMap.getMap().map, | |
| 145 | - 'input': input, | |
| 146 | - 'onSearchComplete': function(result){ | |
| 147 | - //隐藏默认的提示框 | |
| 148 | - ac.hide(); | |
| 149 | - cb && cb({type: 'baidu', result: result.wr}); | |
| 150 | - } | |
| 151 | - }); | |
| 152 | - | |
| 153 | - $('#' + input).on('keyup', function(){ | |
| 154 | - if(this.value == ''){ | |
| 155 | - $('.search_result').html(''); | |
| 156 | - return; | |
| 157 | - } | |
| 158 | - }); | |
| 159 | - | |
| 160 | - }, | |
| 161 | - setPlace: function(val){ | |
| 162 | - var map = currentMap.map; | |
| 163 | - map.clearOverlays(); | |
| 164 | - var local = new BMap.LocalSearch(map, { | |
| 165 | - onSearchComplete: function(){ | |
| 166 | - var poi = local.getResults().getPoi(0); | |
| 167 | - if(!poi){ | |
| 168 | - return; | |
| 169 | - } | |
| 170 | - var pp = poi.point; | |
| 171 | - map.centerAndZoom(pp, 18); | |
| 172 | - map.addOverlay(new BMap.Marker(pp)); | |
| 173 | - } | |
| 174 | - }); | |
| 175 | - | |
| 176 | - local.search(val); | |
| 177 | - }, | |
| 178 | - drawLine: function(route){ | |
| 179 | - var map = currentMap.map; | |
| 180 | - map.clearOverlays(); | |
| 181 | - polylines = []; | |
| 182 | - //画线路 | |
| 183 | - //从localStorage里读取路由信息 | |
| 184 | - //var route = JSON.parse(storage.getItem(lineCode + '_route')); | |
| 185 | - var upLineOps = {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5} | |
| 186 | - ,downLineOps = {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5}; | |
| 187 | - | |
| 188 | - var upPos = [], downPos = [], tempArray; | |
| 189 | - //上行 | |
| 190 | - if(route.up){ | |
| 191 | - $.each(route.up.split(','), function(){ | |
| 192 | - tempArray = this.split(' '); | |
| 193 | - upPos.push(new BMap.Point(tempArray[0], tempArray[1])); | |
| 194 | - }); | |
| 195 | - | |
| 196 | - var upLine = new BMap.Polyline(upPos, upLineOps); | |
| 197 | - map.addOverlay(upLine); | |
| 198 | - | |
| 199 | - polylines.push(upLine); | |
| 200 | - map.panTo(upPos[parseInt(upPos.length / 2)]); | |
| 201 | - } | |
| 202 | - //下行 | |
| 203 | - if(route.down){ | |
| 204 | - $.each(route.down.split(','), function(){ | |
| 205 | - tempArray = this.split(' '); | |
| 206 | - downPos.push(new BMap.Point(tempArray[0], tempArray[1])); | |
| 207 | - }); | |
| 208 | - | |
| 209 | - var downLine = new BMap.Polyline(downPos, downLineOps); | |
| 210 | - map.addOverlay(downLine); | |
| 211 | - polylines.push(downLine); | |
| 212 | - | |
| 213 | - } | |
| 214 | - }, | |
| 215 | - //批量将GPS信号画到地图上 | |
| 216 | - drawGpsMarker: function(gpsList){ | |
| 217 | - markersMap = {}; | |
| 218 | - var map = currentMap.map; | |
| 219 | - | |
| 220 | - markerClusterer && markerClusterer.clearMarkers(); | |
| 221 | - markerClusterer = new BMapLib.MarkerClusterer(map, {isAverangeCenter : true,minClusterSize : 3}); | |
| 222 | - real_map.baidu.coordsConvert(gpsList, function(){ | |
| 223 | - //绘制车辆位置 | |
| 224 | - var marker; | |
| 225 | - $.each(gpsList, function(i, gpsData){ | |
| 226 | - marker = createBDMarkerByGps(gpsData) | |
| 227 | - map.addOverlay(marker); | |
| 228 | - //marker加入点聚合 | |
| 229 | - markerClusterer.addMarker(marker); | |
| 230 | - | |
| 231 | - markersMap[gpsData.deviceId] = marker; | |
| 232 | - }); | |
| 233 | - | |
| 234 | - }); | |
| 235 | - }, | |
| 236 | - goToMarker: function(deviceId){ | |
| 237 | - var m = markersMap[deviceId]; | |
| 238 | - if(m){ | |
| 239 | - currentMap.map.panTo(m.point); | |
| 240 | - setTimeout(function(){ | |
| 241 | - bdOpenWindow(m); | |
| 242 | - }, 500); | |
| 243 | - } | |
| 244 | - }, | |
| 245 | - coordsConvert: function(list, cb){ | |
| 246 | - if(list.length > 100) | |
| 247 | - list = list.slice(0, 100); | |
| 248 | - | |
| 249 | - var coords = ''; | |
| 250 | - //拼接GPS坐标，一次性转换 | |
| 251 | - for (var i = 0, item; item = list[i++];) | |
| 252 | - coords += item.lon + ',' + item.lat + ';'; | |
| 253 | - coords = coords.substring(0, coords.length - 1); | |
| 254 | - getJSONP('http://api.map.baidu.com/geoconv/v1/',{coords: coords, ak: bdKey} | |
| 255 | - ,function(rt){ | |
| 256 | - $.each(rt.result, function(j, bdCoord){ | |
| 257 | - list[j].bd_coord = bdCoord; | |
| 258 | - }); | |
| 259 | - cb&&cb(); | |
| 260 | - }); | |
| 261 | - }, | |
| 262 | - //绘制轨迹回放 marker | |
| 263 | - addHistoryMarker: function(gps){ | |
| 264 | - | |
| 265 | - var marker = bdHistoryMarker(gps); | |
| 266 | - currentMap.map.addOverlay(marker); | |
| 267 | - | |
| 268 | - //historyClusterer.addMarker(marker); | |
| 269 | - return marker; | |
| 270 | - }, | |
| 271 | - //移动marker | |
| 272 | - moveMarker: function(marker , gps){ | |
| 273 | - marker.setPosition(new BMap.Point(gps.bd_lon, gps.bd_lat)); | |
| 274 | - //重新设置颜色 | |
| 275 | - marker.getLabel().setStyle({borderColor: bgColor(gps), backgroundColor: bgColor(gps)}); | |
| 276 | - }, | |
| 277 | - //居中marker | |
| 278 | - markerToCenter: function(marker){ | |
| 279 | - currentMap.map.panTo(marker.getPosition()); | |
| 280 | - }, | |
| 281 | - //删除marker | |
| 282 | - removeMarker: function(marker){ | |
| 283 | - currentMap.map.removeOverlay(marker); | |
| 284 | - } | |
| 285 | - }, | |
| 286 | - //高德地图 | |
| 287 | - gaode : { | |
| 288 | - init : function() { | |
| 289 | - var mapLoadAnim = '<div class="sk-cube-grid _center">'+ | |
| 290 | - '<div class="sk-cube sk-cube1"></div>'+ | |
| 291 | - '<div class="sk-cube sk-cube2"></div>'+ | |
| 292 | - '<div class="sk-cube sk-cube3"></div>'+ | |
| 293 | - '<div class="sk-cube sk-cube4"></div>'+ | |
| 294 | - '<div class="sk-cube sk-cube5"></div>'+ | |
| 295 | - '<div class="sk-cube sk-cube6"></div>'+ | |
| 296 | - '<div class="sk-cube sk-cube7"></div>'+ | |
| 297 | - '<div class="sk-cube sk-cube8"></div>'+ | |
| 298 | - '<div class="sk-cube sk-cube9"></div>'+ | |
| 299 | - '</div>'; | |
| 300 | - | |
| 301 | - mapContainer.html(mapLoadAnim); | |
| 302 | - | |
| 303 | - real_map.gaode.setStyle(); | |
| 304 | - real_map.setText(REAL_GAODE_TEXT); | |
| 305 | - | |
| 306 | - var map = new AMap.Map(mapContainer[0]); | |
| 307 | - // 地图中心和缩放级别 | |
| 308 | - map.setZoomAndCenter(14, [ CENTER_POINT.lng,CENTER_POINT.lat ]); | |
| 309 | - //加载完成 | |
| 310 | - AMap.event.addListener(map, 'complete', function() { | |
| 311 | - layer.closeAll(); | |
| 312 | - storage.setItem('real_map', REAL_GAODE_TEXT); | |
| 313 | - $('.sk-cube-grid._center').remove(); | |
| 314 | - }); | |
| 315 | - | |
| 316 | - // 实时路况图层 | |
| 317 | - var trafficLayer = new AMap.TileLayer.Traffic(); | |
| 318 | - trafficLayer.setMap(map); | |
| 319 | - trafficLayer.hide(); | |
| 320 | - | |
| 321 | - var isVisible; | |
| 322 | - trafficBtn.on('click', function() { | |
| 323 | - if (isVisible) { | |
| 324 | - trafficLayer.hide(); | |
| 325 | - isVisible = false; | |
| 326 | - $(this).removeClass('active'); | |
| 327 | - | |
| 328 | - //调整线路路由透明度 | |
| 329 | - $.each(polylines, function(){ | |
| 330 | - this.setOptions({strokeOpacity: 0.5}); | |
| 331 | - }); | |
| 332 | - } else { | |
| 333 | - trafficLayer.show(); | |
| 334 | - isVisible = true; | |
| 335 | - $(this).addClass('active'); | |
| 336 | - | |
| 337 | - //调整线路路由透明度 | |
| 338 | - $.each(polylines, function(){ | |
| 339 | - this.setOptions({strokeOpacity: 0.1}); | |
| 340 | - }); | |
| 341 | - } | |
| 342 | - }); | |
| 343 | - | |
| 344 | - //保存当前地图实例和名称 | |
| 345 | - currentMap = { | |
| 346 | - map: map, | |
| 347 | - mapName: REAL_GAODE_TEXT, | |
| 348 | - fName : 'gaode' | |
| 349 | - } | |
| 350 | - | |
| 351 | - }, | |
| 352 | - change : function() { | |
| 353 | - if(currentMap.mapName == REAL_GAODE_TEXT) | |
| 354 | - return; | |
| 355 | - | |
| 356 | - showMsg(REAL_GAODE_TEXT); | |
| 357 | - | |
| 358 | - real_map.destroy(); | |
| 359 | - real_map.gaode.init(); | |
| 360 | - }, | |
| 361 | - setStyle : function() { | |
| 362 | - $('.mapRightWrap').addClass('gaode'); | |
| 363 | - $('.mapTools').addClass('gaode'); | |
| 364 | - $('.leftUtils').addClass('gaode'); | |
| 365 | - }, | |
| 366 | - clearStyle : function() { | |
| 367 | - $('.mapRightWrap').removeClass('gaode'); | |
| 368 | - $('.mapTools').removeClass('gaode'); | |
| 369 | - $('.leftUtils').removeClass('gaode'); | |
| 370 | - }, | |
| 371 | - autocomplete: function(input, cb){ | |
| 372 | - | |
| 373 | - AMap.plugin('AMap.Autocomplete',function(){ | |
| 374 | - var autoOptions = { | |
| 375 | - city: city | |
| 376 | - }; | |
| 377 | - autocomplete= new AMap.Autocomplete(autoOptions); | |
| 378 | - | |
| 379 | - $('#' + input).on('keyup', function(){ | |
| 380 | - if(this.value == ''){ | |
| 381 | - $('.search_result').html(''); | |
| 382 | - return; | |
| 383 | - } | |
| 384 | - autocomplete.search(this.value, function(status, result){ | |
| 385 | - cb & cb({type: 'gaode', result: result.tips}); | |
| 386 | - }); | |
| 387 | - }); | |
| 388 | - }); | |
| 389 | - }, | |
| 390 | - setPlace: function(val){ | |
| 391 | - var map = currentMap.map; | |
| 392 | - | |
| 393 | - AMap.plugin(['AMap.PlaceSearch'],function(){ | |
| 394 | - var placeSearch = new AMap.PlaceSearch({ | |
| 395 | - city:city, | |
| 396 | - map:map, | |
| 397 | - pageSize: 1 | |
| 398 | - }); | |
| 399 | - | |
| 400 | - placeSearch.search(val); | |
| 401 | - }); | |
| 402 | - }, | |
| 403 | - drawLine: function(route){ | |
| 404 | - polylines = []; | |
| 405 | - var map = currentMap.map; | |
| 406 | - map.clearMap(); | |
| 407 | - | |
| 408 | - //var route = JSON.parse(storage.getItem(lineCode + '_route')); | |
| 409 | - var upArr = [], downArr = []; | |
| 410 | - | |
| 411 | - var upLineOps = {path: upArr, strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5} | |
| 412 | - ,downLineOps = {path: downArr, strokeColor:"red", strokeWeight:6, strokeOpacity:0.5}; | |
| 413 | - | |
| 414 | - //上行 | |
| 415 | - if(route.up){ | |
| 416 | - $.each(route.up_gcj.split(','), function(){ | |
| 417 | - tempArray = this.split(' '); | |
| 418 | - upArr.push([tempArray[0], tempArray[1]]); | |
| 419 | - }); | |
| 420 | - var upLine = new AMap.Polyline(upLineOps); | |
| 421 | - //保存线条引用 | |
| 422 | - polylines.push(upLine); | |
| 423 | - | |
| 424 | - upLine.setMap(map); | |
| 425 | - map.setCenter(upArr[parseInt(upArr.length / 2)]); | |
| 426 | - | |
| 427 | - } | |
| 428 | - //下行 | |
| 429 | - if(route.down){ | |
| 430 | - $.each(route.down_gcj.split(','), function(){ | |
| 431 | - tempArray = this.split(' '); | |
| 432 | - downArr.push([tempArray[0], tempArray[1]]); | |
| 433 | - }); | |
| 434 | - var downLine = new AMap.Polyline(downLineOps); | |
| 435 | - //保存线条引用 | |
| 436 | - polylines.push(downLine); | |
| 437 | - | |
| 438 | - downLine.setMap(map); | |
| 439 | - } | |
| 440 | - }, | |
| 441 | - drawGpsMarker: function(gpsList){ | |
| 442 | - } | |
| 443 | - }, | |
| 444 | - setText : function(text) { | |
| 445 | - $('.leftUtils span.dropdown-toggle').html( | |
| 446 | - text + ' <i class="fa fa-angle-down"></i>'); | |
| 447 | - }, | |
| 448 | - destroy : function() { | |
| 449 | - trafficBtn.unbind('click'); | |
| 450 | - | |
| 451 | - //如果当前地图实例有destroy方法即执行 | |
| 452 | - var map = currentMap.map; | |
| 453 | - map.destroy && map.destroy(); | |
| 454 | - | |
| 455 | - if (currentMap.mapName == REAL_GAODE_TEXT) { | |
| 456 | - // 如果前一个地图是高德，清除相关样式 | |
| 457 | - real_map.gaode.clearStyle(); | |
| 458 | - } | |
| 459 | - } | |
| 460 | - } | |
| 461 | - | |
| 462 | - function showMsg(text){ | |
| 463 | - layer.msg('正在切换到' + text + '...', {icon : 16,shade : [ 0.6, '#393D49' ],time : 0}); | |
| 464 | - } | |
| 465 | - | |
| 466 | - /** | |
| 467 | - * 颜色 | |
| 468 | - */ | |
| 469 | - var bgColor = function(g){ | |
| 470 | - if(g.state == 0){ | |
| 471 | - if(g.upDown == 0) | |
| 472 | - return '#5E96D2'; | |
| 473 | - else if(g.upDown == 1) | |
| 474 | - return '#C92121'; | |
| 475 | - else | |
| 476 | - return 'red'; | |
| 477 | - } | |
| 478 | - else | |
| 479 | - return "rgb(171, 171, 171)"; | |
| 480 | - } | |
| 481 | - | |
| 482 | - var tColor = function(g){ | |
| 483 | - if(g.state == 0) | |
| 484 | - return "#fff"; | |
| 485 | - else | |
| 486 | - return "rgb(229, 229, 229)"; | |
| 487 | - } | |
| 488 | - | |
| 489 | - function createBDMarkerByGps(gpsData){ | |
| 490 | - //marker | |
| 491 | - var point = new BMap.Point(gpsData.bd_coord.x, gpsData.bd_coord.y) | |
| 492 | - //label | |
| 493 | - ,label = new BMap.Label(gpsData.nbbm.replace('-',''), {position: point, offset: new BMap.Size(-20,8)}); | |
| 494 | - label.setStyle({borderColor: bgColor(gpsData), padding: '6px 6px 4px 6px', color: tColor(gpsData), backgroundColor: bgColor(gpsData)}); | |
| 495 | - var marker = new BMap.Marker(point); | |
| 496 | - marker.setLabel(label); | |
| 497 | - //icon | |
| 498 | - marker.setIcon(new BMap.Icon(tmIcon, new BMap.Size(25,25))); | |
| 499 | - //window 绑定到 label | |
| 500 | - marker.infoWindow = new BMap.InfoWindow(bd_gps_info_win_opts); | |
| 501 | - //数据绑定到label | |
| 502 | - marker.gpsData = gpsData; | |
| 503 | - | |
| 504 | - //mouseover | |
| 505 | - label.addEventListener('mouseover', function(){ | |
| 506 | - bdOpenWindow(marker); | |
| 507 | - }); | |
| 508 | - return marker; | |
| 509 | - } | |
| 510 | - | |
| 511 | - function bdHistoryMarker(gps){ | |
| 512 | - //marker | |
| 513 | - var point = new BMap.Point(gps.bd_lon, gps.bd_lat) | |
| 514 | - //label | |
| 515 | - ,label = new BMap.Label(gps.nbbm, {position: point, offset: new BMap.Size(-20,8)}); | |
| 516 | - label.setStyle({borderColor: bgColor(gps), padding: '6px 6px 4px 6px', color: tColor(gps), backgroundColor: bgColor(gps)}); | |
| 517 | - var marker = new BMap.Marker(point); | |
| 518 | - marker.setLabel(label); | |
| 519 | - //icon | |
| 520 | - marker.setIcon(new BMap.Icon(tmIcon, new BMap.Size(25,25))); | |
| 521 | -/* //window 绑定到 label | |
| 522 | - marker.infoWindow = new BMap.InfoWindow(bd_gps_info_win_opts); | |
| 523 | - //数据绑定到label | |
| 524 | - marker.gpsData = gpsData; | |
| 525 | - | |
| 526 | - //mouseover | |
| 527 | - label.addEventListener('mouseover', function(){ | |
| 528 | - bdOpenWindow(marker); | |
| 529 | - });*/ | |
| 530 | - return marker; | |
| 531 | - } | |
| 532 | - | |
| 533 | - function bdOpenWindow(marker){ | |
| 534 | - marker.infoWindow.setContent(template('gps_info_win_temp', marker.gpsData)); | |
| 535 | - currentMap.map.openInfoWindow(marker.infoWindow, marker.point); | |
| 536 | - } | |
| 537 | - return real_map; | |
| 1 | +var realMap = (function() { | |
| 2 | + | |
| 3 | + function getJSONP(url, data ,callback){ | |
| 4 | + $.ajax({ | |
| 5 | + url:url, | |
| 6 | + data: data, | |
| 7 | + dataType:'jsonp', | |
| 8 | + success:callback, | |
| 9 | + error: function(e){ | |
| 10 | + alert('error: jsonp,' + url); | |
| 11 | + } | |
| 12 | + }); | |
| 13 | + } | |
| 14 | + | |
| 15 | + /** | |
| 16 | + * 透明点，用于替换隐藏百度Marker的icon | |
| 17 | + */ | |
| 18 | + var tmIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKTWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaOWJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHiwmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryMAgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0lYqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHiNLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYAQH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6cwR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBiewhi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1cQPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqOY4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hMWEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgohJZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSUEko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/pdLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Yb1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7OUndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsbdi97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxrPGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H08PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+Hvqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsGLww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjgR2yIuB9pGZkX+X0UKSoyqi7qUbRTdHF09yzWrORZ+2e9jvGPqYy5O9tqtnJ2Z6xqbFJsY+ybuIC4qriBeIf4RfGXEnQTJAntieTE2MQ9ieNzAudsmjOc5JpUlnRjruXcorkX5unOy553PFk1WZB8OIWYEpeyP+WDIEJQLxhP5aduTR0T8oSbhU9FvqKNolGxt7hKPJLmnVaV9jjdO31D+miGT0Z1xjMJT1IreZEZkrkj801WRNberM/ZcdktOZSclJyjUg1plrQr1zC3KLdPZisrkw3keeZtyhuTh8r35CP5c/PbFWyFTNGjtFKuUA4WTC+oK3hbGFt4uEi9SFrUM99m/ur5IwuCFny9kLBQuLCz2Lh4WfHgIr9FuxYji1MXdy4xXVK6ZHhp8NJ9y2jLspb9UOJYUlXyannc8o5Sg9KlpUMrglc0lamUycturvRauWMVYZVkVe9ql9VbVn8qF5VfrHCsqK74sEa45uJXTl/VfPV5bdra3kq3yu3rSOuk626s91m/r0q9akHV0IbwDa0b8Y3lG19tSt50oXpq9Y7NtM3KzQM1YTXtW8y2rNvyoTaj9nqdf13LVv2tq7e+2Sba1r/dd3vzDoMdFTve75TsvLUreFdrvUV99W7S7oLdjxpiG7q/5n7duEd3T8Wej3ulewf2Re/ranRvbNyvv7+yCW1SNo0eSDpw5ZuAb9qb7Zp3tXBaKg7CQeXBJ9+mfHvjUOihzsPcw83fmX+39QjrSHkr0jq/dawto22gPaG97+iMo50dXh1Hvrf/fu8x42N1xzWPV56gnSg98fnkgpPjp2Snnp1OPz3Umdx590z8mWtdUV29Z0PPnj8XdO5Mt1/3yfPe549d8Lxw9CL3Ytslt0utPa49R35w/eFIr1tv62X3y+1XPK509E3rO9Hv03/6asDVc9f41y5dn3m978bsG7duJt0cuCW69fh29u0XdwruTNxdeo94r/y+2v3qB/oP6n+0/rFlwG3g+GDAYM/DWQ/vDgmHnv6U/9OH4dJHzEfVI0YjjY+dHx8bDRq98mTOk+GnsqcTz8p+Vv9563Or59/94vtLz1j82PAL+YvPv655qfNy76uprzrHI8cfvM55PfGm/K3O233vuO+638e9H5ko/ED+UPPR+mPHp9BP9z7nfP78L/eE8/sl0p8zAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAbSURBVHjaYvz//z8DAwMDAxMDFAAAAAD//wMAMAYDAW/BVI8AAAAASUVORK5CYII='; | |
| 19 | + | |
| 20 | + var REAL_BAIDU_TEXT = '百度地图', REAL_GAODE_TEXT = '高德地图'; | |
| 21 | + | |
| 22 | + // 中心点 （上海市浦东新区政府） | |
| 23 | + var CENTER_POINT = { | |
| 24 | + lng : 121.544336, | |
| 25 | + lat : 31.221315 | |
| 26 | + }; | |
| 27 | + | |
| 28 | + // 图层容器 | |
| 29 | + var mapContainer = $('#mapContainer'); | |
| 30 | + // 路况按钮 | |
| 31 | + var trafficBtn = $('#trafficItem'); | |
| 32 | + | |
| 33 | + var storage = window.localStorage; | |
| 34 | + | |
| 35 | + var currentMap; | |
| 36 | + | |
| 37 | + var city = "上海"; | |
| 38 | + | |
| 39 | + //百度API Key | |
| 40 | + var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT'; | |
| 41 | + | |
| 42 | + var bd_gps_info_win_opts = { | |
| 43 | + width : 190, | |
| 44 | + height: 255, | |
| 45 | + enableMessage:true | |
| 46 | + }; | |
| 47 | + | |
| 48 | + //线路路由 | |
| 49 | + var polylines; | |
| 50 | + | |
| 51 | + //百度 -轨迹回放点聚合 | |
| 52 | + //var historyClusterer; | |
| 53 | + | |
| 54 | + var markerClusterer; | |
| 55 | + | |
| 56 | + //设备号和marker对照 | |
| 57 | + var markersMap; | |
| 58 | + var real_map = { | |
| 59 | + getMap: function(){ | |
| 60 | + return currentMap; | |
| 61 | + }, | |
| 62 | + init: function(){ | |
| 63 | + var m = storage.getItem('real_map'); | |
| 64 | + if(m && m == REAL_GAODE_TEXT) | |
| 65 | + real_map.gaode.init(); | |
| 66 | + else | |
| 67 | + real_map.baidu.init(); | |
| 68 | + }, | |
| 69 | + //百度地图 | |
| 70 | + baidu : { | |
| 71 | + //初始化 | |
| 72 | + init : function() { | |
| 73 | + real_map.setText(REAL_BAIDU_TEXT); | |
| 74 | + | |
| 75 | + var map = new BMap.Map(mapContainer[0]); | |
| 76 | + //中心点和缩放级别 | |
| 77 | + map.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat), 15); | |
| 78 | + map.enableScrollWheelZoom(); | |
| 79 | + //加载完成 | |
| 80 | + map.addEventListener("tilesloaded", function() { | |
| 81 | + layer.closeAll(); | |
| 82 | + storage.setItem('real_map', REAL_BAIDU_TEXT); | |
| 83 | + }); | |
| 84 | + | |
| 85 | + // 路况控件 | |
| 86 | + var ctrl = new BMapLib.TrafficControl(); | |
| 87 | + map.addControl(ctrl); | |
| 88 | + | |
| 89 | + //historyClusterer = new BMapLib.MarkerClusterer(map, {isAverangeCenter : true,minClusterSize : 2}) | |
| 90 | + var isVisible; | |
| 91 | + trafficBtn.on('click', function() { | |
| 92 | + if (isVisible) { | |
| 93 | + ctrl.hide(); | |
| 94 | + isVisible = false; | |
| 95 | + //调整线路路由透明度 | |
| 96 | + $.each(polylines, function(){ | |
| 97 | + this.setStrokeOpacity(0.5); | |
| 98 | + }); | |
| 99 | + } else { | |
| 100 | + ctrl.show(); | |
| 101 | + isVisible = true; | |
| 102 | + //调整线路路由透明度 | |
| 103 | + $.each(polylines, function(){ | |
| 104 | + this.setStrokeOpacity(0.1); | |
| 105 | + }); | |
| 106 | + } | |
| 107 | + }); | |
| 108 | + //百度路况控件自身关闭按钮 | |
| 109 | + $('.portlet-fullscreen').on('click', '.maplibTc .maplibTcClose', function(){ | |
| 110 | + isVisible = false; | |
| 111 | + //调整线路路由透明度 | |
| 112 | + $.each(polylines, function(){ | |
| 113 | + this.setStrokeOpacity(0.5); | |
| 114 | + }); | |
| 115 | + }); | |
| 116 | + | |
| 117 | + $('#tcWrap.maplibTc').addClass('animated bounceInLeft'); | |
| 118 | + $('.maplibTcBtn_deskTop.anchorTR').remove(); | |
| 119 | + | |
| 120 | + //保存当前地图实例和名称 | |
| 121 | + currentMap = { | |
| 122 | + map: map, | |
| 123 | + mapName: REAL_BAIDU_TEXT, | |
| 124 | + fName : 'baidu' | |
| 125 | + } | |
| 126 | + | |
| 127 | + }, | |
| 128 | + clear: function(){ | |
| 129 | + currentMap.map.clearOverlays(); | |
| 130 | + markerClusterer && markerClusterer.clearMarkers(); | |
| 131 | + | |
| 132 | + }, | |
| 133 | + change : function() { | |
| 134 | + if(currentMap.mapName == REAL_BAIDU_TEXT) | |
| 135 | + return; | |
| 136 | + | |
| 137 | + showMsg(REAL_BAIDU_TEXT); | |
| 138 | + | |
| 139 | + real_map.destroy(); | |
| 140 | + real_map.baidu.init(); | |
| 141 | + }, | |
| 142 | + autocomplete: function(input, cb){ | |
| 143 | + var ac = new BMap.Autocomplete({ | |
| 144 | + 'location' : realMap.getMap().map, | |
| 145 | + 'input': input, | |
| 146 | + 'onSearchComplete': function(result){ | |
| 147 | + //隐藏默认的提示框 | |
| 148 | + ac.hide(); | |
| 149 | + cb && cb({type: 'baidu', result: result.wr}); | |
| 150 | + } | |
| 151 | + }); | |
| 152 | + | |
| 153 | + $('#' + input).on('keyup', function(){ | |
| 154 | + if(this.value == ''){ | |
| 155 | + $('.search_result').html(''); | |
| 156 | + return; | |
| 157 | + } | |
| 158 | + }); | |
| 159 | + | |
| 160 | + }, | |
| 161 | + setPlace: function(val){ | |
| 162 | + var map = currentMap.map; | |
| 163 | + map.clearOverlays(); | |
| 164 | + var local = new BMap.LocalSearch(map, { | |
| 165 | + onSearchComplete: function(){ | |
| 166 | + var poi = local.getResults().getPoi(0); | |
| 167 | + if(!poi){ | |
| 168 | + return; | |
| 169 | + } | |
| 170 | + var pp = poi.point; | |
| 171 | + map.centerAndZoom(pp, 18); | |
| 172 | + map.addOverlay(new BMap.Marker(pp)); | |
| 173 | + } | |
| 174 | + }); | |
| 175 | + | |
| 176 | + local.search(val); | |
| 177 | + }, | |
| 178 | + drawLine: function(route){ | |
| 179 | + var map = currentMap.map; | |
| 180 | + map.clearOverlays(); | |
| 181 | + polylines = []; | |
| 182 | + //画线路 | |
| 183 | + //从localStorage里读取路由信息 | |
| 184 | + //var route = JSON.parse(storage.getItem(lineCode + '_route')); | |
| 185 | + var upLineOps = {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5} | |
| 186 | + ,downLineOps = {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5}; | |
| 187 | + | |
| 188 | + var upPos = [], downPos = [], tempArray; | |
| 189 | + //上行 | |
| 190 | + if(route.up){ | |
| 191 | + $.each(route.up.split(','), function(){ | |
| 192 | + tempArray = this.split(' '); | |
| 193 | + upPos.push(new BMap.Point(tempArray[0], tempArray[1])); | |
| 194 | + }); | |
| 195 | + | |
| 196 | + var upLine = new BMap.Polyline(upPos, upLineOps); | |
| 197 | + map.addOverlay(upLine); | |
| 198 | + | |
| 199 | + polylines.push(upLine); | |
| 200 | + map.panTo(upPos[parseInt(upPos.length / 2)]); | |
| 201 | + } | |
| 202 | + //下行 | |
| 203 | + if(route.down){ | |
| 204 | + $.each(route.down.split(','), function(){ | |
| 205 | + tempArray = this.split(' '); | |
| 206 | + downPos.push(new BMap.Point(tempArray[0], tempArray[1])); | |
| 207 | + }); | |
| 208 | + | |
| 209 | + var downLine = new BMap.Polyline(downPos, downLineOps); | |
| 210 | + map.addOverlay(downLine); | |
| 211 | + polylines.push(downLine); | |
| 212 | + | |
| 213 | + } | |
| 214 | + }, | |
| 215 | + //批量将GPS信号画到地图上 | |
| 216 | + drawGpsMarker: function(gpsList){ | |
| 217 | + markersMap = {}; | |
| 218 | + var map = currentMap.map; | |
| 219 | + | |
| 220 | + markerClusterer && markerClusterer.clearMarkers(); | |
| 221 | + markerClusterer = new BMapLib.MarkerClusterer(map, {isAverangeCenter : true,minClusterSize : 3}); | |
| 222 | + real_map.baidu.coordsConvert(gpsList, function(){ | |
| 223 | + //绘制车辆位置 | |
| 224 | + var marker; | |
| 225 | + $.each(gpsList, function(i, gpsData){ | |
| 226 | + marker = createBDMarkerByGps(gpsData) | |
| 227 | + map.addOverlay(marker); | |
| 228 | + //marker加入点聚合 | |
| 229 | + markerClusterer.addMarker(marker); | |
| 230 | + | |
| 231 | + markersMap[gpsData.deviceId] = marker; | |
| 232 | + }); | |
| 233 | + | |
| 234 | + }); | |
| 235 | + }, | |
| 236 | + goToMarker: function(deviceId){ | |
| 237 | + var m = markersMap[deviceId]; | |
| 238 | + if(m){ | |
| 239 | + currentMap.map.panTo(m.point); | |
| 240 | + setTimeout(function(){ | |
| 241 | + bdOpenWindow(m); | |
| 242 | + }, 500); | |
| 243 | + } | |
| 244 | + }, | |
| 245 | + coordsConvert: function(list, cb){ | |
| 246 | + if(list.length > 100) | |
| 247 | + list = list.slice(0, 100); | |
| 248 | + | |
| 249 | + var coords = ''; | |
| 250 | + //拼接GPS坐标，一次性转换 | |
| 251 | + for (var i = 0, item; item = list[i++];) | |
| 252 | + coords += item.lon + ',' + item.lat + ';'; | |
| 253 | + coords = coords.substring(0, coords.length - 1); | |
| 254 | + getJSONP('//api.map.baidu.com/geoconv/v1/',{coords: coords, ak: bdKey} | |
| 255 | + ,function(rt){ | |
| 256 | + $.each(rt.result, function(j, bdCoord){ | |
| 257 | + list[j].bd_coord = bdCoord; | |
| 258 | + }); | |
| 259 | + cb&&cb(); | |
| 260 | + }); | |
| 261 | + }, | |
| 262 | + //绘制轨迹回放 marker | |
| 263 | + addHistoryMarker: function(gps){ | |
| 264 | + | |
| 265 | + var marker = bdHistoryMarker(gps); | |
| 266 | + currentMap.map.addOverlay(marker); | |
| 267 | + | |
| 268 | + //historyClusterer.addMarker(marker); | |
| 269 | + return marker; | |
| 270 | + }, | |
| 271 | + //移动marker | |
| 272 | + moveMarker: function(marker , gps){ | |
| 273 | + marker.setPosition(new BMap.Point(gps.bd_lon, gps.bd_lat)); | |
| 274 | + //重新设置颜色 | |
| 275 | + marker.getLabel().setStyle({borderColor: bgColor(gps), backgroundColor: bgColor(gps)}); | |
| 276 | + }, | |
| 277 | + //居中marker | |
| 278 | + markerToCenter: function(marker){ | |
| 279 | + currentMap.map.panTo(marker.getPosition()); | |
| 280 | + }, | |
| 281 | + //删除marker | |
| 282 | + removeMarker: function(marker){ | |
| 283 | + currentMap.map.removeOverlay(marker); | |
| 284 | + } | |
| 285 | + }, | |
| 286 | + //高德地图 | |
| 287 | + gaode : { | |
| 288 | + init : function() { | |
| 289 | + var mapLoadAnim = '<div class="sk-cube-grid _center">'+ | |
| 290 | + '<div class="sk-cube sk-cube1"></div>'+ | |
| 291 | + '<div class="sk-cube sk-cube2"></div>'+ | |
| 292 | + '<div class="sk-cube sk-cube3"></div>'+ | |
| 293 | + '<div class="sk-cube sk-cube4"></div>'+ | |
| 294 | + '<div class="sk-cube sk-cube5"></div>'+ | |
| 295 | + '<div class="sk-cube sk-cube6"></div>'+ | |
| 296 | + '<div class="sk-cube sk-cube7"></div>'+ | |
| 297 | + '<div class="sk-cube sk-cube8"></div>'+ | |
| 298 | + '<div class="sk-cube sk-cube9"></div>'+ | |
| 299 | + '</div>'; | |
| 300 | + | |
| 301 | + mapContainer.html(mapLoadAnim); | |
| 302 | + | |
| 303 | + real_map.gaode.setStyle(); | |
| 304 | + real_map.setText(REAL_GAODE_TEXT); | |
| 305 | + | |
| 306 | + var map = new AMap.Map(mapContainer[0]); | |
| 307 | + // 地图中心和缩放级别 | |
| 308 | + map.setZoomAndCenter(14, [ CENTER_POINT.lng,CENTER_POINT.lat ]); | |
| 309 | + //加载完成 | |
| 310 | + AMap.event.addListener(map, 'complete', function() { | |
| 311 | + layer.closeAll(); | |
| 312 | + storage.setItem('real_map', REAL_GAODE_TEXT); | |
| 313 | + $('.sk-cube-grid._center').remove(); | |
| 314 | + }); | |
| 315 | + | |
| 316 | + // 实时路况图层 | |
| 317 | + var trafficLayer = new AMap.TileLayer.Traffic(); | |
| 318 | + trafficLayer.setMap(map); | |
| 319 | + trafficLayer.hide(); | |
| 320 | + | |
| 321 | + var isVisible; | |
| 322 | + trafficBtn.on('click', function() { | |
| 323 | + if (isVisible) { | |
| 324 | + trafficLayer.hide(); | |
| 325 | + isVisible = false; | |
| 326 | + $(this).removeClass('active'); | |
| 327 | + | |
| 328 | + //调整线路路由透明度 | |
| 329 | + $.each(polylines, function(){ | |
| 330 | + this.setOptions({strokeOpacity: 0.5}); | |
| 331 | + }); | |
| 332 | + } else { | |
| 333 | + trafficLayer.show(); | |
| 334 | + isVisible = true; | |
| 335 | + $(this).addClass('active'); | |
| 336 | + | |
| 337 | + //调整线路路由透明度 | |
| 338 | + $.each(polylines, function(){ | |
| 339 | + this.setOptions({strokeOpacity: 0.1}); | |
| 340 | + }); | |
| 341 | + } | |
| 342 | + }); | |
| 343 | + | |
| 344 | + //保存当前地图实例和名称 | |
| 345 | + currentMap = { | |
| 346 | + map: map, | |
| 347 | + mapName: REAL_GAODE_TEXT, | |
| 348 | + fName : 'gaode' | |
| 349 | + } | |
| 350 | + | |
| 351 | + }, | |
| 352 | + change : function() { | |
| 353 | + if(currentMap.mapName == REAL_GAODE_TEXT) | |
| 354 | + return; | |
| 355 | + | |
| 356 | + showMsg(REAL_GAODE_TEXT); | |
| 357 | + | |
| 358 | + real_map.destroy(); | |
| 359 | + real_map.gaode.init(); | |
| 360 | + }, | |
| 361 | + setStyle : function() { | |
| 362 | + $('.mapRightWrap').addClass('gaode'); | |
| 363 | + $('.mapTools').addClass('gaode'); | |
| 364 | + $('.leftUtils').addClass('gaode'); | |
| 365 | + }, | |
| 366 | + clearStyle : function() { | |
| 367 | + $('.mapRightWrap').removeClass('gaode'); | |
| 368 | + $('.mapTools').removeClass('gaode'); | |
| 369 | + $('.leftUtils').removeClass('gaode'); | |
| 370 | + }, | |
| 371 | + autocomplete: function(input, cb){ | |
| 372 | + | |
| 373 | + AMap.plugin('AMap.Autocomplete',function(){ | |
| 374 | + var autoOptions = { | |
| 375 | + city: city | |
| 376 | + }; | |
| 377 | + autocomplete= new AMap.Autocomplete(autoOptions); | |
| 378 | + | |
| 379 | + $('#' + input).on('keyup', function(){ | |
| 380 | + if(this.value == ''){ | |
| 381 | + $('.search_result').html(''); | |
| 382 | + return; | |
| 383 | + } | |
| 384 | + autocomplete.search(this.value, function(status, result){ | |
| 385 | + cb & cb({type: 'gaode', result: result.tips}); | |
| 386 | + }); | |
| 387 | + }); | |
| 388 | + }); | |
| 389 | + }, | |
| 390 | + setPlace: function(val){ | |
| 391 | + var map = currentMap.map; | |
| 392 | + | |
| 393 | + AMap.plugin(['AMap.PlaceSearch'],function(){ | |
| 394 | + var placeSearch = new AMap.PlaceSearch({ | |
| 395 | + city:city, | |
| 396 | + map:map, | |
| 397 | + pageSize: 1 | |
| 398 | + }); | |
| 399 | + | |
| 400 | + placeSearch.search(val); | |
| 401 | + }); | |
| 402 | + }, | |
| 403 | + drawLine: function(route){ | |
| 404 | + polylines = []; | |
| 405 | + var map = currentMap.map; | |
| 406 | + map.clearMap(); | |
| 407 | + | |
| 408 | + //var route = JSON.parse(storage.getItem(lineCode + '_route')); | |
| 409 | + var upArr = [], downArr = []; | |
| 410 | + | |
| 411 | + var upLineOps = {path: upArr, strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5} | |
| 412 | + ,downLineOps = {path: downArr, strokeColor:"red", strokeWeight:6, strokeOpacity:0.5}; | |
| 413 | + | |
| 414 | + //上行 | |
| 415 | + if(route.up){ | |
| 416 | + $.each(route.up_gcj.split(','), function(){ | |
| 417 | + tempArray = this.split(' '); | |
| 418 | + upArr.push([tempArray[0], tempArray[1]]); | |
| 419 | + }); | |
| 420 | + var upLine = new AMap.Polyline(upLineOps); | |
| 421 | + //保存线条引用 | |
| 422 | + polylines.push(upLine); | |
| 423 | + | |
| 424 | + upLine.setMap(map); | |
| 425 | + map.setCenter(upArr[parseInt(upArr.length / 2)]); | |
| 426 | + | |
| 427 | + } | |
| 428 | + //下行 | |
| 429 | + if(route.down){ | |
| 430 | + $.each(route.down_gcj.split(','), function(){ | |
| 431 | + tempArray = this.split(' '); | |
| 432 | + downArr.push([tempArray[0], tempArray[1]]); | |
| 433 | + }); | |
| 434 | + var downLine = new AMap.Polyline(downLineOps); | |
| 435 | + //保存线条引用 | |
| 436 | + polylines.push(downLine); | |
| 437 | + | |
| 438 | + downLine.setMap(map); | |
| 439 | + } | |
| 440 | + }, | |
| 441 | + drawGpsMarker: function(gpsList){ | |
| 442 | + } | |
| 443 | + }, | |
| 444 | + setText : function(text) { | |
| 445 | + $('.leftUtils span.dropdown-toggle').html( | |
| 446 | + text + ' <i class="fa fa-angle-down"></i>'); | |
| 447 | + }, | |
| 448 | + destroy : function() { | |
| 449 | + trafficBtn.unbind('click'); | |
| 450 | + | |
| 451 | + //如果当前地图实例有destroy方法即执行 | |
| 452 | + var map = currentMap.map; | |
| 453 | + map.destroy && map.destroy(); | |
| 454 | + | |
| 455 | + if (currentMap.mapName == REAL_GAODE_TEXT) { | |
| 456 | + // 如果前一个地图是高德，清除相关样式 | |
| 457 | + real_map.gaode.clearStyle(); | |
| 458 | + } | |
| 459 | + } | |
| 460 | + } | |
| 461 | + | |
| 462 | + function showMsg(text){ | |
| 463 | + layer.msg('正在切换到' + text + '...', {icon : 16,shade : [ 0.6, '#393D49' ],time : 0}); | |
| 464 | + } | |
| 465 | + | |
| 466 | + /** | |
| 467 | + * 颜色 | |
| 468 | + */ | |
| 469 | + var bgColor = function(g){ | |
| 470 | + if(g.state == 0){ | |
| 471 | + if(g.upDown == 0) | |
| 472 | + return '#5E96D2'; | |
| 473 | + else if(g.upDown == 1) | |
| 474 | + return '#C92121'; | |
| 475 | + else | |
| 476 | + return 'red'; | |
| 477 | + } | |
| 478 | + else | |
| 479 | + return "rgb(171, 171, 171)"; | |
| 480 | + } | |
| 481 | + | |
| 482 | + var tColor = function(g){ | |
| 483 | + if(g.state == 0) | |
| 484 | + return "#fff"; | |
| 485 | + else | |
| 486 | + return "rgb(229, 229, 229)"; | |
| 487 | + } | |
| 488 | + | |
| 489 | + function createBDMarkerByGps(gpsData){ | |
| 490 | + //marker | |
| 491 | + var point = new BMap.Point(gpsData.bd_coord.x, gpsData.bd_coord.y) | |
| 492 | + //label | |
| 493 | + ,label = new BMap.Label(gpsData.nbbm.replace('-',''), {position: point, offset: new BMap.Size(-20,8)}); | |
| 494 | + label.setStyle({borderColor: bgColor(gpsData), padding: '6px 6px 4px 6px', color: tColor(gpsData), backgroundColor: bgColor(gpsData)}); | |
| 495 | + var marker = new BMap.Marker(point); | |
| 496 | + marker.setLabel(label); | |
| 497 | + //icon | |
| 498 | + marker.setIcon(new BMap.Icon(tmIcon, new BMap.Size(25,25))); | |
| 499 | + //window 绑定到 label | |
| 500 | + marker.infoWindow = new BMap.InfoWindow(bd_gps_info_win_opts); | |
| 501 | + //数据绑定到label | |
| 502 | + marker.gpsData = gpsData; | |
| 503 | + | |
| 504 | + //mouseover | |
| 505 | + label.addEventListener('mouseover', function(){ | |
| 506 | + bdOpenWindow(marker); | |
| 507 | + }); | |
| 508 | + return marker; | |
| 509 | + } | |
| 510 | + | |
| 511 | + function bdHistoryMarker(gps){ | |
| 512 | + //marker | |
| 513 | + var point = new BMap.Point(gps.bd_lon, gps.bd_lat) | |
| 514 | + //label | |
| 515 | + ,label = new BMap.Label(gps.nbbm, {position: point, offset: new BMap.Size(-20,8)}); | |
| 516 | + label.setStyle({borderColor: bgColor(gps), padding: '6px 6px 4px 6px', color: tColor(gps), backgroundColor: bgColor(gps)}); | |
| 517 | + var marker = new BMap.Marker(point); | |
| 518 | + marker.setLabel(label); | |
| 519 | + //icon | |
| 520 | + marker.setIcon(new BMap.Icon(tmIcon, new BMap.Size(25,25))); | |
| 521 | +/* //window 绑定到 label | |
| 522 | + marker.infoWindow = new BMap.InfoWindow(bd_gps_info_win_opts); | |
| 523 | + //数据绑定到label | |
| 524 | + marker.gpsData = gpsData; | |
| 525 | + | |
| 526 | + //mouseover | |
| 527 | + label.addEventListener('mouseover', function(){ | |
| 528 | + bdOpenWindow(marker); | |
| 529 | + });*/ | |
| 530 | + return marker; | |
| 531 | + } | |
| 532 | + | |
| 533 | + function bdOpenWindow(marker){ | |
| 534 | + marker.infoWindow.setContent(template('gps_info_win_temp', marker.gpsData)); | |
| 535 | + currentMap.map.openInfoWindow(marker.infoWindow, marker.point); | |
| 536 | + } | |
| 537 | + return real_map; | |
| 538 | 538 | })(); |
| 539 | 539 | \ No newline at end of file | ... | ... |
src/main/resources/static/real_control_v2/alone_page/home/home_wrap.html
| 1 | -<!DOCTYPE html> | |
| 2 | -<html lang="zh-cn"> | |
| 3 | - | |
| 4 | -<head> | |
| 5 | - <meta charset="UTF-8"> | |
| 6 | - <title>主页模拟图</title> | |
| 7 | - <!-- uikit core style--> | |
| 8 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/css/uikit.gradient.min.css" /> | |
| 9 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/notify.gradient.min.css" merge="plugins"/> | |
| 10 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/tooltip.gradient.min.css" merge="plugins"/> | |
| 11 | - <link rel="stylesheet" | |
| 12 | - href="/real_control_v2/assets/plugins/uikit-2.27.1/components/autocomplete.gradient.min.css" merge="plugins"/> | |
| 13 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/sticky.gradient.min.css" merge="plugins"/> | |
| 14 | - | |
| 15 | - <!-- main style --> | |
| 16 | - <link rel="stylesheet" href="/real_control_v2/css/main.css" /> | |
| 17 | - <!-- home style --> | |
| 18 | - <link rel="stylesheet" href="/real_control_v2/css/home.css" merge="custom_style"/> | |
| 19 | - | |
| 20 | - <!-- custom table --> | |
| 21 | - <link rel="stylesheet" href="/real_control_v2/css/ct_table.css" merge="custom_style"/> | |
| 22 | - <!-- jquery contextMenu style --> | |
| 23 | - <link rel="stylesheet" href="/real_control_v2/assets/css/jquery.contextMenu.min.css" merge="plugins"/> | |
| 24 | - <!-- formvalidation style --> | |
| 25 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/formvalidation/formValidation.min.css" merge="plugins"/> | |
| 26 | - <!-- js tree --> | |
| 27 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/jstree/default/style.css" merge="plugins"/> | |
| 28 | - <!-- tooltip css--> | |
| 29 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/qtip/jquery.qtip.min.css" merge="plugins"/> | |
| 30 | - <link rel="stylesheet" href="/real_control_v2/css/pace.css" merge="plugins"/> | |
| 31 | - | |
| 32 | - <link rel="stylesheet" href="/real_control_v2/css/modal_extend.css" merge="custom_style"/> | |
| 33 | - <!-- perfect-scrollbar style --> | |
| 34 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.css" merge="plugins"/> | |
| 35 | - <!-- layer 3.0.3 --> | |
| 36 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/layer3.0.3/skin/default/layer.css" merge="plugins"/> | |
| 37 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/layer3.0.3/skin/moon/style.css" merge="plugins"/> | |
| 38 | - | |
| 39 | - | |
| 40 | - <style> | |
| 41 | - .main-container{ | |
| 42 | - height: 100% !important; | |
| 43 | - } | |
| 44 | - | |
| 45 | - #main-tab-content{ | |
| 46 | - padding: 0 !important; | |
| 47 | - list-style: none; | |
| 48 | - } | |
| 49 | - | |
| 50 | - .home-panel{ | |
| 51 | - | |
| 52 | - } | |
| 53 | - | |
| 54 | - #home-main-content{ | |
| 55 | - padding: 0 !important; | |
| 56 | - } | |
| 57 | - | |
| 58 | - #main-tab-content>.home-panel>#home-main-content{ | |
| 59 | - overflow: inherit !important; | |
| 60 | - } | |
| 61 | - </style> | |
| 62 | -</head> | |
| 63 | - | |
| 64 | -<body> | |
| 65 | -<!--<div class="main-container" style="height: 100%;"> | |
| 66 | -</div>--> | |
| 67 | -<div class="main-container"> | |
| 68 | - <ul id="main-tab-content"> | |
| 69 | - <li class="home-panel"></li> | |
| 70 | - </ul> | |
| 71 | -</div> | |
| 72 | - | |
| 73 | - | |
| 74 | -<!-- 地图相关 --> | |
| 75 | -<script src="http://api.map.baidu.com/api?v=2.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script> | |
| 76 | -<script src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script> | |
| 77 | -<script src="/assets/js/baidu//MarkerClusterer.js" merge="plugins"></script> | |
| 78 | -<script src="/assets/js/TransGPS.js" merge="plugins"></script> | |
| 79 | -<!-- jquery --> | |
| 80 | -<script src="/real_control_v2/assets/js/jquery.min.js"></script> | |
| 81 | -<!-- jquery actual --> | |
| 82 | -<script src="/real_control_v2/assets/js/jquery.actual.min.js" merge="plugins"></script> | |
| 83 | -<!-- jquery.serializejson JSON序列化插件 --> | |
| 84 | -<script src="/assets/plugins/jquery.serializejson.js" merge="plugins"></script> | |
| 85 | -<!-- moment.js 日期处理类库 --> | |
| 86 | -<script src="/real_control_v2/assets/plugins/moment/moment.min.js"></script> | |
| 87 | -<script src="/real_control_v2/assets/plugins/moment/zh-cn.js"></script> | |
| 88 | - | |
| 89 | -<!-- flatpickr --> | |
| 90 | -<script src="/real_control_v2/assets/plugins/flatpickr/flatpickr.min.js" merge="plugins"></script> | |
| 91 | -<script src="/real_control_v2/assets/plugins/flatpickr/l10n/zh.js" merge="plugins"></script> | |
| 92 | - | |
| 93 | -<!-- perfect-scrollbar --> | |
| 94 | -<script src="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.jquery.js" merge="plugins"></script> | |
| 95 | -<!-- common js --> | |
| 96 | -<script src="/real_control_v2/js/common.js"></script> | |
| 97 | -<!-- art-template 模版引擎 --> | |
| 98 | -<script src="/assets/plugins/template.js" merge="plugins"></script> | |
| 99 | -<!-- d3 --> | |
| 100 | -<script src="/assets/js/d3.min.js"></script> | |
| 101 | -<!-- EventProxy --> | |
| 102 | -<script src="/assets/js/eventproxy.js"></script> | |
| 103 | -<!-- Geolib --> | |
| 104 | -<script src="/real_control_v2/geolib/geolib.js" merge="plugins"></script> | |
| 105 | - | |
| 106 | -<script> | |
| 107 | - | |
| 108 | - | |
| 109 | - var res_load_ep = EventProxy.create('load_home_layout', 'load_home_line_panel', 'load_data_basic', 'data-basic', function () { | |
| 110 | - //加载主页 | |
| 111 | - gb_home_layout.layout(function () { | |
| 112 | - gb_home_line_panel.init(function () { | |
| 113 | - //gps自刷新 | |
| 114 | - gb_data_gps.fixedTimeRefresh(); | |
| 115 | - | |
| 116 | - $('.uk-icon-send-o.home_alone_page').remove(); | |
| 117 | - }); | |
| 118 | - }); | |
| 119 | - }); | |
| 120 | - | |
| 121 | - function connectArr(arr, separator, transFun) { | |
| 122 | - var rs = ''; | |
| 123 | - $.each(arr, function (i, item) { | |
| 124 | - if (transFun) | |
| 125 | - item = transFun(item); | |
| 126 | - rs += (separator + item); | |
| 127 | - }); | |
| 128 | - return rs.substr(separator.length); | |
| 129 | - } | |
| 130 | - | |
| 131 | - var isArray = function (obj) { | |
| 132 | - return Object.prototype.toString.call(obj) === '[object Array]'; | |
| 133 | - }; | |
| 134 | - | |
| 135 | - var gb_form_validation_opts = { | |
| 136 | - framework: 'uikit', | |
| 137 | - locale: 'zh_CN', | |
| 138 | - icon: { | |
| 139 | - valid: 'uk-icon-check', | |
| 140 | - invalid: 'uk-icon-times', | |
| 141 | - validating: 'uk-icon-refresh' | |
| 142 | - } | |
| 143 | - }; | |
| 144 | - | |
| 145 | -</script> | |
| 146 | - | |
| 147 | -<!-- uikit core --> | |
| 148 | -<script src="/real_control_v2/assets/plugins/uikit-2.27.1/uikit.min.js" merge="uikit_js"></script> | |
| 149 | -<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/notify.min.js" merge="uikit_js"></script> | |
| 150 | -<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/pagination.min.js" merge="uikit_js"></script> | |
| 151 | -<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/tooltip.min.js" merge="uikit_js"></script> | |
| 152 | -<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/sticky.min.js" merge="uikit_js"></script> | |
| 153 | - | |
| 154 | - | |
| 155 | -<!-- jquery contextMenu --> | |
| 156 | -<script src="/real_control_v2/assets/js/jquery.contextMenu.min.js" merge="plugins"></script> | |
| 157 | -<script src="/real_control_v2/assets/js/jquery.ui.position.min.js" merge="plugins"></script> | |
| 158 | -<!-- formvalidation- --> | |
| 159 | -<script src="/real_control_v2/assets/plugins/formvalidation/formValidation.min.js" merge="plugins"></script> | |
| 160 | -<script src="/real_control_v2/assets/plugins/formvalidation/zh_CN.js" merge="plugins"></script> | |
| 161 | -<script src="/real_control_v2/assets/plugins/formvalidation/uikit.min.js" merge="plugins"></script> | |
| 162 | -<!-- js tree --> | |
| 163 | -<script src="/real_control_v2/assets/plugins/jstree/jstree.min.js" merge="plugins"></script> | |
| 164 | -<!-- simple pinyin --> | |
| 165 | -<script src="/assets/plugins/pinyin.js" merge="plugins"></script> | |
| 166 | -<!-- qtip --> | |
| 167 | -<script src="/real_control_v2/assets/plugins/qtip/jquery.qtip.min.js" merge="plugins"></script> | |
| 168 | -<!-- layer 3.0.3 --> | |
| 169 | -<script src="/real_control_v2/assets/plugins/layer3.0.3/layer.js" merge="plugins"></script> | |
| 170 | - | |
| 171 | -<!-- 数据 --> | |
| 172 | -<script src="/real_control_v2/alone_page/home/alone_data_basic.js" merge="custom_js"></script> | |
| 173 | -<script src="/real_control_v2/alone_page/home/alone_data_gps.js" merge="custom_js"></script> | |
| 174 | -<script src="/real_control_v2/js/data/gps_abnormal.js" merge="custom_js"></script> | |
| 175 | -<!-- 线路模拟图 --> | |
| 176 | -<script src="/real_control_v2/js/utils/svg_chart.js" merge="custom_js"></script> | |
| 177 | -<script src="/real_control_v2/js/utils/svg_data_convert.js" merge="custom_js"></script> | |
| 178 | -<script src="/real_control_v2/js/utils/svg_chart_tooltip.js" merge="custom_js"></script> | |
| 179 | -<script src="/real_control_v2/js/utils/svg_chart_map.js" merge="custom_js"></script> | |
| 180 | - | |
| 181 | -<!-- custom table js --> | |
| 182 | -<script src="/real_control_v2/js/utils/ct_table.js" merge="custom_js"></script> | |
| 183 | -<!-- home js --> | |
| 184 | -<script src="/real_control_v2/js/home/layout.js" merge="custom_js"></script> | |
| 185 | -<script src="/real_control_v2/js/home/line_panel.js" merge="custom_js"></script> | |
| 186 | -<script src="/real_control_v2/js/home/context_menu.js" merge="custom_js"></script> | |
| 187 | - | |
| 188 | - | |
| 189 | -<!-- 模态框扩展 --> | |
| 190 | -<script src="/real_control_v2/js/modal_extend.js" merge="custom_js"></script> | |
| 191 | - | |
| 192 | -</body> | |
| 193 | - | |
| 194 | -</html> | |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="zh-cn"> | |
| 3 | + | |
| 4 | +<head> | |
| 5 | + <meta charset="UTF-8"> | |
| 6 | + <title>主页模拟图</title> | |
| 7 | + <!-- uikit core style--> | |
| 8 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/css/uikit.gradient.min.css" /> | |
| 9 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/notify.gradient.min.css" merge="plugins"/> | |
| 10 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/tooltip.gradient.min.css" merge="plugins"/> | |
| 11 | + <link rel="stylesheet" | |
| 12 | + href="/real_control_v2/assets/plugins/uikit-2.27.1/components/autocomplete.gradient.min.css" merge="plugins"/> | |
| 13 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/sticky.gradient.min.css" merge="plugins"/> | |
| 14 | + | |
| 15 | + <!-- main style --> | |
| 16 | + <link rel="stylesheet" href="/real_control_v2/css/main.css" /> | |
| 17 | + <!-- home style --> | |
| 18 | + <link rel="stylesheet" href="/real_control_v2/css/home.css" merge="custom_style"/> | |
| 19 | + | |
| 20 | + <!-- custom table --> | |
| 21 | + <link rel="stylesheet" href="/real_control_v2/css/ct_table.css" merge="custom_style"/> | |
| 22 | + <!-- jquery contextMenu style --> | |
| 23 | + <link rel="stylesheet" href="/real_control_v2/assets/css/jquery.contextMenu.min.css" merge="plugins"/> | |
| 24 | + <!-- formvalidation style --> | |
| 25 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/formvalidation/formValidation.min.css" merge="plugins"/> | |
| 26 | + <!-- js tree --> | |
| 27 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/jstree/default/style.css" merge="plugins"/> | |
| 28 | + <!-- tooltip css--> | |
| 29 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/qtip/jquery.qtip.min.css" merge="plugins"/> | |
| 30 | + <link rel="stylesheet" href="/real_control_v2/css/pace.css" merge="plugins"/> | |
| 31 | + | |
| 32 | + <link rel="stylesheet" href="/real_control_v2/css/modal_extend.css" merge="custom_style"/> | |
| 33 | + <!-- perfect-scrollbar style --> | |
| 34 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.css" merge="plugins"/> | |
| 35 | + <!-- layer 3.0.3 --> | |
| 36 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/layer3.0.3/skin/default/layer.css" merge="plugins"/> | |
| 37 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/layer3.0.3/skin/moon/style.css" merge="plugins"/> | |
| 38 | + | |
| 39 | + | |
| 40 | + <style> | |
| 41 | + .main-container{ | |
| 42 | + height: 100% !important; | |
| 43 | + } | |
| 44 | + | |
| 45 | + #main-tab-content{ | |
| 46 | + padding: 0 !important; | |
| 47 | + list-style: none; | |
| 48 | + } | |
| 49 | + | |
| 50 | + .home-panel{ | |
| 51 | + | |
| 52 | + } | |
| 53 | + | |
| 54 | + #home-main-content{ | |
| 55 | + padding: 0 !important; | |
| 56 | + } | |
| 57 | + | |
| 58 | + #main-tab-content>.home-panel>#home-main-content{ | |
| 59 | + overflow: inherit !important; | |
| 60 | + } | |
| 61 | + </style> | |
| 62 | +</head> | |
| 63 | + | |
| 64 | +<body> | |
| 65 | +<!--<div class="main-container" style="height: 100%;"> | |
| 66 | +</div>--> | |
| 67 | +<div class="main-container"> | |
| 68 | + <ul id="main-tab-content"> | |
| 69 | + <li class="home-panel"></li> | |
| 70 | + </ul> | |
| 71 | +</div> | |
| 72 | + | |
| 73 | + | |
| 74 | +<!-- 地图相关 --> | |
| 75 | +<script src="//api.map.baidu.com/api?v=2.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script> | |
| 76 | +<script src="//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script> | |
| 77 | +<script src="/assets/js/baidu//MarkerClusterer.js" merge="plugins"></script> | |
| 78 | +<script src="/assets/js/TransGPS.js" merge="plugins"></script> | |
| 79 | +<!-- jquery --> | |
| 80 | +<script src="/real_control_v2/assets/js/jquery.min.js"></script> | |
| 81 | +<!-- jquery actual --> | |
| 82 | +<script src="/real_control_v2/assets/js/jquery.actual.min.js" merge="plugins"></script> | |
| 83 | +<!-- jquery.serializejson JSON序列化插件 --> | |
| 84 | +<script src="/assets/plugins/jquery.serializejson.js" merge="plugins"></script> | |
| 85 | +<!-- moment.js 日期处理类库 --> | |
| 86 | +<script src="/real_control_v2/assets/plugins/moment/moment.min.js"></script> | |
| 87 | +<script src="/real_control_v2/assets/plugins/moment/zh-cn.js"></script> | |
| 88 | + | |
| 89 | +<!-- flatpickr --> | |
| 90 | +<script src="/real_control_v2/assets/plugins/flatpickr/flatpickr.min.js" merge="plugins"></script> | |
| 91 | +<script src="/real_control_v2/assets/plugins/flatpickr/l10n/zh.js" merge="plugins"></script> | |
| 92 | + | |
| 93 | +<!-- perfect-scrollbar --> | |
| 94 | +<script src="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.jquery.js" merge="plugins"></script> | |
| 95 | +<!-- common js --> | |
| 96 | +<script src="/real_control_v2/js/common.js"></script> | |
| 97 | +<!-- art-template 模版引擎 --> | |
| 98 | +<script src="/assets/plugins/template.js" merge="plugins"></script> | |
| 99 | +<!-- d3 --> | |
| 100 | +<script src="/assets/js/d3.min.js"></script> | |
| 101 | +<!-- EventProxy --> | |
| 102 | +<script src="/assets/js/eventproxy.js"></script> | |
| 103 | +<!-- Geolib --> | |
| 104 | +<script src="/real_control_v2/geolib/geolib.js" merge="plugins"></script> | |
| 105 | + | |
| 106 | +<script> | |
| 107 | + | |
| 108 | + | |
| 109 | + var res_load_ep = EventProxy.create('load_home_layout', 'load_home_line_panel', 'load_data_basic', 'data-basic', function () { | |
| 110 | + //加载主页 | |
| 111 | + gb_home_layout.layout(function () { | |
| 112 | + gb_home_line_panel.init(function () { | |
| 113 | + //gps自刷新 | |
| 114 | + gb_data_gps.fixedTimeRefresh(); | |
| 115 | + | |
| 116 | + $('.uk-icon-send-o.home_alone_page').remove(); | |
| 117 | + }); | |
| 118 | + }); | |
| 119 | + }); | |
| 120 | + | |
| 121 | + function connectArr(arr, separator, transFun) { | |
| 122 | + var rs = ''; | |
| 123 | + $.each(arr, function (i, item) { | |
| 124 | + if (transFun) | |
| 125 | + item = transFun(item); | |
| 126 | + rs += (separator + item); | |
| 127 | + }); | |
| 128 | + return rs.substr(separator.length); | |
| 129 | + } | |
| 130 | + | |
| 131 | + var isArray = function (obj) { | |
| 132 | + return Object.prototype.toString.call(obj) === '[object Array]'; | |
| 133 | + }; | |
| 134 | + | |
| 135 | + var gb_form_validation_opts = { | |
| 136 | + framework: 'uikit', | |
| 137 | + locale: 'zh_CN', | |
| 138 | + icon: { | |
| 139 | + valid: 'uk-icon-check', | |
| 140 | + invalid: 'uk-icon-times', | |
| 141 | + validating: 'uk-icon-refresh' | |
| 142 | + } | |
| 143 | + }; | |
| 144 | + | |
| 145 | +</script> | |
| 146 | + | |
| 147 | +<!-- uikit core --> | |
| 148 | +<script src="/real_control_v2/assets/plugins/uikit-2.27.1/uikit.min.js" merge="uikit_js"></script> | |
| 149 | +<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/notify.min.js" merge="uikit_js"></script> | |
| 150 | +<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/pagination.min.js" merge="uikit_js"></script> | |
| 151 | +<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/tooltip.min.js" merge="uikit_js"></script> | |
| 152 | +<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/sticky.min.js" merge="uikit_js"></script> | |
| 153 | + | |
| 154 | + | |
| 155 | +<!-- jquery contextMenu --> | |
| 156 | +<script src="/real_control_v2/assets/js/jquery.contextMenu.min.js" merge="plugins"></script> | |
| 157 | +<script src="/real_control_v2/assets/js/jquery.ui.position.min.js" merge="plugins"></script> | |
| 158 | +<!-- formvalidation- --> | |
| 159 | +<script src="/real_control_v2/assets/plugins/formvalidation/formValidation.min.js" merge="plugins"></script> | |
| 160 | +<script src="/real_control_v2/assets/plugins/formvalidation/zh_CN.js" merge="plugins"></script> | |
| 161 | +<script src="/real_control_v2/assets/plugins/formvalidation/uikit.min.js" merge="plugins"></script> | |
| 162 | +<!-- js tree --> | |
| 163 | +<script src="/real_control_v2/assets/plugins/jstree/jstree.min.js" merge="plugins"></script> | |
| 164 | +<!-- simple pinyin --> | |
| 165 | +<script src="/assets/plugins/pinyin.js" merge="plugins"></script> | |
| 166 | +<!-- qtip --> | |
| 167 | +<script src="/real_control_v2/assets/plugins/qtip/jquery.qtip.min.js" merge="plugins"></script> | |
| 168 | +<!-- layer 3.0.3 --> | |
| 169 | +<script src="/real_control_v2/assets/plugins/layer3.0.3/layer.js" merge="plugins"></script> | |
| 170 | + | |
| 171 | +<!-- 数据 --> | |
| 172 | +<script src="/real_control_v2/alone_page/home/alone_data_basic.js" merge="custom_js"></script> | |
| 173 | +<script src="/real_control_v2/alone_page/home/alone_data_gps.js" merge="custom_js"></script> | |
| 174 | +<script src="/real_control_v2/js/data/gps_abnormal.js" merge="custom_js"></script> | |
| 175 | +<!-- 线路模拟图 --> | |
| 176 | +<script src="/real_control_v2/js/utils/svg_chart.js" merge="custom_js"></script> | |
| 177 | +<script src="/real_control_v2/js/utils/svg_data_convert.js" merge="custom_js"></script> | |
| 178 | +<script src="/real_control_v2/js/utils/svg_chart_tooltip.js" merge="custom_js"></script> | |
| 179 | +<script src="/real_control_v2/js/utils/svg_chart_map.js" merge="custom_js"></script> | |
| 180 | + | |
| 181 | +<!-- custom table js --> | |
| 182 | +<script src="/real_control_v2/js/utils/ct_table.js" merge="custom_js"></script> | |
| 183 | +<!-- home js --> | |
| 184 | +<script src="/real_control_v2/js/home/layout.js" merge="custom_js"></script> | |
| 185 | +<script src="/real_control_v2/js/home/line_panel.js" merge="custom_js"></script> | |
| 186 | +<script src="/real_control_v2/js/home/context_menu.js" merge="custom_js"></script> | |
| 187 | + | |
| 188 | + | |
| 189 | +<!-- 模态框扩展 --> | |
| 190 | +<script src="/real_control_v2/js/modal_extend.js" merge="custom_js"></script> | |
| 191 | + | |
| 192 | +</body> | |
| 193 | + | |
| 194 | +</html> | ... | ... |
src/main/resources/static/real_control_v2/alone_page/map/alone_wrap.html
| 1 | -<!DOCTYPE html> | |
| 2 | -<html lang="zh-cn"> | |
| 3 | - | |
| 4 | -<head> | |
| 5 | - <meta charset="UTF-8"> | |
| 6 | - <title>地图监控 v2.0</title> | |
| 7 | - <!-- uikit core style--> | |
| 8 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/css/uikit.gradient.min.css"/> | |
| 9 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/notify.gradient.min.css" | |
| 10 | - merge="plugins"/> | |
| 11 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/tooltip.gradient.min.css" | |
| 12 | - merge="plugins"/> | |
| 13 | - <link rel="stylesheet" | |
| 14 | - href="/real_control_v2/assets/plugins/uikit-2.27.1/components/autocomplete.gradient.min.css" merge="plugins"/> | |
| 15 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/accordion.gradient.min.css" | |
| 16 | - merge="plugins"/> | |
| 17 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/slidenav.gradient.min.css" | |
| 18 | - merge="plugins"/> | |
| 19 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/sticky.gradient.min.css" | |
| 20 | - merge="plugins"/> | |
| 21 | - | |
| 22 | - <!-- main style --> | |
| 23 | - <link rel="stylesheet" href="/real_control_v2/css/main.css"/> | |
| 24 | - <!-- north style --> | |
| 25 | - <link rel="stylesheet" href="/real_control_v2/css/north.css" merge="custom_style"/> | |
| 26 | - <!-- home style --> | |
| 27 | - <link rel="stylesheet" href="/real_control_v2/css/home.css" merge="custom_style"/> | |
| 28 | - | |
| 29 | - <!-- js tree --> | |
| 30 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/jstree/default/style.css" merge="plugins"/> | |
| 31 | - | |
| 32 | - <link rel="stylesheet" href="/real_control_v2/css/modal_extend.css" merge="custom_style"/> | |
| 33 | - <!-- perfect-scrollbar style --> | |
| 34 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.css" | |
| 35 | - merge="plugins"/> | |
| 36 | - <!-- layer 3.0.3 --> | |
| 37 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/layer3.0.3/skin/default/layer.css" merge="plugins"/> | |
| 38 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/layer3.0.3/skin/moon/style.css" merge="plugins"/> | |
| 39 | - | |
| 40 | - <!-- flatpickr --> | |
| 41 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/flatpickr/flatpickr.min.css" merge="plugins"/> | |
| 42 | - <link rel="stylesheet" href="/real_control_v2/assets/plugins/flatpickr/themes/airbnb.css" merge="plugins"/> | |
| 43 | - | |
| 44 | - <link rel="stylesheet" href="/real_control_v2/css/ct_table.css" merge="custom_style"/> | |
| 45 | - | |
| 46 | - <style> | |
| 47 | - .main-container .map-panel{ | |
| 48 | - position: absolute; | |
| 49 | - top:0; | |
| 50 | - left: 0; | |
| 51 | - width: 20px; | |
| 52 | - z-index: 999; | |
| 53 | - height: 20px; | |
| 54 | - } | |
| 55 | - </style> | |
| 56 | -</head> | |
| 57 | - | |
| 58 | -<body> | |
| 59 | -<div class="main-container" style="height: 100%;"> | |
| 60 | - <span style="position: absolute;left: calc(50% - 35px);top: calc(45% - 35px);">加载中...</span> | |
| 61 | -</div> | |
| 62 | -<!-- 地图相关 --> | |
| 63 | -<script src="http://api.map.baidu.com/api?v=2.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script> | |
| 64 | -<script src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script> | |
| 65 | -<script src="/assets/js/baidu//MarkerClusterer.js" merge="plugins"></script> | |
| 66 | -<script src="/assets/js/TransGPS.js" merge="plugins"></script> | |
| 67 | -<!-- 高德 --> | |
| 68 | -<script src="http://webapi.amap.com/maps?v=1.3&key=16cb1c5043847e09ef9edafdd77befda"></script> | |
| 69 | -<!-- jquery --> | |
| 70 | -<script src="/real_control_v2/assets/js/jquery.min.js"></script> | |
| 71 | -<!-- jquery actual --> | |
| 72 | -<script src="/real_control_v2/assets/js/jquery.actual.min.js" merge="plugins"></script> | |
| 73 | -<!-- moment.js 日期处理类库 --> | |
| 74 | -<script src="/real_control_v2/assets/plugins/moment/moment.min.js"></script> | |
| 75 | -<script src="/real_control_v2/assets/plugins/moment/zh-cn.js"></script> | |
| 76 | - | |
| 77 | -<!-- flatpickr --> | |
| 78 | -<script src="/real_control_v2/assets/plugins/flatpickr/flatpickr.min.js" merge="plugins"></script> | |
| 79 | -<script src="/real_control_v2/assets/plugins/flatpickr/l10n/zh.js" merge="plugins"></script> | |
| 80 | - | |
| 81 | -<!-- perfect-scrollbar --> | |
| 82 | -<script src="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.jquery.js" merge="plugins"></script> | |
| 83 | -<!-- common js --> | |
| 84 | -<script src="/real_control_v2/js/common.js"></script> | |
| 85 | -<!-- art-template 模版引擎 --> | |
| 86 | -<script src="/assets/plugins/template.js" merge="plugins"></script> | |
| 87 | -<!-- d3 --> | |
| 88 | -<script src="/assets/js/d3.min.js"></script> | |
| 89 | -<!-- EventProxy --> | |
| 90 | -<script src="/assets/js/eventproxy.js"></script> | |
| 91 | -<!-- uikit core --> | |
| 92 | -<script src="/real_control_v2/assets/plugins/uikit-2.27.1/uikit.min.js" merge="uikit_js"></script> | |
| 93 | -<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/notify.min.js" merge="uikit_js"></script> | |
| 94 | -<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/tooltip.min.js" merge="uikit_js"></script> | |
| 95 | -<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/autocomplete.min.js" merge="uikit_js"></script> | |
| 96 | -<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/accordion.min.js" merge="uikit_js"></script> | |
| 97 | -<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/sticky.min.js" merge="uikit_js"></script> | |
| 98 | - | |
| 99 | -<!-- js tree --> | |
| 100 | -<script src="/real_control_v2/assets/plugins/jstree/jstree.min.js" merge="plugins"></script> | |
| 101 | -<!-- layer 3.0.3 --> | |
| 102 | -<script src="/real_control_v2/assets/plugins/layer3.0.3/layer.js" merge="plugins"></script> | |
| 103 | - | |
| 104 | -<!-- 模态框扩展 --> | |
| 105 | -<script src="/real_control_v2/js/modal_extend.js" merge="custom_js"></script> | |
| 106 | - | |
| 107 | -<script src="/real_control_v2/alone_page/map/alone_data_basic.js" merge="custom_js"></script> | |
| 108 | -<script src="/real_control_v2/alone_page/map/alone_data_gps.js" merge="custom_js"></script> | |
| 109 | -<script src="/real_control_v2/js/utils/ct_table.js" merge="custom_js"></script> | |
| 110 | -<!-- jquery.serializejson JSON序列化插件 --> | |
| 111 | -<script src="/assets/plugins/jquery.serializejson.js" merge="uikit_js"></script> | |
| 112 | - | |
| 113 | -<script src="/assets/plugins/pinyin.js" merge="plugins"></script> | |
| 114 | -</body> | |
| 115 | -<script> | |
| 116 | - gb_data_gps.fixedTimeRefresh(); | |
| 117 | - var res_load_ep = EventProxy.create('data-basic', function () { | |
| 118 | - | |
| 119 | - //嵌入地图页面 | |
| 120 | - $('.main-container').load('/real_control_v2/mapmonitor/real.html', function () { | |
| 121 | - $('.map-system-msg.flex-left').remove(); | |
| 122 | - | |
| 123 | - $(this).append('<span class="map-panel"></span>');//判断里有JS判定这个容器是否显示 | |
| 124 | - }); | |
| 125 | - }); | |
| 126 | - | |
| 127 | - var isArray = function (obj) { | |
| 128 | - return Object.prototype.toString.call(obj) === '[object Array]'; | |
| 129 | - }; | |
| 130 | -</script> | |
| 131 | -</html> | |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="zh-cn"> | |
| 3 | + | |
| 4 | +<head> | |
| 5 | + <meta charset="UTF-8"> | |
| 6 | + <title>地图监控 v2.0</title> | |
| 7 | + <!-- uikit core style--> | |
| 8 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/css/uikit.gradient.min.css"/> | |
| 9 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/notify.gradient.min.css" | |
| 10 | + merge="plugins"/> | |
| 11 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/tooltip.gradient.min.css" | |
| 12 | + merge="plugins"/> | |
| 13 | + <link rel="stylesheet" | |
| 14 | + href="/real_control_v2/assets/plugins/uikit-2.27.1/components/autocomplete.gradient.min.css" merge="plugins"/> | |
| 15 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/accordion.gradient.min.css" | |
| 16 | + merge="plugins"/> | |
| 17 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/slidenav.gradient.min.css" | |
| 18 | + merge="plugins"/> | |
| 19 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/uikit-2.27.1/components/sticky.gradient.min.css" | |
| 20 | + merge="plugins"/> | |
| 21 | + | |
| 22 | + <!-- main style --> | |
| 23 | + <link rel="stylesheet" href="/real_control_v2/css/main.css"/> | |
| 24 | + <!-- north style --> | |
| 25 | + <link rel="stylesheet" href="/real_control_v2/css/north.css" merge="custom_style"/> | |
| 26 | + <!-- home style --> | |
| 27 | + <link rel="stylesheet" href="/real_control_v2/css/home.css" merge="custom_style"/> | |
| 28 | + | |
| 29 | + <!-- js tree --> | |
| 30 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/jstree/default/style.css" merge="plugins"/> | |
| 31 | + | |
| 32 | + <link rel="stylesheet" href="/real_control_v2/css/modal_extend.css" merge="custom_style"/> | |
| 33 | + <!-- perfect-scrollbar style --> | |
| 34 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.css" | |
| 35 | + merge="plugins"/> | |
| 36 | + <!-- layer 3.0.3 --> | |
| 37 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/layer3.0.3/skin/default/layer.css" merge="plugins"/> | |
| 38 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/layer3.0.3/skin/moon/style.css" merge="plugins"/> | |
| 39 | + | |
| 40 | + <!-- flatpickr --> | |
| 41 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/flatpickr/flatpickr.min.css" merge="plugins"/> | |
| 42 | + <link rel="stylesheet" href="/real_control_v2/assets/plugins/flatpickr/themes/airbnb.css" merge="plugins"/> | |
| 43 | + | |
| 44 | + <link rel="stylesheet" href="/real_control_v2/css/ct_table.css" merge="custom_style"/> | |
| 45 | + | |
| 46 | + <style> | |
| 47 | + .main-container .map-panel{ | |
| 48 | + position: absolute; | |
| 49 | + top:0; | |
| 50 | + left: 0; | |
| 51 | + width: 20px; | |
| 52 | + z-index: 999; | |
| 53 | + height: 20px; | |
| 54 | + } | |
| 55 | + </style> | |
| 56 | +</head> | |
| 57 | + | |
| 58 | +<body> | |
| 59 | +<div class="main-container" style="height: 100%;"> | |
| 60 | + <span style="position: absolute;left: calc(50% - 35px);top: calc(45% - 35px);">加载中...</span> | |
| 61 | +</div> | |
| 62 | +<!-- 地图相关 --> | |
| 63 | +<script src="//api.map.baidu.com/api?v=2.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script> | |
| 64 | +<script src="//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script> | |
| 65 | +<script src="/assets/js/baidu//MarkerClusterer.js" merge="plugins"></script> | |
| 66 | +<script src="/assets/js/TransGPS.js" merge="plugins"></script> | |
| 67 | +<!-- 高德 --> | |
| 68 | +<script src="//webapi.amap.com/maps?v=1.3&key=16cb1c5043847e09ef9edafdd77befda"></script> | |
| 69 | +<!-- jquery --> | |
| 70 | +<script src="/real_control_v2/assets/js/jquery.min.js"></script> | |
| 71 | +<!-- jquery actual --> | |
| 72 | +<script src="/real_control_v2/assets/js/jquery.actual.min.js" merge="plugins"></script> | |
| 73 | +<!-- moment.js 日期处理类库 --> | |
| 74 | +<script src="/real_control_v2/assets/plugins/moment/moment.min.js"></script> | |
| 75 | +<script src="/real_control_v2/assets/plugins/moment/zh-cn.js"></script> | |
| 76 | + | |
| 77 | +<!-- flatpickr --> | |
| 78 | +<script src="/real_control_v2/assets/plugins/flatpickr/flatpickr.min.js" merge="plugins"></script> | |
| 79 | +<script src="/real_control_v2/assets/plugins/flatpickr/l10n/zh.js" merge="plugins"></script> | |
| 80 | + | |
| 81 | +<!-- perfect-scrollbar --> | |
| 82 | +<script src="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.jquery.js" merge="plugins"></script> | |
| 83 | +<!-- common js --> | |
| 84 | +<script src="/real_control_v2/js/common.js"></script> | |
| 85 | +<!-- art-template 模版引擎 --> | |
| 86 | +<script src="/assets/plugins/template.js" merge="plugins"></script> | |
| 87 | +<!-- d3 --> | |
| 88 | +<script src="/assets/js/d3.min.js"></script> | |
| 89 | +<!-- EventProxy --> | |
| 90 | +<script src="/assets/js/eventproxy.js"></script> | |
| 91 | +<!-- uikit core --> | |
| 92 | +<script src="/real_control_v2/assets/plugins/uikit-2.27.1/uikit.min.js" merge="uikit_js"></script> | |
| 93 | +<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/notify.min.js" merge="uikit_js"></script> | |
| 94 | +<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/tooltip.min.js" merge="uikit_js"></script> | |
| 95 | +<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/autocomplete.min.js" merge="uikit_js"></script> | |
| 96 | +<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/accordion.min.js" merge="uikit_js"></script> | |
| 97 | +<script src="/real_control_v2/assets/plugins/uikit-2.27.1/components/sticky.min.js" merge="uikit_js"></script> | |
| 98 | + | |
| 99 | +<!-- js tree --> | |
| 100 | +<script src="/real_control_v2/assets/plugins/jstree/jstree.min.js" merge="plugins"></script> | |
| 101 | +<!-- layer 3.0.3 --> | |
| 102 | +<script src="/real_control_v2/assets/plugins/layer3.0.3/layer.js" merge="plugins"></script> | |
| 103 | + | |
| 104 | +<!-- 模态框扩展 --> | |
| 105 | +<script src="/real_control_v2/js/modal_extend.js" merge="custom_js"></script> | |
| 106 | + | |
| 107 | +<script src="/real_control_v2/alone_page/map/alone_data_basic.js" merge="custom_js"></script> | |
| 108 | +<script src="/real_control_v2/alone_page/map/alone_data_gps.js" merge="custom_js"></script> | |
| 109 | +<script src="/real_control_v2/js/utils/ct_table.js" merge="custom_js"></script> | |
| 110 | +<!-- jquery.serializejson JSON序列化插件 --> | |
| 111 | +<script src="/assets/plugins/jquery.serializejson.js" merge="uikit_js"></script> | |
| 112 | + | |
| 113 | +<script src="/assets/plugins/pinyin.js" merge="plugins"></script> | |
| 114 | +</body> | |
| 115 | +<script> | |
| 116 | + gb_data_gps.fixedTimeRefresh(); | |
| 117 | + var res_load_ep = EventProxy.create('data-basic', function () { | |
| 118 | + | |
| 119 | + //嵌入地图页面 | |
| 120 | + $('.main-container').load('/real_control_v2/mapmonitor/real.html', function () { | |
| 121 | + $('.map-system-msg.flex-left').remove(); | |
| 122 | + | |
| 123 | + $(this).append('<span class="map-panel"></span>');//判断里有JS判定这个容器是否显示 | |
| 124 | + }); | |
| 125 | + }); | |
| 126 | + | |
| 127 | + var isArray = function (obj) { | |
| 128 | + return Object.prototype.toString.call(obj) === '[object Array]'; | |
| 129 | + }; | |
| 130 | +</script> | |
| 131 | +</html> | ... | ... |