IT技术互动交流平台

GPS/轨迹追踪、轨迹回放、围栏控制

作者:Dana丶Li  发布日期:2015-06-25 20:14:51


折腾一个多月终于弄完了这个项目,起初都未曾接触GPS/轨迹追踪、轨迹回放、圈划围栏...等一些在百度地图或者Googel地图操作的一些业务,后端的业务相对来说简单点

cas单点登录,mongdb灵活的数据存储方式,ActiveMQ消息推送、Redis存储...

这篇的主要篇幅主要来讲述下项目中的一些地图上棘手的问题

接口测试数据:

1.GPS数据接收接口对于日期格式的转化
作为码农都知道Web接口传输的数据都是以Json的数据形式传输,日期格式不同是我们头疼的事情,当然要是我们自己给App端,云平台端...都喜欢直接点java.util.Date类型直接抛给对
方,当然作为接收方很反感这种以毫秒的形式
①org.springframework.web.bind.annotation.ResponseBody 这是我们用SpringMvc常用的一种转JSON的形式,常用业务中完全可以搞定
②com.alibaba.fastjson.annotation.JSONField 阿里巴巴的转JSON形式,起初对它并不有所偏好,后来写接口写多了,就慢慢喜欢上了

@ResponseBody 直接将我们所需要的数据格式封装起来直接转JSON返回
如:


  1 import java.io.Serializable;
  2 
  3 @SuppressWarnings('rawtypes')
  4 public class APIContent implements Serializable{
  5     /**
  6      * 
  7      */
  8     private static final long serialVersionUID = 2127409162712908650L;
  9     
 10     public APIContent(){}
 11     
 12     private Page page;
 13     
 14     private boolean ok=true;
 15     
 16     /**
 17      * 返回的数据包
 18      */
 19     private Object data;
 20     
 21     /**
 22      * 错误码,请查globs
 23      */
 24     private int code = ApiGlobals.SUCCESS;
 25     /**
 26      * 消息处理
 27      */
 28     private String msg;
 29     
 30     
 31     /**
 32      * 返回数据成功,设置数据。
 33      * @param data
 34      */
 35     public APIContent(Object data){
 36         this.data=data;
 37     }
 38     
 39     /**
 40      * 返回数据成功,设置数据。
 41      * @param data
 42      */
 43     public APIContent(Page page, Object data){
 44         this.page = page;
 45         this.data=data;
 46     }
 47     public APIContent(int code){
 48         this.code=code;
 49     }
 50     public Object getData() {
 51         return data;
 52     }
 53 
 54     public void setData(Object data) {
 55         this.data = data;
 56     }
 57 
 58     public int getCode() {
 59         return code;
 60     }
 61 
 62     public void setApiCode(int code){
 63         switch(code){
 64         case ApiCode.opt.DATA_REPEAT:
 65             setMsg('data is repeat! ');
 66             break;
 67         case ApiCode.opt.NOT_LOGIN:
 68             setMsg('please login first! ');
 69             break;
 70         case ApiCode.bug.INVAILD_PARAMS:
 71             setMsg('invaild params! ');
 72             break;
 73         case ApiCode.bug.NO_RESOURCE:
 74             setMsg('not exists resource! ');
 75             break;
 76         case ApiCode.bug.OPERATION:
 77             setMsg('operation falied! ');
 78             break;
 79         case ApiCode.bug.UNDEFINE_FUN:
 80             setMsg('unimplements function or version! ');
 81             break;    
 82         case ApiCode.fatal.ERR_SERVER:
 83             setMsg('server error! ');
 84             break;    
 85         case ApiCode.Login.INVAILD_PWD:
 86             setMsg('password is invalid! ');
 87         case ApiCode.Login.NOT_REGISTER:
 88             setMsg('not register user! ');
 89             break;    
 90         case ApiCode.BindDevice.DEVICE_HAS_BIND:
 91             setMsg('device has binded! ');
 92             break;    
 93         case ApiCode.BindDevice.INVAILD_PWD:
 94             setMsg('device password is invalid! ');
 95             break;    
 96         case ApiCode.BindDevice.NO_DEVICE:
 97             setMsg('device is not exists! ');
 98             break;    
 99         }
100         this.code=code;
101     }
102     
103     public boolean isOk() {
104         return ok;
105     }
106     public void setOk(boolean ok) {
107         this.ok = ok;
108     }
109     public void setCode(int code) {
110 
111         this.code = code;
112     }
113     
114     public Page getPage() {
115         return page;
116     }
117     public void setPage(Page page) {
118         this.page = page;
119     }
120     public String getMsg() {
121         return msg;
122     }
123     public void setMsg(String msg) {
124         this.msg = msg;
125     }
126     
127 }

将数据封装到date中然后标识状态码,提示信息返回


@JSONField 的处理有所不同的是,对于日期的处理以及返回形式都可改变
如:我们对日期格式的转化

@JSONField(name = 'type')
private String mcTypeName; // 设备类型
@JSONField(name = 'expireTime', format = 'yyyy-MM-dd HH:mm:ss')
private Date expireTime;    //过期时间
@JSONField(name = 'createTime', format = 'yyyy-MM-dd HH:mm:ss')
private Date createTime;    //接入时间

返回数据处理 :自定义形式..仅作参考


