Vue中使用openlayer做热力图

  1 <template>
  2   <div>
  3     <div id="map"></div>
  4   </div>
  5 </template>
  6 
  7 <script>
  8 import 'ol/ol.css'
  9 import Map from 'ol/Map'
 10 import Stamen from 'ol/source/Stamen'
 11 import VectorSource from 'ol/source/Vector'
 12 import View from 'ol/View'
 13 import { Heatmap as HeatmapLayer, Tile as TileLayer } from 'ol/layer'
 14 import GeoJSON from 'ol/format/GeoJSON'
 15 
 16 import olsourceOSM from 'ol/source/OSM'
 17 import { get as getProjection, transform } from 'ol/proj'
 18 export default {
 19   name: 'heatmap',
 20   data() {
 21     return {
 22       maps: null,
 23       center: [113.0521, 34.6006],
 24       heatData: {
 25         type: 'FeatureCollection',
 26         features: [
 27           { type: 'Point', coordinates: [104.4, 31.19], count: 100 },
 28           { type: 'Point', coordinates: [113.3, 30.6], count: 19 },
 29           { type: 'Point', coordinates: [123.3, 30.6], count: 419 },
 30           { type: 'Point', coordinates: [105.3, 30.6], count: 319 },
 31           { type: 'Point', coordinates: [106.3, 30.6], count: 719 },
 32           { type: 'Point', coordinates: [109.3, 31.6], count: 519 },
 33           { type: 'Point', coordinates: [109.3, 30.6], count: 319 },
 34           { type: 'Point', coordinates: [108.3, 32.6], count: 139 },
 35           { type: 'Point', coordinates: [118.3, 31.6], count: 129 },
 36           { type: 'Point', coordinates: [108.3, 33.6], count: 190 },
 37           { type: 'Point', coordinates: [108.3, 32.6], count: 189 },
 38           { type: 'Point', coordinates: [100.3, 30.6], count: 1 },
 39           { type: 'Point', coordinates: [109.3, 30.6], count: 119 },
 40           { type: 'Point', coordinates: [108.3, 31.6], count: 200 },
 41           { type: 'Point', coordinates: [118.3, 30.6], count: 300 },
 42         ],
 43       },
 44       view: null,
 45     }
 46   },
 47   methods: {
 48     initMap() {
 49       let projection = getProjection('EPSG:4326')
 50 
 51       // 热力图层
 52       let vector = new HeatmapLayer({
 53         source: new VectorSource({
 54           features: new GeoJSON().readFeatures(this.heatData, {
 55             dataProjection: 'EPSG:4326',
 56             featureProjection: 'EPSG:3857',
 57           }),
 58         }),
 59         blur: 20,
 60         radius: 10,
 61       })
 62 
 63       // 底图1
 64       let raster = new TileLayer({
 65         source: new Stamen({
 66           layer: 'toner',
 67         }),
 68       })
 69       // 底图2
 70       let tile = new TileLayer({
 71         source: new olsourceOSM(),
 72       })
 73 
 74       // 地图中心
 75       let view = new View({
 76         center: transform(this.center, 'EPSG:4326', 'EPSG:3857'),
 77         zoom: 5,
 78       })
 79       // 实例化底图
 80       this.maps = new Map({
 81         layers: [tile, vector],
 82         target: 'map',
 83         view,
 84       })
 85     },
 86   },
 87   mounted() {
 88     this.initMap()
 89   },
 90 }
 91 </script>
 92 
 93 <style scoped>
 94 .label {
 95   font-size: 20px;
 96 }
 97 #map {
 98   width: 100%;
 99   height: 99vh;
100 }
101 </style>
参考了官方文档：https://openlayers.org/en/latest/examples/heatmap-earthquakes.html
还有这位大神的文章：https://blog.csdn.net/qq_33016669/article/details/88797624