{"remainingRequest":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\thread-loader\\dist\\cjs.js!D:\\jenkins\\workspace\\yhxt-web\\node_modules\\babel-loader\\lib\\index.js!D:\\jenkins\\workspace\\yhxt-web\\node_modules\\eslint-loader\\index.js??ref--13-0!D:\\jenkins\\workspace\\yhxt-web\\src\\views\\bigScreen\\mixin\\mapMixin.js","dependencies":[{"path":"D:\\jenkins\\workspace\\yhxt-web\\src\\views\\bigScreen\\mixin\\mapMixin.js","mtime":1720203215101},{"path":"D:\\jenkins\\workspace\\yhxt-web\\babel.config.js","mtime":1667326389982},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\thread-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\babel-loader\\lib\\index.js","mtime":456789000000},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\eslint-loader\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import \"core-js/modules/es7.object.get-own-property-descriptors\";\nimport \"core-js/modules/es6.object.keys\";\nimport _defineProperty from \"D:/jenkins/workspace/yhxt-web/node_modules/@babel/runtime/helpers/esm/defineProperty.js\";\nimport \"core-js/modules/es6.function.name\";\nimport \"core-js/modules/web.dom.iterable\";\nimport _toConsumableArray from \"D:/jenkins/workspace/yhxt-web/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js\";\nimport \"core-js/modules/es6.regexp.search\";\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nimport Vue from 'vue';\nimport InfoWindowVue from '@/views/bigScreen/components/InfoWindow.vue'; // 引入地图信息窗体\nexport var mapMixin = {\n  data: function data() {\n    return {\n      map: null,\n      bridgeCoordinateList: [],\n      // 地图显示的桥梁坐标信息\n      bridgeParams: {\n        pageBean: {\n          pageSize: -1\n        }\n      },\n      massMarks: null,\n      // 桥梁标记点\n      markers: []\n    };\n  },\n  mounted: function mounted() {\n    // this.initMap() // 高德地图\n    this.initMineMap(); // MineMap 2D 地图\n  },\n  created: function created() {\n    // 获取路段坐标信息绘制路段\n    // this.getRoadCoordinate()\n    // 获取桥梁坐标信息标记桥梁位置\n    // this.getBridgrCoordinate(this.bridgeParams)\n  },\n  methods: {\n    // 高德地图初始化\n    initMap: function initMap() {\n      var _this = this;\n      var map = new AMap.Map('map', {\n        resizeEnable: true,\n        draggable: true,\n        mapStyle: 'amap://styles/260ac3de881fb752fdf854ea2b2540d8',\n        // mapStyle: 'amap://styles/darkblue', //地图主题\n        center: [107.6983, 30.18],\n        features: ['road', 'point'],\n        //bg:区域图, road:道路, building:建筑, point: 标注\n        zoom: 8,\n        //地图显示的缩放级别\n        zooms: [7, 18]\n      });\n      this.map = map; // 存储map值供后续使用\n      //获取边界坐标点\n      AMap.plugin('AMap.DistrictSearch', function () {\n        var districtSearch = new AMap.DistrictSearch({\n          // 关键字对应的行政区级别，共有5种级别\n          level: 'province',\n          //  是否显示下级行政区级数，1表示返回下一级行政区\n          subdistrict: 0,\n          // 返回行政区边界坐标点\n          extensions: 'all'\n        });\n        // 搜索所有省/直辖市信息\n        districtSearch.search('重庆', function (status, result) {\n          // 查询成功时，result即为对应的行政区信息\n          _this.handlePolygon(result);\n        });\n      });\n\n      // 监听地图缩放事件\n      this.map.on('zoomchange', function () {\n        _this.map.remove(_this.massMarks);\n        var zoom = _this.map.getZoom();\n        _this.markPoint(zoom * 3);\n      });\n    },\n    // 加载mineMap2D地图\n    initMineMap: function initMineMap() {\n      // 全局配置\n      minemap.domainUrl = 'https://map.hope.cmet1965.com:58000'; /* MineMap根域名地址 */\n      /* MineMap矢量数据服务根域名地址 */\n      minemap.dataDomainUrl = 'https://map.hope.cmet1965.com:58000';\n      /* MineMap矢量数据服务新规范根域名地址 */\n      minemap.serverDomainUrl = 'https://map.hope.cmet1965.com:58000';\n      /* MineMap底图雪碧图地址 */\n      minemap.spriteUrl = ['https://map.hope.cmet1965.com:58000/minemapapi/zsxz/zsxz']; // \"./mapresource/sprite/sprite\",\n      /* MineMap后台服务根地址 */\n      minemap.serviceUrl = 'https://map.hope.cmet1965.com:58000/service/';\n\n      // 配置 key、solution\n      minemap.key = '30be7831caf84685b94e78727e4ce25f';\n      minemap.solution = 16932;\n\n      // 初始化地图实例\n      this.map = new minemap.Map({\n        container: 'map',\n        style: 'https://map.hope.cmet1965.com:58000/service/solu/style/id/16932' /* 底图样式 */,\n        center: [107.6983, 30.18] /*地图中心点*/,\n        zoom: 7 /*地图默认缩放等级*/,\n        pitch: 0 /*地图俯仰角度*/,\n        maxZoom: 17 /*地图最大缩放等级*/,\n        minZoom: 3 /*地图最小缩放等级*/\n      });\n\n      //   this.map.setLayoutProperty('30be7831caf84685b94e78727e4ce25f', \"visibility\", \"none\");\n\n      this.map.on('load', function () {\n        // 增加自定义数据源、自定义图层\n        // this.addSources()\n        // this.addLayers()\n        // const layeyId = \"linelayer\" + '1493834264024846336' + 1;\n        // this.map.moveLayer(layeyId, '42fecafad2b371617b5812498e2bba05') //千米桩\n      });\n    },\n    addSources: function addSources() {\n      var jsonData = {\n        type: 'FeatureCollection',\n        features: [{\n          type: 'Feature',\n          geometry: {\n            type: 'LineString',\n            /* [106.35 - 0.005, 29.76 + 0.005],\r\n              [106.5 - 0.005, 29.46 - 0.005], */\n            coordinates: _toConsumableArray(path)\n          },\n          properties: {\n            title: '路线一',\n            kind: 1\n          }\n        }]\n      };\n      this.map.addSource('lineSource', {\n        type: 'geojson',\n        data: jsonData\n      });\n    },\n    addLayers: function addLayers() {\n      this.map.addLayer({\n        id: 'lineLayer',\n        type: 'line',\n        source: 'lineSource',\n        layout: {\n          'line-join': 'round',\n          'line-cap': 'round',\n          'border-visibility': 'visible' //是否开启线边框\n        },\n\n        paint: {\n          'line-width': 6,\n          'line-color': {\n            type: 'categorical',\n            property: 'kind',\n            stops: [[1, '#ff0000'], [2, '#00ff00']],\n            default: '#ff0000'\n          },\n          'line-border-width': 2,\n          //设置线边框宽度\n          'line-border-opacity': 1,\n          //设置线边框透明度\n          'line-border-color': 'blue' //设置线边框颜色\n        },\n\n        minzoom: 7,\n        maxzoom: 17.5\n      });\n      this.map.addLayer({\n        id: 'symbolLayer',\n        type: 'symbol',\n        source: 'lineSource',\n        layout: {\n          'text-field': '{title}',\n          'text-size': 10,\n          'symbol-placement': 'line'\n        },\n        paint: {\n          'text-color': '#000000',\n          'text-halo-color': '#ffffff',\n          'text-halo-width': 0.8\n        },\n        minzoom: 7,\n        maxzoom: 17.5\n      });\n    },\n    // 绘制区域边界\n    handlePolygon: function handlePolygon(result) {\n      var bounds = result.districtList[0].boundaries;\n      if (bounds) {\n        for (var i = 0, l = bounds.length; i < l; i++) {\n          //生成行政区划polygon\n          var polygon = new AMap.Polygon({\n            map: this.map,\n            // 指定地图对象\n            strokeWeight: 3,\n            // 轮廓线宽度\n            path: bounds[i],\n            //轮廓线的节点坐标数组\n            fillOpacity: 0.3,\n            //透明度\n            fillColor: '#132657',\n            //填充颜色\n            strokeColor: '#156fd8' //线条颜色\n          });\n\n          polygon.on('click', function (e) {\n            // 点击绘制的区域时执行其他交互\n          });\n        }\n        // 地图自适应\n        // this.map.setFitView()\n      }\n    },\n    // 获取路段坐标信息\n    getRoadCoordinate: function getRoadCoordinate() {\n      var _this2 = this;\n      this.$http.post('${yhxt}/road/roadmanage/v1/getList', {\n        pageBean: {\n          page: -1\n        }\n      }).then(function (res) {\n        var data = res.data.rows;\n        var coordinates = [];\n        /* \r\n          upStartPegLng 上行方向起点经度\r\n          upStartPegLat 上行方向起点纬度\r\n          upEndPegLng   上行终点起点经度\r\n          upEndPegLat   上行方向起点纬度\r\n          dwStartPegLng 下行方向起点经度\r\n          dwStartPegLat 下行方向起点纬度\r\n          dwEndPegLng   下行方向终点经度\r\n          dwEndPegLat   下行方向起点纬度\r\n          upWayLng      途经点经度\r\n          dwWayLat      途经点纬度      \r\n        */\n        data.forEach(function (i) {\n          var bol1 = i.upStartPegLng && i.upStartPegLat && i.upEndPegLng && i.upEndPegLat && i.dwStartPegLng && i.dwStartPegLat && i.dwEndPegLng && i.dwEndPegLat;\n          if (!bol1) return;\n\n          // 存在途径点的坐标\n          var bol2 = i.upWayLng && i.upWayLat && i.dwWayLng && i.dwWayLat;\n          // 有途经点存入\n          if (bol2) {\n            coordinates.push({\n              id: i.id,\n              name: i.name,\n              upStartPegLngLat: [i.upStartPegLng, i.upStartPegLat],\n              upEndPegLngLat: [i.upEndPegLng, i.upEndPegLat],\n              dwStartPegLngLat: [i.dwStartPegLng, i.dwStartPegLat],\n              dwEndPegLngLat: [i.dwEndPegLng, i.dwEndPegLat],\n              upWayLngLat: [i.upWayLng, i.upWayLat],\n              dwWayLngLat: [i.dwWayLng, i.dwWayLat]\n            });\n          } else {\n            coordinates.push({\n              id: i.id,\n              name: i.name,\n              upStartPegLngLat: [i.upStartPegLng, i.upStartPegLat],\n              upEndPegLngLat: [i.upEndPegLng, i.upEndPegLat],\n              dwStartPegLngLat: [i.dwStartPegLng, i.dwStartPegLat],\n              dwEndPegLngLat: [i.dwEndPegLng, i.dwEndPegLat]\n            });\n          }\n        });\n        // 开始绘制路线\n        _this2.handleRouteData(coordinates);\n      });\n    },\n    // 处理获取到的坐标信息\n    handleRouteData: function handleRouteData(coordinates) {\n      var _this3 = this;\n      var len = coordinates.length;\n      if (len == 0) return;\n      coordinates.forEach(function (i) {\n        // 绘制路线\n        _this3.drawRouteLine(i);\n      });\n    },\n    // 利用地图提供的api绘制路线图\n    drawRouteLine: function drawRouteLine(item) {\n      var _this4 = this;\n      // 上行\n      AMap.plugin('AMap.Driving', function () {\n        var driving = new AMap.Driving();\n        // 根据起终点经纬度和途经点规划路线\n        driving.search(item.upStartPegLngLat, item.upEndPegLngLat, {\n          waypoints: [item.upWayLngLat]\n        }, function (status, result) {\n          //   用于后期判断用户点击的那条路段\n          //   this.roadLineArr.push({\n          //     id: item.id,\n          //     name: item.name,\n          //     line: result.routes[0],\n          //   })\n          var bol = result && result.routes && result.routes[0];\n          if (!bol) return;\n          // this.drawRoute(result.routes[0])\n          _this4.draw(result.routes[0]);\n        });\n      });\n      //下行\n      AMap.plugin('AMap.Driving', function () {\n        var driving = new AMap.Driving();\n        // 根据起终点经纬度规划驾车导航路线\n        driving.search(item.dwStartPegLngLat, item.dwEndPegLngLat, {\n          waypoints: [item.dwWayLngLat]\n        }, function (status, result) {\n          var bol = result && result.routes && result.routes[0];\n          if (!bol) return;\n          // this.drawRoute(result.routes[0])\n          _this4.draw(result.routes[0]);\n        });\n      });\n    },\n    // 根据路段坐标信息画线\n    drawRoute: function drawRoute(route) {\n      var _this5 = this;\n      var path = this.parseRouteToPath(route);\n      // 文本标记\n      //   this.markText(path)\n      AMap.plugin('AMap.Polyline', function () {\n        var routeLine = new AMap.Polyline({\n          path: path,\n          strokeWeight: 6,\n          isOutline: true,\n          outlineColor: '#ffeeff',\n          borderWeight: 2,\n          strokeStyle: 'solid',\n          strokeColor: '#7faffd',\n          strokeOpacity: 0.8,\n          lineJoin: 'round',\n          lineCap: 'round'\n        });\n        routeLine.setMap(_this5.map);\n      });\n    },\n    // 路段文本标记\n    markText: function markText(path) {\n      var _this6 = this;\n      path.forEach(function (i) {\n        var text = new AMap.Text({\n          text: '名称',\n          anchor: 'center',\n          // 设置文本标记锚点\n          draggable: false,\n          cursor: 'pointer',\n          angle: 10,\n          style: {\n            padding: '.75rem 1.25rem',\n            'margin-bottom': '1rem',\n            'border-radius': '.25rem',\n            'background-color': 'transparent',\n            width: '15rem',\n            'border-width': 0,\n            'font-weight': 'bold',\n            'text-align': 'center',\n            'font-size': '18px',\n            color: '#881280'\n          },\n          position: [i[0], i[1]]\n        });\n        text.setMap(_this6.map);\n      });\n    },\n    // 处理路线坐标信息返回path\n    parseRouteToPath: function parseRouteToPath(route) {\n      var path = [];\n      for (var i = 0, l = route.steps.length; i < l; i++) {\n        var step = route.steps[i];\n        for (var j = 0, n = step.path.length; j < n; j++) {\n          // path.push(step.path[j])\n          path.push([step.path[j].lng, step.path[j].lat]);\n        }\n      }\n      return path;\n    },\n    // 地图上标记点\n    markPoint: function markPoint(iconSize) {\n      var _this7 = this;\n      var style = [{\n        url: require(\"../img/blue_icon.png\"),\n        anchor: new AMap.Pixel(6, 6),\n        size: new AMap.Size(iconSize, iconSize)\n      }, {\n        url: require(\"../img/yellow_icon.png\"),\n        anchor: new AMap.Pixel(6, 6),\n        size: new AMap.Size(iconSize, iconSize)\n      }, {\n        url: require(\"../img/red_icon_point.png\"),\n        anchor: new AMap.Pixel(6, 6),\n        size: new AMap.Size(iconSize, iconSize)\n      }\n      // {\n      //   url: require('../img/cyan-icon.png'),\n      //   anchor: new AMap.Pixel(6, 6),\n      //   size: new AMap.Size(iconSize, iconSize),\n      // },\n      ];\n\n      var mass = new AMap.MassMarks(null, {\n        opacity: 1,\n        zIndex: 111,\n        zooms: [3, 19],\n        cursor: 'pointer',\n        style: style\n      });\n      mass.setData(this.bridgeCoordinateList);\n      this.massMarks = mass;\n      var marker = new AMap.Marker({\n        content: ' ',\n        map: this.map\n      });\n      var infoWindow = new AMap.InfoWindow({});\n      mass.on('click', function (e) {\n        marker.setPosition(e.data.lnglat);\n        _this7.createInfoWindow(infoWindow, e.data);\n      });\n      mass.setMap(this.map);\n      //   this.createInfoWindow(infoWindow, this.bridgeCoordinateList[0])\n    },\n    // 创建信息窗体\n    createInfoWindow: function createInfoWindow(infoWindow, _data) {\n      var Content = Vue.extend({\n        template: '<info-window-vue :infoData=data />',\n        name: 'infoWindow',\n        components: {\n          'info-window-vue': InfoWindowVue\n        },\n        data: function data() {\n          return {\n            data: _data\n          };\n        }\n      });\n      var component = new Content().$mount();\n      infoWindow.setContent(component.$el);\n      infoWindow.open(this.map, _data.lnglat);\n      Vue.prototype.infoWindow = infoWindow;\n    },\n    // 桥梁列表数据得到具体坐标位置\n    getBridgrCoordinate: function getBridgrCoordinate(params) {\n      var _this8 = this;\n      this.$http.post('${yhxt}/bizBridgeInformation/v1/getJson', params).then(function (res) {\n        var data = res.data.rows || [];\n        var list = [];\n        data.forEach(function (i) {\n          if (i.lng && i.lat) {\n            list.push(_objectSpread({\n              lnglat: [i.lng, i.lat],\n              style: 3\n            }, i));\n          }\n        });\n        _this8.bridgeCoordinateList = list;\n        // 添加点标记\n        _this8.markPoint(30);\n      });\n    },\n    cleatMarker: function cleatMarker() {\n      this.markers.forEach(function (item) {\n        item.remove();\n        item = null;\n      });\n      this.markers = [];\n    },\n    // minemap 方法\n    minemapMarker: function minemapMarker() {\n      var _this9 = this;\n      // type字段：1：悬索桥  2：斜拉桥  3：梁桥  4：拱桥\n      var img = [require(\"../img/icon-bridge-1.png\"), require(\"../img/icon-bridge-2.png\"), require(\"../img/icon-bridge-3.png\"), require(\"../img/icon-bridge-4.png\")];\n      // state字段：1：基本完好 2：轻微异常 3：中等异常 4：严重异常\n      var img2 = [require(\"../img/icon-point-1.png\"), require(\"../img/icon-point-2.png\"), require(\"../img/icon-point-3.png\"), require(\"../img/icon-point-4.png\")];\n      this.bridgeCoordinateList.forEach(function (item) {\n        // 创建窗体\n        // let Content = Vue.extend({\n        //   template: '<info-window-vue :infoData=item />',\n        //   name: 'infoWindow',\n        //   components: {\n        //     'info-window-vue': InfoWindowVue,\n        //   },\n        //   data() {\n        //     return {\n        //       item,\n        //     }\n        //   },\n        // })\n\n        // 创建div作为标记点\n        var el = document.createElement('div');\n        el.className = 'map-point';\n        var p1 = document.createElement('div');\n        p1.className = 'text-box text-box-bg-' + item.state;\n        p1.innerHTML = item.bridgeName;\n        var p2 = document.createElement('div');\n        p2.className = 'icon-box icon-point-' + item.state;\n        var p3 = document.createElement('div');\n        p3.className = 'icon-bridge icon-bridge-' + item.type;\n        p2.appendChild(p3);\n        el.appendChild(p1);\n        el.appendChild(p2);\n\n        // el.id = 'marker'\n        // el.style['background-size'] = 'cover'\n        // el.style.width = '60px'\n        // el.style.height = '60px'\n        // el.style['background-image'] = `url(${img2[item.style]})`\n        // 标记点位\n        var marker = new minemap.Marker(el, {\n          offset: [-10, -10]\n        }).setLngLat(item.lnglat).addTo(_this9.map);\n        _this9.markers.push(marker);\n\n        // 添加点击事件\n        el.addEventListener('click', function () {\n          _this9.$refs.infoDialog.open(item);\n          //   let component = new Content().$mount().$el\n          //   let popup = new minemap.Popup({\n          //     closeOnClick: true,\n          //     closeButton: true,\n          //     offset: [0, 0],\n          //     anchor: 'top',\n          //   }).setDOMContent(component)\n          //   //panTo方法，以动画的形式将地图的中心位置平移到参数中的目标坐标点，参数为地图坐标点\n          //   this.map.panTo([item.lnglat[0], item.lnglat[1] - 1])\n          //   marker.setPopup(popup)\n        });\n      });\n    }\n  }\n};",null]}