1 Map<Class<?>, String[]> includes = new HashMap<Class<?>, String[]>();
2 includes.put(APIContent.class, new String[] { 'code', 'msg', 'data' });
3 includes.put(HashMap.class, new String[] { 'gps', 'obd', 'hb', 'status', 'bd', 'gg', 'geoname'});
4 includes.put(VOrganize.class, new String[] { 'organizeName', 'vehicles' });
5 includes.put(Vehicle.class, new String[] { 'statusMap', 'plateNum', 'vechleName', 'imei', 'id', 'vechleioc' });
6 includes.put(OBDProtocol.class, new String[] { 'engineStatus', 'speedAverage' });
7 includes.put(GPSProtocol.class, new String[] { 'acc', 'gpsTime', 'latitude', 'longitude' });
8 includes.put(HBProtocol.class, new String[] { 'time' });
9 includes.put(Point.class, new String[] { 'lat', 'lng' });

  1 package com.jimi.commons.utils;
  2 
  3 import java.util.ArrayList;
  4 import java.util.Iterator;
  5 import java.util.List;
  6 import java.util.Map;
  7 import java.util.Map.Entry;
  8 
  9 import javax.servlet.ServletOutputStream;
 10 import javax.servlet.http.HttpServletResponse;
 11 
 12 import org.apache.commons.beanutils.PropertyUtils;
 13 import org.apache.commons.io.IOUtils;
 14 import org.apache.log4j.Logger;
 15 
 16 import com.alibaba.fastjson.serializer.JSONSerializer;
 17 import com.alibaba.fastjson.serializer.NameFilter;
 18 import com.alibaba.fastjson.serializer.PropertyFilter;
 19 import com.alibaba.fastjson.serializer.SerializeConfig;
 20 import com.alibaba.fastjson.serializer.SerializeWriter;
 21 import com.alibaba.fastjson.serializer.SerializerFeature;
 22 import com.alibaba.fastjson.serializer.SimpleDateFormatSerializer;
 23 import com.alibaba.fastjson.serializer.ValueFilter;
 24 import com.jimi.commons.vo.APIContent;
 25 
 26 
 27 /**
 28  * 转换JSON工具类
 29  * 
 30  */
 31 public class JsonUtils {
 32     private static Logger log = Logger.getLogger(JsonUtils.class);
 33     private final static String DATAS_FLAG = ''data':[]';
 34     private static boolean loaded = false;
 35     
 36     /**
 37      * 
 38      * @param object
 39      * @param includes
 40      * @return
 41      * @author chengxuwei
 42      * 
 43      */
 44     public static String toJson(Object object,Map<Class<?>,String[]> includes) {
 45         return toJson(object,includes,null,null);
 46     }
 47 
 48     /**
 49      * 
 50      * @param object
 51      * @param includes
 52      * @param alias
 53      * @return
 54      * @author chengxuwei
 55      */
 56     public static String toJson(Object object,Map<Class<?>,String[]> includes,Map<Class<?>,Map<String,String>> alias) {
 57         return toJson(object,includes,null,alias);
 58     }
 59     /**
 60      * 带包函,排出的序列化
 61      * @param object 被转对象
 62      * @param includes 类包函的属性
 63      * @param excludes 类排出的属性
 64      * @return
 65      * @author chengxuwei
 66      */
 67     public static String toJson(Object object,Map<Class<?>,String[]> includes,Map<Class<?>,String[]> excludes,Map<Class<?>,Map<String,String>> alias ) {
 68         SerializeWriter writer = new SerializeWriter();
 69         try{
 70             JSONSerializer serializer = new JSONSerializer(writer); 
 71             //序列化配置
 72 //            serializer.config(SerializerFeature.WriteNullNumberAsZero, true);
 73 //            serializer.config(SerializerFeature.WriteNullStringAsEmpty, true);
 74 //            serializer.config(SerializerFeature.WriteNullBooleanAsFalse, true);
 75 //            serializer.config(SerializerFeature.WriteNullListAsEmpty, true);
 76             //包括
 77             if(null!=includes&&includes.size()>0){
 78                 SimpleSerializerFilter filter = SimpleSerializerFilter.getIncludeFilter();
 79                 Iterator<Entry<Class<?>, String[]>> ite = includes.entrySet().iterator();
 80                 while(ite.hasNext()){
 81                     Entry<Class<?>, String[]> kv = ite.next();
 82                     filter.addFilterFields(kv.getKey(), kv.getValue());
 83                 }
 84                 serializer.getPropertyFilters().add(filter);
 85             }
 86             //排出
 87             if(null!=excludes&&excludes.size()>0){
 88                 SimpleSerializerFilter filter=SimpleSerializerFilter.getExcludesFilter();
 89                 Iterator<Entry<Class<?>, String[]>> ite = excludes.entrySet().iterator();
 90                 while(ite.hasNext()){
 91                     Entry<Class<?>, String[]> kv = ite.next();
 92                     filter.addFilterFields(kv.getKey(), kv.getValue());
 93                 }
 94                 serializer.getPropertyFilters().add(filter);
 95                 
 96             }
 97             //别名
 98             if(null!=alias&&alias.size()>0){
 99                 SimpleNameFilter filter=new SimpleNameFilter();
100                 filter.addAllAlias(alias);
101                 serializer.getNameFilters().add(filter);
102             }
103             //值过滤,Android,IOS终端需要空字符串为''空数字为0
104             serializer.getValueFilters().add(new ValueFilter(){
105                 public Object process(Object source, String name, Object value) {  
106                     if(null==value){
107                         try {
108                             Class clazz = PropertyUtils.getPropertyType(source, name);
109                             if(clazz.isAssignableFrom(String.class)){
110                                 value='';
111                             }else if(clazz.isAssignableFrom(Integer.class)){
112                                 value=0;
113                             }
114                         } catch (Exception e) {
115                             e.printStackTrace();
116                         }
117                     }
118 
119                     return value;  
120                 }  
121       
122             });
123             //write
124             serializer.write(object);
125             return     writer.toString();
126         }catch(Exception e){
127             log.error('to json string error', e);
128         }finally{
129             writer.close();
130         }
131         return null;
132     }
133     
134     /**
135      * 转为Json字串
136      * 
137      * @param object   转换数据对象
138      * @return Json字串
139      */
140     public static String toJson(Object object) {
141         return toJson(object, new String[0]);
142     }
143     
144     /**
145      * 转为Json字串
146      * 
147      * @param object   转换数据对象
148      * @param includes 包含属性数组
149      * @return Json字串
150      */
151     public static String toJson(Object object, String... includes) {
152         return toJson(object, includes, new String[0]);
153     }
154     
155     /**
156      * 转为Json字串
157      * 
158      * @param object   转换数据对象
159      * @param includes 包含属性数组
160      * @param excludes 不包含属性数组
161      * @return Json字串
162      */
163     public static String toJson(Object object, String[] includes, String[] excludes) {
164         return toJson(object, includes, excludes, null);
165     }
166     
167     /**
168      * 转为Json字串
169      * 
170      * 
171      * 属性名称转换
172      * 
173      * 对象A有两个属性:id和name
174      * 正常转换为Json字串为:{'id': 1001, 'name':'测试数据'}
175      * 
176      * 定义属性名称转换:
177      * nameMap.put('id', 'cid');
178      * 转换为Json字串为:{'cid': 1001, 'name':'测试数据'}
179      * 
180      * @param object   转换数据对象
181      * @param includes 包含属性数组
182      * @param excludes 不包含属性数组
183      * @param aliasMap 属性别名map
184      * @return Json字串
185      */
186     @SuppressWarnings('rawtypes')
187     public static String toJson(Object object, String[] includes, String[] excludes, final Map<String, String> aliasMap) {
188         //属性过滤
189         PropertyFilter propertyFilter = null;
190         if ((includes != null && includes.length > 0) || (excludes != null && excludes.length > 0)) {
191             propertyFilter = new CustomPropertyFilter(includes, excludes);
192         }
193         
194         /**
195          * 属性名称转换
196          * 
197          * 对象A有两个属性:id和name
198          * 正常转换为Json字串为:{'id': 1001, 'name':'测试数据'}
199          * 
200          * 定义属性名称转换:
201          * nameMap.put('id', 'cid');
202          * 转换为Json字串为:{'cid': 1001, 'name':'测试数据'}
203          */
204         NameFilter nameFilter = null;
205         
206         if (aliasMap != null && aliasMap.size() > 0) {
207             nameFilter = new NameFilter() {
208                 public String process(Object source, String name, Object value) {
209                     if (aliasMap.containsKey(name)) {
210                         return aliasMap.get(name);
211                     }
212                     return name;
213                 }
214             };
215         }
216         
217         StringBuffer sb = new StringBuffer(2048);
218         
219         try {
220             if (object instanceof APIContent) {
221                 APIContent apiContent = (APIContent) object;
222                 List list = null;
223                 if(apiContent.getData() instanceof List){
224                     list =(List)apiContent.getData();
225                     List nullList=new ArrayList();
226                     apiContent.setData(nullList);
227                 }
228                 sb.append(toJson4Detail(DATAS_FLAG, apiContent, list, propertyFilter, nameFilter));
229                 list = null;
230             }else {
231                 sb.append(toJSONString(object, propertyFilter, nameFilter));
232             }
233         } catch (Exception e) {
234             log.error('toJson错误:', e);
235         }
236         
237         return sb.toString();
238     }
239     
240     public static String escapeXml(String input) {
241         if (input != null) {
242             input = input.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
243         }
244         return input;
245     }
246     
247     private static String toJSONString(Object object, SerializerFeature... features) {
248         return toJSONString(object, null, features);
249     }
250     
251     private static String toJSONString(Object object, PropertyFilter propertyFilter, SerializerFeature... features) {
252         return toJSONString(object, propertyFilter, null, features);
253     }
254     
255     private static String toJSONString(Object object, PropertyFilter propertyFilter, NameFilter nameFilter, SerializerFeature... features) {
256         SerializeWriter out = new SerializeWriter();
257         
258         try {
259             JSONSerializer serializer = new JSONSerializer(out);
260             for (SerializerFeature feature : features) {
261                 serializer.config(feature, true);
262             }
263             
264             serializer.config(SerializerFeature.WriteDateUseDateFormat, true);
265             //serializer.config(SerializerFeature.WriteTabAsSpecial, true);
266             serializer.config(SerializerFeature.DisableCircularReferenceDetect, true);
267             
268             if (propertyFilter != null) {
269                 serializer.getPropertyFilters().add(propertyFilter);
270             }
271             if (nameFilter != null) {
272                 serializer.getNameFilters().add(nameFilter);
273             }
274             
275             setSerializeConfig(serializer.getMapping());
276             
277             serializer.write(object);
278             
279             return out.toString();
280         } finally {
281             out.close();
282         }
283     }
284     
285     private static String toJson4Detail(String flag, Object data, Object list, PropertyFilter propertyFilter, NameFilter nameFilter) {
286         StringBuffer sb = new StringBuffer(2048);
287         
288         if (list == null) {
289             sb.append(toJSONString(data,propertyFilter, nameFilter));
290         } else {
291             sb.append(toJSONString(data));
292             int pos = sb.indexOf(flag);
293             if (pos != -1) {
294                 int end = pos + flag.length();
295                 int start = end - 2;
296                 sb.delete(start , end);
297                 sb.insert(start, toJSONString(list, propertyFilter, nameFilter));
298             }
299         }
300         
301         return sb.toString();
302     }
303     
304     private static void setSerializeConfig(SerializeConfig serializeConfig) {
305         if (!loaded) {
306             serializeConfig.put(java.sql.Date.class, new SimpleDateFormatSerializer('yyyy-MM-dd'));
307             loaded = true;
308         }
309     }
310 
311     
312  
313 }
 1 /*
 2      * public void returnJson2(HttpServletResponse response, Object object, String... includes) { returnJson2(response, getJson(object, includes)); }
 3      * 
 4      * public void returnJson2(HttpServletResponse response, Object object, String[] includes, String[] excludes) { returnJson2(response, getJson(object, includes, excludes)); }
 5      * 
 6      * public void returnJson2(HttpServletResponse response, String json) { returnJson(response, (HttpServletRequest) null, json); }
 7      */
 8     public void returnJson(HttpServletResponse response, HttpServletRequest request, String json) {
 9         try {
10             String contentType = 'application/json; charset=UTF-8';
11             if (request != null) {
12                 String accept = request.getHeader('accept');
13                 if (accept != null && !accept.contains('json')) {
14                     contentType = 'text/html; charset=UTF-8';
15                 }
16             }
17             response.setContentType(contentType);
18             response.getWriter().write(json);
19             response.getWriter().flush();
20         } catch (IOException e) {
21             if (logger.isErrorEnabled()) {
22                 logger.error('returnJson is error!', e);
23             }
24         }
25     }

 2.分段轨迹/轨迹追踪

