Vue+Openlayers创建热力图

Vue+Openlayers创建热力图,参考文档学习地址
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 { 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.mapthis.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 / 1return 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.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 = []})},/*** @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 = truethis.selectionCase = rets}})}}
}
</script>

Vue+Openlayers创建热力图相关推荐

vue openlayers 加载高德地图等 gcj02 的图层偏移问题
vue openlayers 加载高德地图等 gcj02 的图层偏移问题这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...
vue+openlayers实现行政边界、标注交互、效果弹窗
vue+openlayers实现行政边界.标注交互.效果弹窗需求最终效果环境安装/依赖引入 html部分逻辑部分 1.创建变量/初始化地图/常量 2.拿到后台数据/通过json加载中国区划 3 ...
Vue + OpenLayers 实时定位（一）前端展示
文章目录前言一.定义标签样式二.模拟 GeoJSON 数据三.创建 VerctorLayer 四.构建地图五.模拟实时移动总结前言本系列文章介绍一个简单的实时定位示例,示例的组成主要包 ...
WebGIS实战：Vue+Openlayers实现网络地图的加载与切换
目录前言 1.效果图 2.实现步骤 3.下一步计划相关Web GIS实战信息: 上一篇博客:WebGIS实战:Web GIS开发环境配置下一篇博客:WebGIS实战:Vue+Openlayers ...
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
Vue+Openlayers+HIKVSION实现点击摄像头进行预览
场景 SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版): SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版)_霸道流氓气质的博客-CS ...
Vue+Openlayers+el-radio实现切换地图显示
场景 Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏: Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏_BADAO_LIUMANG_ ...
Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏
场景 Vue+Openlayers实现地图上绘制线: Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现加载多个图层的基础上,可以实现 ...
Vue+Openlayers中实现地图旋转
场景 Vue+Openlayers实现地图上绘制线: Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现的效果是这样的此地图的显示时 ...

Vue+Openlayers创建热力图

Vue+Openlayers创建热力图相关推荐

最新文章

热门文章