gcmsMapDraw.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. /**
  2. * [ONEMAP.M.gcmsMapDraw]
  3. * @return {[object]}
  4. */
  5. define(function(){
  6. //数据存放和外部调用
  7. var modValue = {
  8. options:{},
  9. mapDrawGroup:null,
  10. };
  11. //地图层
  12. //var _map = ONEMAP.M.mapHolder.map;
  13. /**
  14. * 模块初始化
  15. * @return {[type]} [description]
  16. */
  17. function init(options){
  18. remove();
  19. modValue.mapDrawGroup = map23DControl.group({
  20. action: 'add'
  21. });
  22. modValue.options = {};
  23. for(var op in options){
  24. modValue.options[op] = options[op];
  25. }
  26. //订阅推送
  27. subscribe();
  28. //modValue.mapDrawGroup.addTo(_map);
  29. //获取内容数据
  30. getDetailData({callback:function(){
  31. showDrawLayer();
  32. }});
  33. }
  34. /**
  35. * 坐标反转
  36. * @param {[type]} latlngsAry [description]
  37. * @return {[type]} [description]
  38. */
  39. function latLngsToReverse(latlngsAry){
  40. var tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));
  41. if(!$.isArray(tempLatlngsAry[0])){
  42. return tempLatlngsAry.reverse();
  43. }else {
  44. $(tempLatlngsAry).each(function(index, el) {
  45. tempLatlngsAry[index] = latLngsToReverse(el);
  46. });
  47. }
  48. return tempLatlngsAry;
  49. };
  50. function getDetailData(options){
  51. ONEMAP.V.loading.load();
  52. $.ajax({
  53. url: onemapUrlConfig.gcmsServiceUrl+'/show/'+modValue.options['column_name']+'/'+modValue.options['article_id'],
  54. type:"GET",
  55. dataType: 'json'
  56. })
  57. .done(function(data) {
  58. ONEMAP.V.loading.loaded();
  59. if(data.code == 4){
  60. ONEMAP.C.noPermission('getDetailData');
  61. return false;
  62. }
  63. if(data.code == 3){
  64. ONEMAP.C.logout('getDetailData');
  65. }
  66. ONEMAP.D.gcmsCurArticleData = data['data'];
  67. options.callback();
  68. })
  69. .fail(function() {
  70. ONEMAP.V.loading.loaded();
  71. });
  72. }
  73. /**
  74. * 显示标注内容
  75. * @return {[type]} [description]
  76. */
  77. function showDrawLayer(){
  78. var mapDrawData = JSON.parse(ONEMAP.D.gcmsCurArticleData['record'][modValue.options['field_name']]);
  79. if(mapDrawData['features'].length>0){
  80. $(mapDrawData['features']).each(function(index, el) {
  81. switch(el['properties']['type']){
  82. case 'Point'://点
  83. buildMarker(el);
  84. break;
  85. case 'LineString'://线
  86. buildPolyline(el);
  87. break;
  88. case 'Polygon'://面
  89. buildPolygon(el);
  90. break;
  91. case 'Text'://文本
  92. //buildPolyText(el).addTo(map2DViewer.groups[modValue.mapDrawGroup]);
  93. //buildPolyText(el);
  94. break;
  95. case 'Circle'://圆
  96. buildPolyCircle(el);
  97. break;
  98. }
  99. });
  100. map2DViewer.map.fitBounds(map2DViewer.groups[modValue.mapDrawGroup].getBounds());
  101. }else {
  102. ONEMAP.C.publisher.publish({ type: 'warning', message: '没有标注数据' }, 'noteBar::add');
  103. }
  104. }
  105. function buildPolyCircle(options){
  106. if(!options['properties']['style']){
  107. _.merge(options['properties'],{
  108. style:{
  109. color:'#0033ff',
  110. weight:5,
  111. opacity:0.5,
  112. fillColor:'#0033ff',
  113. fillOpacity:0.2
  114. }
  115. })
  116. }
  117. map23DControl.circle({
  118. action: 'add',
  119. groupId: modValue.mapDrawGroup,
  120. geojson: {
  121. "properties": {
  122. altitudeMode:0,
  123. color: options['properties']['style'].color,
  124. weight: options['properties']['style'].weight,
  125. opacity: options['properties']['style'].opacity,
  126. radius:options['properties']['radius']||0,
  127. fillColor:options['properties']['style'].fillColor,
  128. fillOpacity:options['properties']['style'].fillOpacity,
  129. },
  130. "geometry": {
  131. "coordinates": options['geometry']['coordinates'][0][0]
  132. }
  133. }
  134. })
  135. }
  136. function buildPolyline(options){
  137. if(!options['properties']['style']){
  138. _.merge(options['properties'],{
  139. style:{
  140. color:'#0033ff',
  141. weight:5,
  142. opacity:0.5
  143. }
  144. })
  145. }
  146. map23DControl.polyline({
  147. action: 'add',
  148. groupId: modValue.mapDrawGroup,
  149. geojson: {
  150. "properties": {
  151. altitudeMode:0,
  152. color: options['properties']['style'].color,
  153. weight: options['properties']['style'].weight,
  154. opacity: options['properties']['style'].opacity,
  155. },
  156. "geometry": {
  157. "coordinates": options['geometry']['coordinates']
  158. }
  159. }
  160. })
  161. }
  162. function buildPolygon(options){
  163. if(!options['properties']['style']){
  164. _.merge(options['properties'],{
  165. style:{
  166. color:'#0033ff',
  167. weight:5,
  168. opacity:0.5,
  169. fillColor:'#0033ff',
  170. fillOpacity:0.2,
  171. stroke:true
  172. }
  173. })
  174. }
  175. map23DControl.polygon({
  176. action: 'add',
  177. groupId: modValue.mapDrawGroup,
  178. geojson: {
  179. "properties": {
  180. altitudeMode:0,
  181. color: options['properties']['style'].color,
  182. weight: options['properties']['style'].weight,
  183. opacity: options['properties']['style'].opacity,
  184. fillColor:options['properties']['style'].fillColor,
  185. fillOpacity:options['properties']['style'].fillOpacity,
  186. stroke:options['properties']['style'].stroke
  187. },
  188. "geometry": {
  189. "coordinates": options['geometry']['coordinates']
  190. }
  191. }
  192. })
  193. }
  194. function buildPolyText(options){
  195. var textInput = L.DomUtil.create('textarea');
  196. textInput.className = 'draw-label-textarea';
  197. textInput.style.fontSize = options['properties']['fontSize']+'px';
  198. textInput.style.color = options['properties']['fontColor'];
  199. textInput.setAttribute('wrap','wrap');
  200. textInput.value = options['properties']['text'];
  201. //输入框
  202. var label = new L.Plabel(latLngsToReverse(options['geometry']['coordinates']),textInput,{
  203. offset: [-5, -10],
  204. opacity: 1,
  205. className:'draw-label'
  206. });
  207. return label;
  208. }
  209. function buildMarker(options){
  210. map23DControl.marker({
  211. action: 'add',
  212. groupId: modValue.mapDrawGroup,
  213. geojson: {
  214. "properties": {
  215. altitudeMode:0,
  216. iconUrl: options['properties']['style']['iconUrl']+'?jwt='+ONEMAP.D.user.ticket,
  217. iconSize: options['properties']['style']['iconSize'],
  218. iconAnchor: options['properties']['style']['iconAnchor'],
  219. popupAnchor: [0,-options['properties']['style']['iconAnchor'][1]]
  220. },
  221. "geometry": {
  222. "coordinates": options['geometry']['coordinates']
  223. }
  224. }
  225. })
  226. }
  227. /**
  228. * 注册监听
  229. * @type {Function}
  230. */
  231. function subscribe(){
  232. ONEMAP.C.publisher.subscribe(remove,'gcmsArticleShowRemove');
  233. ONEMAP.C.publisher.subscribe(remove, 'cleanMap');
  234. ONEMAP.C.publisher.subscribe(GroupControl, 'gcmsGroupControl');
  235. }
  236. function GroupControl(type) {
  237. if (type == "show") {
  238. map23DControl.group({
  239. action: 'show',
  240. guid: modValue.mapDrawGroup
  241. })
  242. map23DControl.group({
  243. action: 'show',
  244. guid: modValue.mapDrawGroup
  245. })
  246. } else if (type == "hide") {
  247. map23DControl.group({
  248. action: 'hide',
  249. guid: modValue.mapDrawGroup
  250. })
  251. map23DControl.group({
  252. action: 'hide',
  253. guid: modValue.mapDrawGroup
  254. })
  255. }
  256. }
  257. /**
  258. * 取消监听
  259. * @type {Function}
  260. */
  261. function unSubscribe() {}
  262. /**
  263. * 模块移除
  264. * @return {[type]} [description]
  265. */
  266. function remove(){
  267. map23DControl.group({
  268. action: 'cleanAll',
  269. guid: modValue.mapDrawGroup
  270. })
  271. map23DControl.group({
  272. action: 'remove',
  273. guid: modValue.mapDrawGroup
  274. })
  275. unSubscribe();
  276. }
  277. return ONEMAP.M.gcmsMapDraw = {
  278. init:init,
  279. remove:remove
  280. }
  281. });