(注:每次选取不同轨迹的时候先清除原先画的轨迹)

百度地图

谷歌地图

代码实现:

①值得注意的是GPS经纬度转化为百度经纬度和谷歌经纬度是不一样的
这里我做的算法处理
获取百度经纬度:通过GPS/(lat,lng)得到百度地图经纬度
获取谷歌地图经纬度:通过GPS/(lat,lng)得到百度地图经纬度,在将百度经纬度转化为谷歌地图经纬度
源码:(获取上诉接口数据...然后在做坐标处理)

Point.java

 1 public class Point {
 2 
 3     private double lat;// 纬度
 4     private double lng;// 经度
 5 
 6     public Point() {
 7     }
 8 
 9     public Point(double lng, double lat) {
10         this.lng = lng;
11         this.lat = lat;
12     }
13 
14     @Override
15     public boolean equals(Object obj) {
16         if (obj instanceof Point) {
17             Point bmapPoint = (Point) obj;
18             return (bmapPoint.getLng() == lng && bmapPoint.getLat() == lat) ? true
19                     : false;
20         } else {
21             return false;
22         }
23     }
24 
25     public double getLat() {
26         return lat;
27     }
28 
29     public void setLat(double lat) {
30         this.lat = lat;
31     }
32 
33     public double getLng() {
34         return lng;
35     }
36 
37     public void setLng(double lng) {
38         this.lng = lng;
39     }
40 
41     @Override
42     public String toString() {
43         return 'Point [lat=' + lat + ', lng=' + lng + ']';
44     }
45 
46 }

