HelloWorld.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <template>
  2. <!--<h1>{{ msg }}</h1>-->
  3. <!--<button @click="count++">count is: {{ count }}</button>-->
  4. <!--<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>-->
  5. <!--cookies : {{ testcookies()}}-->
  6. <!-- 获取到的下拉选的值到父页面:{{selectValue}}-->
  7. <!--<deptSelector ref="abc" @wangzhe="getHelloWorldSelectValue" :setValue="getHelloWorldSelectValue"></deptSelector>-->
  8. <deptSelector :setValue="getHelloWorldSelectValue"></deptSelector>
  9. <el-button @click="setMarkers">加载点</el-button>
  10. <el-button @click="setMarkersRadius">加载带范围点</el-button>
  11. <el-button @click="setConnectList">加载连线</el-button>
  12. <el-button @click="setGraphicsList">加载图形</el-button>
  13. <el-button @click="clearM">清除点</el-button>
  14. <el-button @click="clearC">清除连线</el-button>
  15. <el-button @click="clearG">清除图形</el-button>
  16. <supermaper ref="supermap" @MarkersClick="alertBind" :codes="['9fa5']" :mapSite="{}" :isSideBySide="false"
  17. :showLatLng="showLatLng" style="width: 100%;height: 500px; border:2px solid #ff0000 ;"></supermaper>
  18. <!-- {maxZoom:18,zoom: 8,editable:true,zoomControl:false}-->
  19. </template>
  20. <script>
  21. // import {getToken, setToken} from '../plugins/auth'
  22. // import {testReq} from '../api/hellotest/test'
  23. import deptSelector from "@/components/deptselector";
  24. import supermaper from "./supermap"
  25. export default {
  26. name: 'HelloWorld',
  27. data() {
  28. return {
  29. // cookieage: 0,
  30. // count: 0,
  31. selectValue: '',
  32. markersList: [{
  33. lng: 125.29,
  34. lat: 43.19,
  35. icon: 'camera',
  36. bindPopupHtml: "测试111",
  37. click: "MarkersClick"
  38. },
  39. {
  40. lng: 125.22,
  41. lat: 43.13,
  42. icon: 'camera',
  43. bindPopupHtml: "测试222",
  44. click: "MarkersClick"
  45. },
  46. {
  47. lng: 125.19,
  48. lat: 43.29,
  49. icon: 'camera',
  50. bindPopupHtml: "",
  51. click: ""
  52. },
  53. {
  54. lng: 125.14,
  55. lat: 43.22,
  56. icon: 'camera',
  57. bindPopupHtml: "",
  58. click: ""
  59. },
  60. ],
  61. markersRadiusList: [{
  62. lng: 125.39,
  63. lat: 43.29,
  64. icon: 'camera',
  65. radius: 1,
  66. bindPopupHtml: "测试111",
  67. click: "MarkersClick"
  68. },
  69. {
  70. lng: 125.32,
  71. lat: 43.23,
  72. icon: 'camera',
  73. radius: 1,
  74. bindPopupHtml: "测试222",
  75. click: "MarkersClick"
  76. },
  77. {
  78. lng: 125.29,
  79. lat: 43.39,
  80. icon: 'camera',
  81. radius: 1.5,
  82. bindPopupHtml: "",
  83. click: ""
  84. },
  85. {
  86. lng: 125.24,
  87. lat: 43.32,
  88. icon: 'camera',
  89. radius: 1,
  90. bindPopupHtml: "",
  91. click: ""
  92. },
  93. ],
  94. connectList: [{
  95. lat: 43.22,
  96. lng: 125.33
  97. },
  98. {
  99. lat: 43.23,
  100. lng: 125.22
  101. },
  102. {
  103. lat: 43.34,
  104. lng: 125.23
  105. },
  106. {
  107. lat: 43.22,
  108. lng: 125.24
  109. },
  110. ],
  111. graphicsList: [{
  112. lat: 43.22,
  113. lng: 125.33
  114. },
  115. {
  116. lat: 43.22,
  117. lng: 125.24
  118. },
  119. {
  120. lat: 43.23,
  121. lng: 125.22
  122. },
  123. {
  124. lat: 43.34,
  125. lng: 125.23
  126. },
  127. ],
  128. }
  129. },
  130. mounted() {
  131. // let arr = [{lng:"123",lat:"456"},{lng:"abc",lat:"xyz"}]
  132. // console.log(arr)
  133. //http://36.97.65.105:9090/etcc/app/main/mainPage?username=JJ099
  134. // this.testcookies()
  135. // removeToken()
  136. // testReq({username:"JJ099"}).then(resp =>{
  137. // console.log(resp);
  138. // })
  139. },
  140. components: {
  141. deptSelector,
  142. supermaper
  143. },
  144. methods: {
  145. getHelloWorldSelectValue: function(e) {
  146. this.selectValue = e
  147. // this.$refs.abc.xxxxxx()
  148. },
  149. // testcookies: function () {
  150. // setToken("eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxMDAsInVzZXJfa2V5IjoiZWQxM2I0YjItZWQ3ZS00ZGJmLTkyODUtMGZhNTQwMTc2ODM2IiwidXNlcm5hbWUiOiJzdW55aXNoaSJ9.a7ymc9M2fY-2304FpLxj7ZHZ1bZk6LDJM_DOYa9LhQyncPQ9c7-VSeThWhTr3vNMBcyvbFMz5e3egsvAIIkalA");
  151. // return getToken()
  152. // },
  153. getSelectValue(value) {
  154. this.selectValue = value;
  155. },
  156. setMarkers() {
  157. this.$refs.supermap.clearM();
  158. this.$refs.supermap.setMarkers(this.JSON(this.markersList));
  159. },
  160. setMarkersRadius() {
  161. this.$refs.supermap.clearM();
  162. this.$refs.supermap.setMarkersRadius(this.JSON(this.markersRadiusList));
  163. },
  164. setConnectList() {
  165. this.$refs.supermap.clearC();
  166. this.$refs.supermap.setConnectList(this.JSON(this.connectList), '#fe0000');
  167. },
  168. setGraphicsList() {
  169. this.$refs.supermap.clearG();
  170. this.$refs.supermap.setGraphicsList(this.JSON(this.graphicsList), '#fe0000');
  171. },
  172. clearM() {
  173. this.$refs.supermap.clearM();
  174. },
  175. clearC() {
  176. this.$refs.supermap.clearC();
  177. },
  178. clearG() {
  179. this.$refs.supermap.clearG();
  180. },
  181. alertBind(aaa) {
  182. alert(aaa);
  183. },
  184. showLatLng(lat, lng) {
  185. alert(lat);
  186. alert(lng);
  187. }
  188. },
  189. // props: {
  190. // msg: String
  191. // },
  192. }
  193. </script>