使用天地图和OpenLayers的一些笔记

使用天地图和OpenLayers的一些笔记

添加热力图

addHeatMapLayer(data) {
     this.vector = new HeatmapLayer({
       source: new VectorSource({
         features: new GeoJSON().readFeatures(data)
       }),
       blur: 5, //模糊尺寸
       radius: 5, //热点半径
     })
     this.map.addLayer(this.vector); // 将热力图添加在地图上
   },

其中data的数据格式为

let data = {};
data.type = 'FeatureCollection';
data.features = []
that.caseUrbanItems.forEach((value, index) => {
   data.features.push({
       type: 'Point',
       'coordinates': [value.coordinateX, value.coordinateY],
       count: 1
   });

添加聚合图

addCluster (data){
     const features = data;
     const source = new VectorSource({
       features: features
     })
     // Cluster聚合类
     const clusterSource = new Cluster({
       distance: 120, // 聚合点与点之间的距离
       minDistance: 15, // 聚合点与点之间的最小距离
       source: source
     })
     // 聚合图层
     this.clustersLayer = new VectorLayer({
       source: clusterSource,
       style: function (feature) {
         // 点的个数
         let size = feature.get('features').length
         if(size >= 10000){
           size = Math.round(size / 1000) + 'k'
         }else if(size >= 1000 && size <= 10000){
           size = Math.round(size / 100) / 10 + 'k'
         }
         return new Style({
           image: new Circle({ //圆形
             radius: 20, // 半径
             fill: new Fill({ // 填充
               color: 'green',
             })
           }),
           text: new Text({ // 文字样式
             font: '15px sans-serif',
             fontSize: 12,
             color: 'white',
             text: size.toString(),
             fill: new Fill({
               color: '#fff'
             })
           })
         })
       }
     })
     this.map.addLayer(this.clustersLayer)
   },

data数据格式为

  data = [value.coordinateX, value.coordinateY];
  features[index] = new Feature(new Point(data));
   })
   this.addCluster(features)