经纬度转化算法

  1 public class CoordinateConversion {
  2     private static final double x_pi = 3.14159265358979324 * 3000.0 / 180.0;
  3 
  4     private static final double pi = 3.14159265358979324;  //元周率
  5     private static final double a = 6378245.0; //卫星椭球坐标投影到平面地图坐标系的投影因子。
  6     private static final double ee = 0.00669342162296594323; //ee: 椭球的偏心率。
  7 
  8     /**
  9      * gg_lat 纬度 
 10      * gg_lon 经度 
 11      * GCJ-02转换BD-09 Google地图经纬度转百度地图经纬度
 12      * */
 13     public static Point google_bd_encrypt(double gg_lat, double gg_lon) {
 14         Point point = new Point();
 15         double x = gg_lon, y = gg_lat;
 16         double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
 17         double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
 18         double bd_lon = z * Math.cos(theta) + 0.0065;
 19         double bd_lat = z * Math.sin(theta) + 0.006;
 20         point.setLat(bd_lat);
 21         point.setLng(bd_lon);
 22         return point;
 23     }
 24 
 25     /**
 26      * wgLat 纬度 
 27      * wgLon 经度 
 28      * BD-09转换GCJ-02 百度转google
 29      * */
 30     public static Point bd_google_encrypt(double bd_lat, double bd_lon) {
 31         Point point = new Point();
 32         double x = bd_lon - 0.0065, y = bd_lat - 0.006;
 33         double z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
 34         double theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
 35         double gg_lon = z * Math.cos(theta);
 36         double gg_lat = z * Math.sin(theta);
 37         point.setLat(gg_lat);
 38         point.setLng(gg_lon);
 39         return point;
 40     }
 41     
 42     
 43     /**
 44      * wgLat 纬度 
 45      * wgLon 经度 
 46      * BD-09转换GCJ-02 百度转
 47      * */
 48     public static Point bd_google_baidu_encrypt(double bd_lat, double bd_lon) {
 49         Point point = new Point();
 50         point=wgs_gcj_encrypts(bd_lat,bd_lon);
 51         point=google_bd_encrypt(point.getLat(),point.getLng());
 52         return point;
 53     }
 54     
 55 
 56     /**
 57      * wgLat 纬度
 58      * wgLon 经度
 59      * WGS-84 到 GCJ-02 的转换(即 GPS 加偏)
 60      * */
 61     public static Point wgs_gcj_encrypts(double wgLat, double wgLon) {
 62         Point point = new Point();
 63         if (outOfChina(wgLat, wgLon)) {
 64             point.setLat(wgLat);
 65             point.setLng(wgLon);
 66             return point;
 67         }
 68         double dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
 69         double dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
 70         double radLat = wgLat / 180.0 * pi;
 71         double magic = Math.sin(radLat);
 72         magic = 1 - ee * magic * magic;
 73         double sqrtMagic = Math.sqrt(magic);
 74         dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
 75         dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
 76         double lat = wgLat + dLat;
 77         double lon = wgLon + dLon;
 78         point.setLat(lat);
 79         point.setLng(lon);
 80         return point;
 81     }
 82 
 83     public static void transform(double wgLat, double wgLon, double[] latlng) {
 84         if (outOfChina(wgLat, wgLon)) {
 85             latlng[0] = wgLat;
 86             latlng[1] = wgLon;
 87             return;
 88         }
 89         double dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
 90         double dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
 91         double radLat = wgLat / 180.0 * pi;
 92         double magic = Math.sin(radLat);
 93         magic = 1 - ee * magic * magic;
 94         double sqrtMagic = Math.sqrt(magic);
 95         dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
 96         dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
 97         latlng[0] = wgLat + dLat;
 98         latlng[1] = wgLon + dLon;
 99     }
100 
101     private static boolean outOfChina(double lat, double lon) {
102         if (lon < 72.004 || lon > 137.8347)
103             return true;
104         if (lat < 0.8293 || lat > 55.8271)
105             return true;
106         return false;
107     }
108 
109     private static double transformLat(double x, double y) {
110         double ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y
111                 + 0.2 * Math.sqrt(Math.abs(x));
112         ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
113         ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
114         ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
115         return ret;
116     }
117 
118     private static double transformLon(double x, double y) {
119         double ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1
120                 * Math.sqrt(Math.abs(x));
121         ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
122         ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
123         ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0
124                 * pi)) * 2.0 / 3.0;
125         return ret;
126     }
127 }

初始化原型地图通用模块

  1 <script type='text/javascript'>
  2 var allMap;//公共的默认加载百度google地图
  3 var allMapType=$('#selectMap').val();
  4 if(allMapType=='googleMap'){
  5     initGoogleMap();
  6     
  7 }else{
  8     initBaiDuMap();//默认自动加载百度地图
  9     
 10 }
 11 
 12 //普通
 13 $('#selectMap').change(function(){
 14     var mapType=$(this).children('option:selected').val();//这就是selected的值 
 15     if(mapType=='googleMap'){
 16         initGoogleMap();
 17         
 18     }else{
 19         initBaiDuMap();
 20         
 21     }
 22     allMapType=mapType;
 23 });
 24 
 25 /***
 26 电子围栏切换
 27 $('#selectGeozoneMap').change(function(){
 28     var mapType=$(this).children('option:selected').val();//这就是selected的值 
 29     if(mapType=='googleMap'){
 30         initGoogleMap();//初始化google地图
 31         intoGoogleTools();//初始化google地图绘制工具
 32     }else{
 33         initBaiDuMap();//初始化百度地图
 34         intoBaiDuMapTools();//初始化百度地图绘制工具
 35     }
 36 });
 37 **/
 38 
 39 function initBaiDuMaps(){
 40     var myCity = new BMap.LocalCity();
 41     myCity.get(myCenterAndZoom); 
 42     function myCenterAndZoom(result){
 43         var cityName = result.name;
 44         //initBaiDuMaps(cityName);
 45     }
 46 }
 47 function initBaiDuMap(){
 48     // 百度地图API功能
 49     allMap= new BMap.Map('allmap'); // 创建Map实例 divID必须为allmap
 50     allMap.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
 51     allMap.addControl(new BMap.MapTypeControl()); //添加地图类型控件
 52     allMap.addControl(new BMap.NavigationControl());//设置导航条 (左上角,添加默认缩放平移控件)
 53     allMap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
 54     allMap.clearOverlays();
 55 }
 56 
 57 
 58 function initGoogleMap(){
 59     //Google地图API功能
 60     //纬度&经度
 61     var myCenter=new google.maps.LatLng(39.915,116.404);
 62     var mapProp = {
 63             center:myCenter,
 64             zoom:10,
 65             mapTypeId:google.maps.MapTypeId.ROADMAP
 66     };
 67     allMap = new google.maps.Map(document.getElementById('allmap'),mapProp);
 68 }
 69 
 70 
 71 //地图自动高度
 72 function  mapAutoHeight(){
 73     $('#allmap').height($(window).height() - $('.header').outerHeight() - $('.breadcrumb-func').outerHeight() - $('.footer').outerHeight());
 74 }
 75 mapAutoHeight();     
 76 $(window).resize(function(){
 77     mapAutoHeight();
 78 });
 79 
 80 //状态
 81 var icon_end                 = {icon:new BMap.Icon(_ctx+'/resource/images/36x43/end.png'              ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)};
 82 var icon_start               = {icon:new BMap.Icon(_ctx+'/resource/images/36x43/start.png'            ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)};
 83 var icon_gray_automobile     = {icon:new BMap.Icon(_ctx+'/resource/images/36x43/gray_automobile.png'  ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)};
 84 var icon_gray_bus            = {icon:new BMap.Icon(_ctx+'/resource/images/36x43/gray_bus.png'         ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)};
 85 var icon_gray_truck          = {icon:new BMap.Icon(_ctx+'/resource/images/36x43/gray_truck.png'       ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)};
 86 var icon_green_automobile    = {icon:new BMap.Icon(_ctx+'/resource/images/36x43/green_automobile.png' ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)};
 87 var icon_green_bus           = {icon:new BMap.Icon(_ctx+'/resource/images/36x43/green_bus.png'        ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)};
 88 var icon_green_truck         = {icon:new BMap.Icon(_ctx+'/resource/images/36x43/green_truck.png'      ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)};
 89 var icon_red_automobile      = {icon:new BMap.Icon(_ctx+'/resource/images/36x43/red_automobile.png'   ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)};
 90 var icon_red_bus             = {icon:new BMap.Icon(_ctx+'/resource/images/36x43/red_bus.png'          ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)};
 91 var icon_red_truck           = {icon:new BMap.Icon(_ctx+'/resource/images/36x43/red_truck.png'        ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)};
 92 //0,离线; 1,在线静止; 2,在线运动.
 93 var vechleIconMap=
 94 {
 95     '0_bus'        :icon_gray_bus           ,
 96     '1_bus'        :icon_red_bus            ,
 97     '2_bus'        :icon_green_bus          ,
 98     '0_automobile' :icon_gray_automobile    ,
 99     '1_automobile' :icon_red_automobile     ,
100     '2_automobile' :icon_green_automobile   ,
101     '0_truck'      :icon_gray_truck         ,
102     '1_truck'      :icon_red_truck          ,
103     '2_truck'      :icon_green_truck
104 };
105 
106 var gicon_end                 = {url:_ctx+'/resource/images/36x43/end.png'              ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)};
107 var gicon_start               = {url:_ctx+'/resource/images/36x43/start.png'            ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)};
108 var gicon_gray_automobile     = {url:_ctx+'/resource/images/36x43/gray_automobile.png'  ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)};
109 var gicon_gray_bus            = {url:_ctx+'/resource/images/36x43/gray_bus.png'         ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)};
110 var gicon_gray_truck          = {url:_ctx+'/resource/images/36x43/gray_truck.png'       ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)};
111 var gicon_green_automobile    = {url:_ctx+'/resource/images/36x43/green_automobile.png' ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)};
112 var gicon_green_bus           = {url:_ctx+'/resource/images/36x43/green_bus.png'        ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)};
113 var gicon_green_truck         = {url:_ctx+'/resource/images/36x43/green_truck.png'      ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)};
114 var gicon_red_automobile      = {url:_ctx+'/resource/images/36x43/red_automobile.png'   ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)};
115 var gicon_red_bus             = {url:_ctx+'/resource/images/36x43/red_bus.png'          ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)};
116 var gicon_red_truck           = {url:_ctx+'/resource/images/36x43/red_truck.png'        ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)};
117 
118 //0,离线; 1,在线静止; 2,在线运动.
119 var gvechleIconMap=
120 {
121     '0_bus'        :gicon_gray_bus           ,
122     '1_bus'        :gicon_red_bus            ,
123     '2_bus'        :gicon_green_bus          ,
124     '0_automobile' :gicon_gray_automobile    ,
125     '1_automobile' :gicon_red_automobile     ,
126     '2_automobile' :gicon_green_automobile   ,
127     '0_truck'      :gicon_gray_truck         ,
128     '1_truck'      :gicon_red_truck          ,
129     '2_truck'      :gicon_green_truck
130 };
131 
132 </script>

