Newer
Older
KaiFengPC / src / components / GisMap / index.vue
@zhangdeliang zhangdeliang on 23 May 5 KB 初始化项目
  1. <template>
  2. <div>
  3.  
  4.  
  5. <div class="input-card" style="width: 500px" v-if="isEdit">
  6. <el-button type="primary" class="btn" @click="clickmap()" style="margin-bottom: 5px">绘制点</el-button>
  7. <el-button type="danger" class="btn" @click="removeMarker()" style="margin-bottom: 5px">清除点</el-button>
  8. <el-button type="primary" class="btn" @click="openPoly()" style="margin-bottom: 5px">绘制面</el-button>
  9. <el-button type="success" class="btn" @click="closePoly()" style="margin-bottom: 5px">结束面</el-button>
  10. <el-button type="danger" class="btn" @click="clearPoly()">清空</el-button>
  11. </div>
  12. <div id="container"></div>
  13. </div>
  14. </template>
  15. <script>
  16. import AMapLoader from '@amap/amap-jsapi-loader'
  17. export default {
  18. name: 'AMapPolygon2_0',
  19. props: {
  20. name: {
  21. type: String,
  22. default: function() {
  23. return ''
  24. }
  25. },
  26. isEdit: {
  27. type: Boolean,
  28. default: function() {
  29. return false
  30. }
  31. },
  32. areas: {
  33. type: Array,
  34. default: function() {
  35. return []
  36. }
  37. },
  38. center: {
  39. type: Array,
  40. default: function() {
  41. return [121.59996, 31.197646]
  42. }
  43. },
  44. // lnglat: {
  45. // type: Array,
  46. // default: function() {
  47. // return []
  48. // }
  49. // },
  50. },
  51. data() {
  52. return { polyEditor: null, polygonPaths: [], map: null, polygons: [],lnglat:[],markers:[],markArray:[] }
  53. },
  54. watch: {},
  55. mounted() {
  56. this.init()
  57. },
  58. methods: {
  59. async init() {
  60. await this.initMap()
  61. this.initAreas()
  62. if (this.isEdit) {
  63. this.initPoly()
  64. }
  65. },
  66. async initMap() {
  67. let AMap = await AMapLoader.load({
  68. key: '9b9c04d2714e93c08fd240ad35d0f20a',
  69. version: '2.0',
  70. plugins: [
  71. 'AMap.PolygonEditor',
  72. 'AMap.Autocomplete',
  73. 'AMap.PlaceSearch',
  74. 'AMap.Scale',
  75. 'AMap.OverView',
  76. 'AMap.ToolBar',
  77. 'AMap.MapType',
  78. 'AMap.PolyEditor',
  79. 'AMap.CircleEditor',
  80. 'AMap.Geolocation',
  81. 'AMap.Geocoder',
  82. 'AMap.AMapUI']
  83. })
  84. this.map = new AMap.Map('container', {
  85. center: this.center,
  86. zoom: 12,
  87. plugin: [ //一些工具插件
  88. {
  89. pName: 'MapType', //地图类型
  90. defaultType: 0,
  91. events: {
  92. init(instance) {
  93. }
  94. }
  95. }
  96. ]
  97. })
  98. // 缩放地图到合适的视野级别
  99. this.map.setFitView()
  100. //点击标记
  101. },
  102. initAreas() {
  103. for (let i = 0; i < this.areas.length; i++) {
  104. let area = this.areas[i]
  105. let path = []
  106. for (let j = 0; j < area.length; j++) {
  107. path.push([area[j].lng, area[j].lat])
  108. }
  109. if (path.length <= 0) {
  110. continue
  111. }
  112. var polygon = new AMap.Polygon({
  113. path: path,
  114. strokeColor: 'green',
  115. strokeWeight: 6,
  116. strokeOpacity: 0.2,
  117. fillOpacity: 0.4,
  118. fillColor: '#1791fc',
  119. zIndex: 50,
  120. bubble: true
  121. })
  122. this.polygons.push(polygon)
  123. }
  124. if (this.polygons.length <= 0) {
  125. return
  126. }
  127. //地图上新增矢量多边形
  128. this.map.add(this.polygons)
  129. },
  130. initPoly() {
  131. if (this.polygons.length > 0) {
  132. this.polyEditor = new AMap.PolygonEditor(this.map, this.polygons[0])
  133. } else {
  134. this.polyEditor = new AMap.PolygonEditor(this.map)
  135. }
  136. // this.polyEditor.open()
  137. let _this = this
  138. //关闭多边形编辑polygonEditor.close()触发该方法;
  139. this.polyEditor.on('end', function(event) {
  140. // event.target 即为编辑后的多边形对象,event.target.getPath()得到编辑完成后的点数组
  141. let pointArr = event.target.getPath()
  142. this.polygonPaths = []
  143. for (let i = 0; i < pointArr.length; i++) {
  144. this.polygonPaths.push({ lat: pointArr[i].lat, lng: pointArr[i].lng })
  145. }
  146. _this.$emit('getPolygonMap', this.polygonPaths)
  147. console.log('polygonPaths', this.polygonPaths)
  148. })
  149. },
  150. openPoly() {
  151. this.$emit('clearPolygonMap')
  152. this.map.destroy()
  153. this.init()
  154. this.reset()
  155. setTimeout(()=> {
  156. this.polyEditor.open()
  157. this.map.remove(this.markers);
  158. this.map.off("click", this.clickMapHandler);
  159. },10)
  160. // this.reset()
  161. },
  162. closePoly() {
  163. this.polyEditor.close()
  164. },
  165. clearPoly() {
  166. this.$emit('clearPolygonMap')
  167. this.map.destroy()
  168. this.reset()
  169. this.init()
  170. },
  171. reset() {
  172. this.polyEditor = null
  173. this.polygonPaths = []
  174. this.map = null
  175. this.polygons = []
  176. },
  177. //绘制点
  178. clickmap(){
  179. this.map.destroy()
  180. this.init()
  181. // this.$emit('clearPolygonMap')
  182. setTimeout(()=> {
  183. this.map.remove(this.markers);
  184. this.map.on("click", this.clickMapHandler);
  185. },100)
  186. },
  187. //标记
  188. clickMapHandler(e) {
  189. this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
  190. this.setMarker(this.lnglat);
  191. },
  192. // 添加标记
  193. setMarker(lnglat) {
  194. console.log("位置", lnglat); // lnglat=[经度,纬度]
  195. this.markArray.push(lnglat)
  196. let marker = new AMap.Marker({
  197. position: lnglat,
  198. });
  199. marker.setMap(this.map);
  200. this.markers.push(marker); // 在data中记录标记点
  201. this.$emit('getmarkers',lnglat)
  202. },
  203. // 删除之前后的标记点
  204. removeMarker() {
  205. // 判断是否存被标记的点,有--->移除
  206. if (this.markers) {
  207. this.map.remove(this.markers);
  208. this.map.off("click", this.clickMapHandler);
  209. this.$emit('getmarkers',[])
  210. }
  211. },
  212. }
  213. }
  214. </script>
  215. <style scoped lang="scss">
  216. #container {
  217. width: 100%;
  218. height: 380px;
  219. }
  220. </style>