geomap-0.4.8.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. /*
  2. * GeoMap v0.4.8
  3. * https://github.com/x6doooo/GeoMap
  4. *
  5. * Copyright 2013 Dx. Yang
  6. * Released under the MIT license
  7. */
  8. (function($, undefined){
  9. var version = "0.4.8"
  10. var convertor = {
  11. /*!Private
  12. 让阿拉斯加地区在地图右侧显示
  13. */
  14. "formatPoint": function(p){
  15. return [
  16. (p[0] < -168.5 ? p[0] + 360 : p[0]) + 170,
  17. 90 - p[1]
  18. ];
  19. },
  20. "makePoint": function(p){
  21. var self = this,
  22. point = self.formatPoint(p),
  23. x = (point[0] - convertor.offset.x) * convertor.scale.x,
  24. y = (point[1] - convertor.offset.y) * convertor.scale.y;
  25. return [x, y];
  26. },
  27. "Point": function(coordinates){
  28. coordinates = this.makePoint(coordinates);
  29. return coordinates.join(',');
  30. },
  31. "LineString": function(coordinates){
  32. var str = '',
  33. self = this,
  34. i = 0,
  35. len = coordinates.length,
  36. point;
  37. for( ; i < len; i++){
  38. point = self.makePoint(coordinates[i]);
  39. if(i == 0){
  40. str = 'M' + point.join(',');
  41. }else{
  42. str = str + 'L' + point.join(',');
  43. }
  44. }
  45. return str;
  46. },
  47. "Polygon": function(coordinates){
  48. var str = '',
  49. i = 0,
  50. len = coordinates.length;
  51. for(; i < len; i++){
  52. str = str + convertor.LineString(coordinates[i]) + 'z';
  53. }
  54. return str;
  55. },
  56. "MultiPoint": function(coordinates){
  57. var arr = [],
  58. i = 0,
  59. len = coordinates.length;
  60. for(; i < len; i++){
  61. arr.push(convertor.Point(coordinates[i]));
  62. }
  63. return arr;
  64. },
  65. "MultiLineString": function(coordinates){
  66. var str = '',
  67. i = 0,
  68. len = coordinates.length;
  69. for(; i < len; i++){
  70. str += convertor.LineString(coordinates[i]);
  71. }
  72. return str;
  73. },
  74. "MultiPolygon": function(coordinates){
  75. var str = '',
  76. i = 0,
  77. len = coordinates.length;
  78. for(; i < len; i++){
  79. str += convertor.Polygon(coordinates[i]);
  80. }
  81. return str;
  82. }
  83. };
  84. function json2path(json, obj){
  85. var
  86. shapes = json.features,
  87. shapeType,
  88. shapeCoordinates,
  89. str,
  90. geometries,
  91. pathArray = [],
  92. i, j,
  93. len, len2,
  94. val,
  95. shape;
  96. convertor.scale = null;
  97. convertor.offset = null;
  98. if(!obj.config.offset){
  99. obj.offset = {
  100. x: json.srcSize.left,
  101. y: json.srcSize.top
  102. };
  103. }else{
  104. obj.offset.x = json.srcSize.left + obj.config.offset.x;
  105. obj.offset.y = json.srcSize.top + obj.config.offset.y;
  106. }
  107. if(!obj.config.scale){
  108. var temx = obj.width / json.srcSize.width,
  109. temy = obj.height / json.srcSize.height;
  110. temx > temy ? temx = temy : temy = temx;
  111. temx = temy * 0.73;
  112. obj.scale = {
  113. x: temx,
  114. y: temy
  115. };
  116. }else{
  117. obj.scale = obj.offset.scale;
  118. }
  119. convertor.scale = obj.scale;
  120. convertor.offset = obj.offset;
  121. for(i = 0, len = shapes.length; i < len; i++){
  122. shape = shapes[i];
  123. if(shape.type == 'Feature'){
  124. pushApath(shape.geometry, shape);
  125. }else if(shape.type = 'GeometryCollection'){
  126. geometries = shape.geometries;
  127. for(j = 0, len2 = geometries.length; j < len2; j++){
  128. val = geometries[j];
  129. pushApath(val, val);
  130. }
  131. }
  132. }
  133. function pushApath(gm, shape){
  134. shapeType = gm.type;
  135. shapeCoordinates = gm.coordinates;
  136. str = convertor[shapeType](shapeCoordinates);
  137. pathArray.push({
  138. type: shapeType,
  139. path: str,
  140. properties: shape.properties,
  141. id: shape.id
  142. });
  143. }
  144. return pathArray;
  145. }
  146. var GeoMap = function(cfg){
  147. var self = this,
  148. defaultCfg = {
  149. container: 'body',
  150. offset: null,
  151. scale: null,
  152. mapStyle: {
  153. 'fill': '#fff',
  154. 'stroke': '#999',
  155. 'stroke-width': 0.7
  156. },
  157. background:'#fff',
  158. sideSize: 4
  159. };
  160. $.extend(true, defaultCfg, cfg);
  161. self.container = $(defaultCfg.container);
  162. self.offset = self.defaultCfg.offset;
  163. self.scale = self.defaultCfg.scale;
  164. if(self.container.length == 0){
  165. throw new Error('map container is not defined!');
  166. }
  167. self.width = defaultCfg.width || self.container.width();
  168. self.height = defaultCfg.height || self.container.height();
  169. self.canvas = new Raphael(self.container.get(0), self.width, self.height);
  170. self.shapes = self.canvas.set();
  171. self.config = defaultCfg;
  172. self.paths = null;
  173. };
  174. GeoMap.prototype = {
  175. clear: function(){
  176. this.offset = null;
  177. this.scale = null;
  178. this.shapes.remove();
  179. },
  180. load: function(json){
  181. this.paths = json2path(json, this);
  182. },
  183. render: function(){
  184. var self = this,
  185. shapes = self.shapes,
  186. paths = self.paths,
  187. canvas = self.canvas,
  188. config = self.config,
  189. style = config.mapStyle,
  190. aPath = null, i, len, currentPath;
  191. for(i = 0, len = paths.length; i < len; i++){
  192. currentPath = paths[i];
  193. if(currentPath.type == 'point' || currentPath.type == 'MultiPoint'){
  194. //TODO
  195. }else{
  196. aPath = canvas.path(currentPath.path).data({'properties': currentPath.properties, 'id': currentPath.id}).attr(style);
  197. }
  198. shapes.push(aPath);
  199. }
  200. },
  201. /*!
  202. 将平面上的一个点的坐标,转换成实际经纬度坐标
  203. */
  204. getGeoPosition: function(p){
  205. var self = this,
  206. x = p[0],
  207. y = p[1];
  208. x = x / self.scale.x + self.offset.x - 170;
  209. x = x > 180 ? x - 360 : x;
  210. y = 90 - (y / self.scale.y + self.offset.y);
  211. return [x, y];
  212. },
  213. geo2pos: function(p){
  214. var self = this;
  215. convertor.offset = self.offset;
  216. convertor.scale = self.scale;
  217. p = convertor.makePoint([p.x, p.y]);
  218. return p;
  219. },
  220. setPoint: function(p){
  221. // 点的默认样式
  222. var self = this,
  223. a = {
  224. "x": 0,
  225. "y": 0,
  226. "r": 1,
  227. "opacity": 0.5,
  228. "fill": "#238CC3",
  229. "stroke": "#238CC3",
  230. "stroke-width": 0,
  231. "stroke-linejoin": "round"
  232. };
  233. p = self.geo2pos(p);
  234. p = {x:p[0],y:p[1]};
  235. $.extend(true, a, p);
  236. return self.canvas.circle(p.x, p.y, a.r).attr(a);
  237. }
  238. };
  239. //TODO: heat map
  240. GeoMap.version = version;
  241. this.GeoMap = GeoMap;
  242. })(jQuery);