轨迹分段Map.js

  1 //获取所有点的坐标
  2 
  3 var label; //信息标签
  4 var centerPoint;
  5 var selfAll;
  6 
  7 var startIcon=_ctx+'/resource/images/36x43//start.png';//
  8 var startMaker;//起点
  9 var startLable;
 10 var startPoint;
 11 
 12 var endIcon=_ctx+'/resource/images/36x43/end.png';//
 13 var endLable;//终点
 14 var endMaker;
 15 var endPoint;
 16 
 17 var points=[];
 18 //Googel
 19 var map;
 20 
 21 //选择加载
 22 $('#selectMap').change(function(){
 23     var mapType=$(this).children('option:selected').val();//这就是selected的值 
 24     if(mapType=='googleMap'){
 25         initGoogleMap();
 26     }else{
 27         initBaiDuMap();
 28     }
 29     allMapType=mapType;
 30     getPointAtMap();
 31 });
 32 
 33 
 34 //选择路段信息
 35 function getPointAtMap(startTime,endTime,imei){
 36     points.splice(0, points.length);   //清除记录
 37     $.ajax({
 38         type:'post',
 39         url:_ctx+'/drivingrecord/getPonitAtMap',
 40         async: false,
 41         cache: false,
 42         data:{'startTime':startTime,'endTime':endTime,'imei':imei,'selectMap':allMapType}, 
 43         dataType: 'json',
 44         success:function(returnData){
 45             if(returnData.code==0){
 46                 if(allMapType == 'googleMap'){
 47                     $.each(returnData.data,function(n,value){
 48                         points.push(new google.maps.LatLng(value.lat, value.lng));
 49                     });
 50                     initgoogel();
 51                 }else{
 52                     allMap.clearOverlays();
 53                     $.each(returnData.data,function(n,value){
 54                         points.push(new BMap.Point(value.lng, value.lat));
 55                     });
 56                     initbaidu();
 57                 }
 58             }else{
 59                 layer.msg('该时间段无行驶记录');
 60                 allMap.clearOverlays();
 61                 initbaidu();
 62             }
 63         }
 64     });
 65 }
 66 
 67 function initbaidu() {
 68     //初始化地图,选取第一个点为起始点
 69     allMap.centerAndZoom(points[0], 15);
 70 
 71     centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
 72     allMap.panTo(centerPoint);
 73     //连接所有点
 74     allMap.addOverlay(new BMap.Polyline(points, {strokeColor: '#00cc00', strokeWeight: 5, strokeOpacity: 1}));
 75 
 76     //显示起点
 77     startLable = new BMap.Label('', {offset: new BMap.Size(-35,-35)});
 78     //car = new BMap.Marker(points[0], {icon: new BMap.Icon(iconImg, new BMap.Size(48, 48), {imageOffset: new BMap.Size(0, 0)})});
 79     startPoint=points[0];
 80     startMaker = new BMap.Marker(startPoint, {icon: new BMap.Icon(startIcon, new BMap.Size(48,48)),offset: new BMap.Size(2,-20),imageOffset: new BMap.Size(0,-20)});
 81     //startMaker.setLabel(startLable);
 82     allMap.addOverlay(startMaker);
 83     //显示终点
 84     endLable = new BMap.Label('', {offset: new BMap.Size(-35,-35)});
 85     //car = new BMap.Marker(points[0], {icon: new BMap.Icon(iconImg, new BMap.Size(48, 48), {imageOffset: new BMap.Size(0, 0)})});
 86     endPoint=points[points.length-1];
 87     endMaker = new BMap.Marker(endPoint, {icon: new BMap.Icon(endIcon, new BMap.Size(48,48)),offset: new BMap.Size(2,-20),imageOffset: new BMap.Size(0,-20)});
 88     //endMaker.setLabel(endLable);
 89     allMap.addOverlay(endMaker);
 90 }
 91 
 92 //初始化谷歌地图
 93 function initgoogel(){
 94     var indexCenter=points.length/2;
 95     indexCenter=indexCenter>>0;
 96     
 97     var mapOptions = {
 98             zoom: 14,             //缩放级别
 99             center: points[indexCenter],
100             panControl: true,
101             zoomControl: true,
102             mapTypeControl: true,
103             scaleControl: true,
104             overviewMapControl: true,
105             mapTypeId: google.maps.MapTypeId.ROADMAP
106     };
107     map = new google.maps.Map(document.getElementById('allmap'),mapOptions);
108     var lineSymbol = {
109             //travelMode: google.maps.DirectionsTravelMode.DRIVING,
110             path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
111             scale: 2,
112             strokeColor: '#0000',
113             strokeOpacity: 1.0,    // 透明度
114             strokeWeight: 2,    // 宽度
115             strokeOpacity : 0.8,
116             fillColor : '#0000',
117             fillOpacity : 0.4
118     };
119     line = new google.maps.Polyline({
120         path: points,
121         icons: [{
122             icon: lineSymbol,
123             offset: '1%'
124         }],
125         strokeColor: '#418f02',
126         //travelMode: google.maps.DirectionsTravelMode.DRIVING, 
127         map: map
128     });
129     linePath=line.getPath();
130     new google.maps.Marker(
131             {
132                 position: points[0],
133                 icon:startIcon,
134                 map: map 
135             }
136 
137     );
138     new google.maps.Marker(
139             {
140                 position: points[points.length - 1],
141                 icon:endIcon,
142                 map: map 
143             }
144     );
145     
146 }

