生活随笔
收集整理的這篇文章主要介紹了
Vue+Openlayers创建热力图
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
- Vue+Openlayers創(chuàng)建熱力圖,參考文檔學(xué)習(xí)地址
- https://www.jianshu.com/p/3cd6f6439512
- openlayers: https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html
- 直接看代碼 initMap() 方法
<template><section><common-mapref="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 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'
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.mapthis.initMap(this.heatData)},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)})source.addFeatures(features)this.heatMapLayer = new HeatmapLayer({source,blur: 20, radius: 20, weight: (feature) => {const count = Number(feature.get('weight')) const magnitude = count / 1return magnitude},zIndex: 99999999})console.log('熱力圖加載中------------', this.heatMapLayer)this.map.addLayer(this.heatMapLayer) console.log('熱力圖加載成功!!!!!!!!!!')},clear() {this.map.removeLayer(this.heatLayer) },getAreaScorePoint(feature, event) {this.$router.push({path: '/strategy/evaluation/evaluate/area'})},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'}},handleUpdataPointList(data) {this.PointDatailList = data},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.pageconst listQuery = Object.assign({}, { current, limit }, this.listQuery)this.tableLoading = trueumEventApi.listEventData(listQuery).then((ret) => {this.tableLoading = falsethis.dataCollection = ret.datathis.page.total = ret.totalconst feature = this.createCaseFeature(ret.data)this.addLayerMapMarkers(feature, { isCluster: false })}).catch(() => {this.tableLoading = falsethis.dataCollection = []})},startMapSelect() {this.startLayerMapSelect((features) => {if (features.length > 0) {const rets = features.map((feature) => {return feature.get('id')})this.showSelectionCase = truethis.selectionCase = rets}})}}
}
</script>
總結(jié)
以上是生活随笔為你收集整理的Vue+Openlayers创建热力图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
