赞
踩
<template> <section> <!-- 地图展示 --> <common-map ref="map" :district-layer="false" :street-layer="false" :comm-layer="false" :unit-layer="false" :work-layer="false" :duty-layer="false" style="height: calc(100vh - 100px)"> </common-map> <area-bar :map="map" @get-area-score-point="getAreaScorePoint"> </area-bar> </section> </template> <script> import { commandMapMixin } from '../mixins/commandMapMixin' import areaBar from './area-bar' import umEventApi from '@questionApi/umEvent' // import { Point } from 'ol/geom' // import { Feature } from 'ol' // import VectorSource from 'ol/source/Vector' // import { Heatmap as HeatmapLayer } from 'ol/layer' // import Map from 'ol/Map.js' // import View from 'ol/View.js' // import KML from 'ol/format/KML.js' import VectorSource from 'ol/source/Vector.js' import { Heatmap as HeatmapLayer } from 'ol/layer.js' import Feature from 'ol/Feature' import Point from 'ol/geom/Point' // import {fromLonLat} from 'ol/proj' // import VectorSource from 'ol/source/Vector.js' // import { transform } from 'ol/proj' // import GeoJSON from 'ol/format/GeoJSON' export default { name: 'command-area-index', mixins: [commandMapMixin], components: { areaBar }, data() { return { PostPointDatail: '', PointDatailList: '', showPointDetail: false, currentTab: 'area', selectionCase: [], showSelectionCase: false, treeLoading: false, listQuery: { page: true, params: [] }, caseSetList: [], center: [118.281041, 33.962096], // 热力图假数据 heatData: { type: 'FeatureCollection', features: [ { type: 'Point', 'coordinates': [118.281041, 33.962096], count: 100 }, { type: 'Point', 'coordinates': [118.299685, 34.004628], count: 19 }, { type: 'Point', 'coordinates': [118.2833, 33.960444], count: 419 } ] }, heatMapLayer: null } }, computed: { }, created() { }, mounted() { this.map = this.$refs.map.map this.initMap(this.heatData) // this.addHeatMap() }, methods: { initMap(heatData) { // 新生成图层源,用于存放热力图图层 const source = new VectorSource({}) const features = [] heatData.features.forEach((item) => { const feature = new Feature({ geometry: new Point(item.coordinates), weight: item.count }) source.addFeature(feature) // features.push(feature) }) source.addFeatures(features) // 创建一个热力图层 this.heatMapLayer = new HeatmapLayer({ source, blur: 20, // 模糊尺寸 radius: 20, // 热点半径 weight: (feature) => { const count = Number(feature.get('weight')) // 获取feature的weight参数值 const magnitude = count / 1 return magnitude }, zIndex: 99999999 }) console.log('热力图加载中------------', this.heatMapLayer) this.map.addLayer(this.heatMapLayer) // 将热力图添加在地图上 console.log('热力图加载成功!!!!!!!!!!') }, clear() { this.map.removeLayer(this.heatLayer) // 将热力图从地图上移除 }, // addHeatMap() { // const data = [ // { // 'total': 69, // 'address': '', // 'lng': '118.281041', // 'idle': 56, // 'contactName': '', // 'busy': 13, // 'name': '豪域西巷(洪泽湖路至骆马湖路)', // 'keyId': '117', // 'contactPhone': '', // 'lat': '33.962096' // }, { // 'total': 69, // 'address': '', // 'lng': '118.294699', // 'idle': 62, // 'contactName': '', // 'busy': 7, // 'name': '黄河路(八一路至洪泽湖路)西', // 'keyId': '60', // 'contactPhone': '', // 'lat': '33.959553' // }, { // 'total': 67, // 'address': '', // 'lng': '118.274658', // 'idle': 54, // 'contactName': '', // 'busy': 13, // 'name': '\t浦东路(发展大道至人民大道)', // 'keyId': '57', // 'contactPhone': '', // 'lat': '33.934377' // }, { // 'total': 58, // 'address': '', // 'lng': '118.276189', // 'idle': 58, // 'contactName': '', // 'busy': 0, // 'name': '发展大道(深圳路至汕头路)东', // 'keyId': '87', // 'contactPhone': '', // 'lat': '33.92138' // }, { // 'total': 56, // 'address': '', // 'lng': '0', // 'idle': 24, // 'contactName': '', // 'busy': 32, // 'name': '洪泽湖路(世纪大道至迎宾大道)南侧', // 'keyId': '38', // 'contactPhone': '', // 'lat': '0' // }, { // 'total': 54, // 'address': '', // 'lng': '118.278193', // 'idle': 37, // 'contactName': '', // 'busy': 17, // 'name': '发展大道(洞庭湖路至微山湖路)西', // 'keyId': '86', // 'contactPhone': '', // 'lat': '33.954016' // }, { // 'total': 54, // 'address': '', // 'lng': '118.292301', // 'idle': 24, // 'contactName': '', // 'busy': 30, // 'name': '饮马堤路(项王路至杨公路)西', // 'keyId': '179', // 'contactPhone': '', // 'lat': '33.939144' // }, { // 'total': 54, // 'address': '', // 'lng': '118.295568', // 'idle': 35, // 'contactName': '', // 'busy': 19, // 'name': '黄河路(城北路至宿支路)西', // 'keyId': '135', // 'contactPhone': '', // 'lat': '33.974985' // }, { // 'total': 54, // 'address': '', // 'lng': '118.331987', // 'idle': 19, // 'contactName': '', // 'busy': 35, // 'name': '江山大道(洪泽湖路至五台山路)东', // 'keyId': '77', // 'contactPhone': '', // 'lat': '33.95569' // }, { // 118.302559,34.052019 // 'total': 300, // 'lng': '118.302559', // 'lat': '34.052019', // 'idle': 43, // 'keyId': '85' // }, { // 118.299685,34.004628 // 'total': 10, // 'lng': '118.299685', // 'lat': '34.004628', // 'idle': 35, // 'busy': 16, // 'keyId': '86' // }, { // 118.272664,34.009895 // 'total': 10, // 'lng': '118.272664', // 'lat': '34.009895', // 'idle': 35, // 'busy': 16, // 'keyId': '87' // }, { // 118.241331,33.960205 // 'total': 10, // 'lng': '118.241331', // 'lat': '33.960205', // 'idle': 35, // 'busy': 16, // 'keyId': '88' // }, { // 118.228539,33.953617 // 'total': 10, // 'lng': '118.228539', // 'lat': '33.953617', // 'idle': 35, // 'busy': 16, // 'keyId': '88' // }, { // 118.259872,33.952898 // 'total': 10, // 'lng': '118.259872', // 'lat': '33.952898', // 'idle': 35, // 'busy': 16, // 'keyId': '88' // }, { // 118.24399,33.905751 // 'total': 10, // 'lng': '118.24399', // 'lat': '33.905751', // 'idle': 35, // 'busy': 16, // 'keyId': '88' // }, { // 118.18039,33.948826 // 'total': 10, // 'lng': '118.18039', // 'lat': '33.948826', // 'idle': 35, // 'busy': 16, // 'keyId': '88' // } // ] // // 热力图 // const option = { // blur: 20, // radius: 20, // weightCallBack: (e) => { return Number(e.get('data')['total']) } // 70 // } // // const createFeature = (e) => { // return new Feature({ // geometry: new Point(e.lnglat || [e.lng, e.lat] || e.position), // data: e // }) // } // // const features = [] // // for (const i in data) { // features.push(createFeature(data[i])) // } // const source = new VectorSource({}) // source.addFeatures(features) // // this.heatMapLayer = new HeatmapLayer({ // source: source, // blur: option.blur || 5, // radius: option.radius || 10, // weight: (e) => { // if (option.weightCallBack) { // return option.weightCallBack(e) // } // }, // zIndex: 9999999 // }) // // this.map.addLayer(this.heatMapLayer) // }, /** * @Description 点击评价回调 * @Date 2019/11/18 16:17 */ getAreaScorePoint(feature, event) { this.$router.push({ path: '/strategy/evaluation/evaluate/area' }) }, /** * @Description 监听地图鼠标移动事件 * @Date 2019/11/18 15:04 */ pointerMove(event) { const feature = this.map.getClickFeature(event) if (feature !== undefined && feature.get('target') === 'area_score') { this.layerMap.getTargetElement().style.cursor = 'pointer' } else { this.layerMap.getTargetElement().style.cursor = 'auto' } }, /** * @Date: 2019-11-04 18:08:40 * @description: pointDetail组件通信获取搜索到=出来的兴趣点list */ handleUpdataPointList(data) { this.PointDatailList = data }, /** * @date 2019/03/28 09:38:06 * @Description: 查询案件 */ handleLoadAndQuery() { this.listQuery.params = [] this.listQuery.params.push( { key: 'position', value: this.caseQuery.position.trim(), cond: 'like' }, { key: 'caseTitle', value: this.caseQuery.search_key.trim(), cond: 'like' }) if (this.caseQuery.areaCode !== '-1') { this.listQuery.params.push( { key: 'areaCode', value: this.caseQuery.areaCode, cond: 'like' }) } if (this.caseQuery.caseSet !== '-1') { this.listQuery.actDefId = this.caseQuery.caseSet } else { delete this.listQuery.actDefId } const { current, limit } = this.page const listQuery = Object.assign({}, { current, limit }, this.listQuery) this.tableLoading = true umEventApi.listEventData(listQuery) .then((ret) => { this.tableLoading = false this.dataCollection = ret.data this.page.total = ret.total const feature = this.createCaseFeature(ret.data) this.addLayerMapMarkers(feature, { isCluster: false }) }) .catch(() => { this.tableLoading = false this.dataCollection = [] }) }, /** * @date 2019/04/02 11:16:29 * @Description: 开始地图的框选 */ startMapSelect() { this.startLayerMapSelect((features) => { if (features.length > 0) { const rets = features.map((feature) => { return feature.get('id') }) this.showSelectionCase = true this.selectionCase = rets } }) } } } </script>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。