注:

① 我们都知道纬度的范围是南北纬0-90°,经度的范围是东西经0-180°

百度地图:对应点经纬度先填纬度,后天经度(开始没有仔细看百度API被坑了许久)

points.push(new BMap.Point(value.lng, value.lat));

谷歌地图:经纬度正常

points.push(new google.maps.LatLng(value.lat, value.lng));

②对起始位置,终点位置的修饰以及轨迹的修饰

其实原理都相通,我们描画地图上的坐标,都是通过逐个坐标点来控制,确定起始,终点坐标,自定义类型

如:

百度地图~

//初始化地图,选取第一个点为起始点
allMap.centerAndZoom(points[0], 15);
//连接所有点
allMap.addOverlay(new BMap.Polyline(points, {strokeColor: '#00cc00', strokeWeight: 5, strokeOpacity: 1}));
//显示起点
startLable = new BMap.Label('', {offset: new BMap.Size(-35,-35)});
//car = new BMap.Marker(points[0], {icon: new BMap.Icon(iconImg, new BMap.Size(48, 48), {imageOffset: new BMap.Size(0, 0)})});
startPoint=points[0];
startMaker = new BMap.Marker(startPoint, {icon: new BMap.Icon(startIcon, new BMap.Size(48,48)),offset: new BMap.Size(2,-20),imageOffset: new BMap.Size(0,-20)});
//显示终点
endLable = new BMap.Label('', {offset: new BMap.Size(-35,-35)});
//car = new BMap.Marker(points[0], {icon: new BMap.Icon(iconImg, new BMap.Size(48, 48), {imageOffset: new BMap.Size(0, 0)})});
endPoint=points[points.length-1];
endMaker = new BMap.Marker(endPoint, {icon: new BMap.Icon(endIcon, new BMap.Size(48,48)),offset: new BMap.Size(2,-20),imageOffset: new BMap.Size(0,-20)});
//endMaker.setLabel(endLable);
allMap.addOverlay(endMaker);

(当然这里值得一提的中点位置,不是终点是中点,当时围栏显示轨迹中心位置所取的一个点,每种地图都要设置一个中心点)

即取起始位置和终点位置的中点就OK了~有点逻辑头脑的都可以接收

开始做百度地图的时候有点棘手,毕竟先前没有接触过,后来做谷歌地图的时候,就灵活点了~

起点,终点 (确定坐标位置就OK了,我们是把所有坐标放到数组上的,当前后面的操作就SO easy啦)

new google.maps.Marker(
            {
                position: points[0],
                icon:startIcon,
                map: map 
            }

    );
new google.maps.Marker(
            {
                position: points[points.length - 1],
                icon:endIcon,
                map: map 
            }
    );

③百度经纬度,谷歌经纬度转当前地理位置

百度地图:

