openlayers 5.0 热力图

import Vector from 'ol/source/Vector.js'
import { Heatmap as HeatmapLayer } from 'ol/layer.js'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
var webgissource={};
webgissource.heatmapsource=new Vector()
webgissource.heatmapvector = new HeatmapLayer({
    // 矢量数据源
   source: webgissource.heatmapsource,
    blur:  parseInt(50, 10), // 模糊尺寸
    opacity: 1,
    radius: parseInt(30, 10) // 热点半径
   })
map.addLayer(webgissource.heatmapvector);   

static heatmaplayer(data){
//data数据格式{x:107.4,y108.5}  for循环执行heatmaplayer()
   var points=new Point([data.x,data.y]);
   var iconFeature = new Feature({
      geometry:points,
      attributions:{
        feature:data,
        type:'rlt'
      }
    })
    webgissource.heatmapvector.getSource().addFeature(iconFeature)
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 echarts 和 openlayers 分别实现热力,下面分别介绍一下具体的方法: 1. echarts 实现热力 使用 echarts 实现热力需要使用 echarts 的插件 echarts-gl,通过 echarts-gl 可以使用 WebGL 技术绘制更加复杂的表,包括热力。 具体步骤如下: (1)安装 echarts-gl 插件: ``` npm install echarts-gl --save ``` (2)引入 echarts 和 echarts-gl: ```html <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> ``` (3)创建一个包含地的 div 容器和一个 echarts 实例: ```html <div id="map" style="width: 100%; height: 600px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('map')); </script> ``` (4)配置 echarts 实例,包括地类型、地数据和热力数据: ```javascript option = { tooltip: {}, visualMap: { min: 0, max: 500, calculable: true, inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] } }, geo: { map: 'world', roam: true }, series: [{ type: 'heatmap', coordinateSystem: 'geo', data: [ {name: 'Afghanistan', value: 283.54}, {name: 'Albania', value: 198.28}, {name: 'Algeria', value: 200.20}, // ... 省略部分数据 ] }] }; myChart.setOption(option); ``` 2. openlayers 实现热力 使用 openlayers 实现热力需要使用第三方库 ol-heatmap,ol-heatmap 是一个基于 openlayers热力插件。 具体步骤如下: (1)安装 ol-heatmap: ``` npm install ol-heatmap --save ``` (2)引入 openlayers 和 ol-heatmap: ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/dist/ol.css" type="text/css"> <script src="https://cdn.jsdelivr.net/npm/ol/dist/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-heatmap/ol-heatmap.js"></script> ``` (3)创建一个包含地的 div 容器和一个 openlayers 实例: ```html <div id="map" style="width: 100%; height: 600px;"></div> <script type="text/javascript"> var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: [0, 0], zoom: 2 }) }); </script> ``` (4)创建一个热力层并添加到 openlayers 实例中: ```javascript var heatmapLayer = new ol.layer.Heatmap({ source: new ol.source.Vector({ url: 'data.json', format: new ol.format.GeoJSON() }), blur: 15, radius: 5, opacity: 0.8 }); map.addLayer(heatmapLayer); ``` 其中,data.json 是包含热力数据的 GeoJSON 格式文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值