谷歌地图:

  1 /** 假数据测试 * */
  2 var label; // 信息标签
  3 var centerPoint;
  4 var selfAll;
  5 
  6 var cars; // 汽车图标
  7 var cariconImg = _ctx + '/resource/images/36x43/green_automobile.png';//
  8 //var cariconImg=icon_green_automobile;//
  9 var carlabel; // 信息标签
 10 var carcenterPoint;
 11 
 12 var startIcon = _ctx + '/resource/images/36x43//start.png';//
 13 var startMaker;// 起点
 14 var startLable;
 15 var startPoint;
 16 
 17 var endIcon = _ctx + '/resource/images/36x43/end.png';//
 18 var endLable;// 终点
 19 var endMaker;
 20 var endPoint;
 21 
 22 var timer; // 定时器
 23 var index = 0; // 记录播放到第几个point
 24 
 25 var points = []; // 坐标
 26 var gpsSpeeds = []; // 时速
 27 var gpsTimes = []; // 时间
 28 
 29 //Googel
 30 var map;
 31 var linePath;
 32 
 33 //默认加载
 34 var allMapType = $('#selectMap').val();
 35 if (allMapType == 'googleMap') {
 36     initGoogleMap(); // 加载Googel地图
 37 }else{
 38     initBaiDuMap(); // 默认自动加载百度地图
 39     initPiont();
 40 }
 41 
 42 //选择加载
 43 $('#selectMap').change(function(){
 44     var mapType=$(this).children('option:selected').val();//这就是selected的值 
 45     if(mapType=='googleMap'){
 46         initGoogleMap();
 47         initPiont();
 48     }else{
 49         initBaiDuMap();
 50         initPiont();
 51     }
 52     allMapType=mapType;
 53 });
 54 
 55 
 56 //加载百度地图上的点
 57 function initPiont() {
 58     points.splice(0, points.length);   //清除记录
 59     var startTime = $('#startTime').val();
 60     var endTime = $('#endTime').val();
 61     var imei = $('#imei').val();
 62     if (startTime != '' && startTime != '' && imei != '') {
 63         $.ajax({
 64             type : 'post',
 65             url : _ctx + '/trackreplay/initPiont',
 66             async : false,
 67             cache : false,
 68             data : {'startTime':startTime,'endTime':endTime,'imei':imei,'selectMap':allMapType},
 69             dataType : 'json',
 70             success : function(returnData){
 71                 if (returnData.code == 0){
 72                     if (returnData.data != null){
 73                         if(allMapType == 'googleMap'){
 74                             $.each(returnData.data,function(n,value){
 75                                 points.push(new google.maps.LatLng(value.lat, value.lng));
 76                                 gpsSpeeds.push(value.gpsSpeed);
 77                                 gpsTimes.push(value.CurrentTime);
 78                             });
 79                             initGoogel();
 80                         }else{
 81                             $.each(returnData.data,function(n,value){
 82                                 points.push(new BMap.Point(value.lng, value.lat));
 83                                 gpsSpeeds.push(value.gpsSpeed);
 84                                 gpsTimes.push(value.CurrentTime);
 85                             });
 86                             initBaiDuMap();// 默认自动加载百度地图
 87                             initBaidu();
 88                         }
 89                         $('#gpsTime').text(gpsTimes[0]);
 90                         $('#gpsSpeed').text(gpsSpeeds[0]);
 91                     }else{
 92                         layer.msg('该时间段无行驶记录');
 93                         initBaiDuMap();// 默认自动加载百度地图
 94                         initBaidu();
 95                     }
 96                 }
 97             }
 98         });
 99     }
100 }
101 //初始化百度地图
102 function initBaidu() {
103     // 初始化地图,选取第一个点为起始点
104     allMap.centerAndZoom(points[0], 15);
105 
106     var driving = new BMap.DrivingRoute(allMap);
107 
108     centerPoint = new BMap.Point(
109             (points[0].lng + points[points.length - 1].lng) / 2,
110             (points[0].lat + points[points.length - 1].lat) / 2
111     );
112     allMap.panTo(centerPoint);
113     // 连接所有点
114     allMap.addOverlay(
115             new BMap.Polyline(
116                     points, 
117                     {
118                         strokeColor : '#00cc00',
119                         strokeWeight : 5,
120                         strokeOpacity : 1
121                     }
122             )
123     );
124 
125     //Start
126     startLable = new BMap.Label(
127             '', 
128             {
129                 offset : new BMap.Size(-35, -35)
130             }
131     );
132     startPoint = points[0];
133     startMaker = new BMap.Marker(
134             startPoint, 
135             {
136                 icon : new BMap.Icon(startIcon, new BMap.Size(48, 48)),
137                 offset : new BMap.Size(2, -20),
138                 imageOffset : new BMap.Size(0, -20)
139             }
140     );
141     // startMaker.setLabel(startLable);
142     allMap.addOverlay(startMaker);
143     //Car
144     carlabel = new BMap.Label(
145             '', 
146             {
147                 offset : new BMap.Size(-35, -35)
148             }
149     );
150     carcenterPoint = points[0];
151     cars = new BMap.Marker(
152             carcenterPoint, 
153             {
154                 icon : new BMap.Icon(cariconImg, new BMap.Size(48, 48)),
155                 offset : new BMap.Size(2, -20),
156                 imageOffset : new BMap.Size(0, -20)
157             }
158     );
159     allMap.addOverlay(cars);
160     //End
161     endLable = new BMap.Label('', {offset : new BMap.Size(-35, -35)});
162     endPoint = points[points.length - 1];
163     endMaker = new BMap.Marker(
164             endPoint, 
165             {
166                 icon : new BMap.Icon(endIcon, new BMap.Size(48, 48)),
167                 offset : new BMap.Size(2, -20),
168                 imageOffset : new BMap.Size(0, -20)
169             }
170     );
171     allMap.addOverlay(endMaker);
172 }
173 
174 //初始化谷歌地图
175 function initGoogel(){
176     var indexCenter=points.length/2;
177     indexCenter=indexCenter>>0;
178     var mapOptions = {
179             zoom: 14,             //缩放级别
180             center: points[indexCenter],
181             panControl: true,
182             zoomControl: true,
183             mapTypeControl: true,
184             scaleControl: true,
185             overviewMapControl: true,
186             mapTypeId: google.maps.MapTypeId.ROADMAP
187     };
188     map = new google.maps.Map(document.getElementById('allmap'),mapOptions);
189     var lineSymbol = {
190             //travelMode: google.maps.DirectionsTravelMode.DRIVING,
191             path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
192             scale: 2,
193             strokeColor: '#0000',
194             strokeOpacity: 1.0,    // 透明度
195             strokeWeight: 2,    // 宽度
196             strokeOpacity : 0.8,
197             fillColor : '#0000',
198             fillOpacity : 0.4
199     };
200     line = new google.maps.Polyline({
201         path: points,
202         icons: [{
203             icon: lineSymbol,
204             offset: '1%'
205         }],
206         strokeColor: '#418f02',
207         //travelMode: google.maps.DirectionsTravelMode.DRIVING, 
208         map: map
209     });
210     linePath=line.getPath();
211     new google.maps.Marker(
212             {
213                 position: points[0],
214                 icon:startIcon,
215                 map: map 
216             }
217 
218     );
219     new google.maps.Marker(
220             {
221                 position: points[points.length - 1],
222                 icon:endIcon,
223                 map: map 
224             }
225     );
226 }
227 
228 
229 var timer; // 定时器
230 var index = 0; // 记录播放到第几个point
231 var statue = true; // 默认停止
232 
233 var count = 0;
234 
235 function Operate() {
236     $('#paly').parent().toggleClass('pause');
237     if (statue) {
238         statue = false;
239         play();
240     } else {
241         statue = true;
242         pause();
243     }
244 }
245 var marker = null;  
246 
247 function play() {
248     var timeat = $('#palyTime').val();
249     var point = points[index];
250     var speed = gpsSpeeds[index];
251     var time = gpsTimes[index];
252     timeat = 1000 - timeat;
253     if(allMapType == 'googleMap'){   //Googel
254         var geocoder = new google.maps.Geocoder();
255         geocoder.geocode({'latLng': point}, function(results, status) {  
256             if (status == google.maps.GeocoderStatus.OK) {  
257                 if (results[0]) {
258                     var address=results[0].formatted_address;
259                     var sindex=address.indexOf('邮政编码');
260                     if(sindex>0){
261                         $('#address').text(address.substring(0,sindex));
262                     }else{
263                         $('#address').text(address);
264                     }
265                     
266                 }
267             }});
268         map.panTo(point);
269         if(index < points.length){
270             index++;
271             if (!marker){  
272                 marker = new google.maps.Marker(
273                         { 
274                             position: points[index], 
275                             icon:cariconImg,
276                             map: map 
277                         });  
278             }else{  
279                 if(index < points.length){  
280                     marker.setPosition(points[index]);  
281                 }else{  
282                     map.panTo(point);
283                 }  
284             }
285             timer = window.setTimeout('play(' + index + ')', timeat);
286         }        
287     }else{   //baidu
288         if (index > 0) {
289             allMap.addOverlay(
290                     new BMap.Polyline(
291                             [ points[index - 1], point ], 
292                             {
293                                 strokeColor : 'red',
294                                 strokeWeight : 1,
295                                 strokeOpacity : 1
296                             }
297                     )
298             );
299         }
300         // 通过当前经纬度获取当前位置
301         var geoc = new BMap.Geocoder();
302         geoc.getLocation(point, function(rs) {
303             if (rs && rs.address)
304                 $('#address').text(rs.address);
305         });
306         cars.setPosition(point);
307         index++;
308         allMap.panTo(point);
309         if (index < points.length) {
310             timer = window.setTimeout('play(' + index + ')', timeat);
311         } else {
312             allMap.panTo(point);
313         }
314     }
315     $('#gpsTime').text(time);
316     $('#gpsSpeed').text(speed);
317 }
318 
319 function pause() {
320     if (timer) {
321         window.clearTimeout(timer);
322     }
323 }
324 
325 function reset() {
326     if (timer) {
327         window.clearTimeout(timer);
328     }
329     index = 0;
330     cars.setPosition(points[0]);
331     allMap.panTo(centerPoint);
332 
333     Operate();
334 
335 }

 围栏设置与控制

百度:

谷歌:

百度 JS

  1 //0:电子围栏,1:地标
  2 var flag = $('#flag').val();
  3 $(document).ready(function(){
  4     var allMapType=$('#selectGeozoneMap').val();
  5     if(allMapType=='googleMap'){
  6         $('#map-pin').hide();
  7         initGoogleMap();
  8         intoGoogleTools();//初始化google地图绘制工具
  9     }else{
 10         $('#map-pin').show();
 11         initBaiDuMap();//默认自动加载百度地图
 12         intoBaiDuMapTools();
 13         searchAddrTip();
 14     }
 15     
 16 });
 17 
 18 $('#selectGeozoneMap').change(function(){
 19     var mapType=$(this).children('option:selected').val();//这就是selected的值 
 20     if(mapType=='googleMap'){
 21         $('#map-pin').hide();
 22         initGoogleMap();//初始化google地图
 23         intoGoogleTools();//初始化google地图绘制工具
 24     }else{
 25         $('#map-pin').show();
 26         initBaiDuMap();//初始化百度地图
 27         intoBaiDuMapTools();//初始化百度地图绘制工具
 28     }
 29 });
 30 
 31 //多边形清除
 32 function initToDrawing(){
 33     //drawingManagerBaidu.setDrawingMode(BMAP_DRAWING_POLYGON);//默认进入地图开启画多边形
 34     clearAll();
 35     intoBaiDuMapTools();
 36 }
 37 
 38 
 39 /**
 40  * 百度绘制工具加载
 41  * */
 42 
 43 var baiduoverlays = [];
 44 function intoBaiDuMapTools(){
 45     allMap.removeEventListener('click', initToDrawing);
 46     //实例化鼠标绘制工具
 47     var drawingManagerBaidu = new BMapLib.DrawingManager(allMap, {
 48         isOpen: false, //是否开启绘制模式
 49         enableDrawingTool: true, //是否显示工具栏
 50         drawingToolOptions: {
 51             anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
 52             //drawingModes: [BMAP_DRAWING_POLYGON,BMAP_DRAWING_CIRCLE],
 53             drawingModes: [BMAP_DRAWING_POLYGON],
 54             offset: new BMap.Size(150, 5), //偏离值
 55             scale: 0.8 //工具栏缩放比例
 56         },
 57         polygonOptions: {
 58             strokeColor : '#0000FF',
 59                strokeOpacity : 0.8,
 60                strokeWeight : 2,
 61                fillColor : '#FF0000',
 62             fillOpacity : 0.4,
 63                editable:false, //是否可以编辑
 64                draggable:false //是否可拖动    
 65         } //多边形的样式
 66     });
 67     drawingManagerBaidu.setDrawingMode(BMAP_DRAWING_POLYGON);//默认进入地图开启画多边形
 68     //添加鼠标绘制工具监听事件,用于获取绘制结果
 69     drawingManagerBaidu.addEventListener('overlaycomplete', overlaycomplete);
 70     var htmlcontent = '';
 71     var opts = '';
 72     var strName='围栏';
 73     if(flag != 0){
 74         strName='地标';
 75     }
 76     
 77     htmlcontent += '<div class='p-tb10'>';
 78     htmlcontent += '<div>';
 79     htmlcontent += '<table>';
 80     htmlcontent += '<tr>';
 81     htmlcontent += '<td class='ta-r'><label><font color='#ff0000'>*</font>&nbsp;名称:&nbsp;&nbsp;</label></td>';
 82     htmlcontent += '<td><input type='text' id='geoname' name='geoname' size='20'  placeholder='请输入'+strName+'标题' class='form-control' style='width:160px;' /></td>';
 83     htmlcontent += '</tr>';
 84     htmlcontent += '<tr>';
 85     htmlcontent += '<td class='ta-r p-t7'><label>描述:&nbsp;</label></td>';
 86     htmlcontent += '<td class='p-t7'><input type='text' id='description' name='description'  placeholder='请输入'+strName+'描述信息' class='form-control' size='50' style='width:160px;' /></td>';
 87     htmlcontent += '</tr>';
 88     htmlcontent += '<tr>';
 89     htmlcontent += '<td>&nbsp;</td>';
 90     htmlcontent += '<td  class='p-t7'><input type='submit' value='提交'  class='btn btn-primary btn-block' onclick='saveGoogleGeozoneInfo();'  /></td>';
 91     htmlcontent += '</tr>';
 92     htmlcontent += '</table>';
 93     htmlcontent += '</div>';
 94     htmlcontent += '</div>';
 95     opts = {
 96             width : 200,     // 信息窗口宽度
 97             height: 156,     // 信息窗口高度
 98             title : '创建'+strName , // 信息窗口标题
 99             enableMessage:false,//设置允许信息窗发送短息
100             message:htmlcontent
101     };
102     
103     
104     var infoWindow = new BMap.InfoWindow(htmlcontent,opts);  // 创建信息窗口对象 
105     
106     //回调获得覆盖物信息
107     function overlaycomplete(e){
108         drawingManagerBaidu.setDrawingMode(BMAP_DRAWING_POLYGON);//默认进入地图开启画多边形
109         baiduoverlays.push(e.overlay);
110         try{
111             var array= e.overlay.getPath();
112               showLonLat(array);
113         }catch(e){
114         }
115         //添加单击事件
116            allMap.addEventListener('click',initToDrawing);
117      }
118     //获取所画围栏点经纬度
119     function showLonLat(arr){
120           var info=''; 
121           for(var i=0; i<arr.length;i++){
122                //纬度&经度
123               info+='|('+arr[i].lat+','+arr[i].lng+')';
124           }
125           var coors=info.substring(1);
126           var str='多边形节点数:' + (arr.length) + '&nbsp;节点坐标:'+info;
127           //document.getElementById('mapinfo').innerHTML = '手动绘制多边形节点数:' + arr.length + '<br>节点坐标:'+info;
128           console.log('overlaycomplete:'+str);
129           var falgs=false;
130           var len=arr.length;
131           len=Number(len);
132           if(len>=3){
133               falgs=true;
134           }else{
135               intoBaiDuMapTools();
136               if(flag == 0){
137                   layer.msg('围栏为封闭的多边形!');
138               }else{
139                   layer.msg('地标为封闭的多边形!');
140               }
141              }
142           if(falgs){
143               $('#maptype').val('baidu');
144               $('#coors').val(coors);
145               var point = new BMap.Point(arr[0].lng,arr[0].lat);
146               allMap.openInfoWindow(infoWindow,point); //开启信息窗口
147           }
148       } 
149 }
150 
151 //清除围栏
152 function clearAll() {
153     for(var i = 0; i < baiduoverlays.length; i++){
154         allMap.removeOverlay(baiduoverlays[i]);
155         allMap.clearOverlays();
156    }
157     baiduoverlays.length = 0;
158  }

谷歌:

  1 //0:电子围栏,1:地标
  2 var flag = $('#flag').val();
  3 /**
  4  * Google绘制工具加载
  5  * */
  6 function intoGoogleTools(){
  7     //图形绘制工具控加载此AIP链接后面加上&libraries=drawing
  8     var drawingManager = new google.maps.drawing.DrawingManager({
  9             drawingMode: google.maps.drawing.OverlayType.POLYGON,
 10             drawingControl: true,
 11             drawingControlOptions: {
 12             position: google.maps.ControlPosition.TOP_CENTER,
 13             drawin
				

延伸阅读:

Tag标签: 轨迹   围栏  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规