heatmap实现热力图

2019-10-01 14:35 来源:未知

1.环境准备

 1)下载leaflet.js插件,  官网传送:

 2)下载esri-leaflet.js插件,  官网传送:

 3)下载heatmap.js插件,  官网传送:

也可以直接在此下载,所有插件已压缩打包  

ps:昨天同事分享了json-server服务,这里稍微总结一下下。
本文github下载地址
前言:我们前端小伙伴在开发过程中,往往与后台人员有“密不可分”的关系。因为我们在页面展示的数据大部分都是他们给的。所以就存在这么一个问题:如果我们在进行数据渲染的时候,后台还没提供相关的API,那该怎么办呢?这个时候就需要我们自给自足来“伪造数据”了
jason-server官网
mockjs官网

2.demo样例

1)在html文件中引入所有需要用到的插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>heatmap</title>
    <link rel="stylesheet" href="lib/leaflet/leaflet.css">
    <script src="lib/leaflet/leaflet.js"></script>
    <script src="lib/proj4-compressed.js"></script>
    <script src="lib/proj4leaflet.js"></script>
    <script src="lib/heatmap/heatmap.js"></script>
    <script src="lib/heatmap/leaflet-heatmap.js"></script>
    <script src="lib/leaflet/esri-leaflet.js"></script>
</head>
<body>

    <div id="map" style="height: 900px;width: 900px;"></div>

</body> </html>

2)加载arcgis切片服务

第一步:打开需要加载的服务,记下红线中的数据

图片 1

第二步:将不同等级的Resolution拷下来放进数组里面

var res=[
        0.703125, // Level 0
        0.3515625, // Level 1
        0.17578125, // Level 2
        0.087890625, // Level 3
        0.0439453125, // Level 4
        0.02197265625,
        0.010986328125,
        0.0054931640625,
        0.00274658203125,
        0.001373291015625,
        6.866455078125E-4,
        3.4332275390625E-4,
        1.71661376953125E-4,
        8.58306884765625E-5,
        4.291534423828125E-5,
        2.1457672119140625E-5,
        1.0728836059570312E-5,
        5.364418029785156E-6,
        2.682209014892578E-6,
        1.341104507446289E-6
    ];

第三步:进入 搜索你的空间参考系,找到相应的参考系,点击去,点击Proj4得到字符串

第四步:生成坐标参考系

 var crs = new L.Proj.CRS('你的参考系',
        '第三步得到的字符串',
        {
            resolutions: 第二步得到的res,
            origin:第一步记下的origin值,
        });

例如:
 var crs = new L.Proj.CRS('SR-ORG:7408',
        '+proj=longlat +ellps=GRS80 +no_defs',
        {
            resolutions: res,
            origin: [-180,90],
        });

第五步:生成地图

 baselayer = L.esri.tiledMapLayer(
        {url: "http://192.168.1.156:6080/arcgis/rest/services/vec2/MapServer/"});
    var res=[
        0.703125, // Level 0
        0.3515625, // Level 1
        0.17578125, // Level 2
        0.087890625, // Level 3
        0.0439453125, // Level 4
        0.02197265625,
        0.010986328125,
        0.0054931640625,
        0.00274658203125,
        0.001373291015625,
        6.866455078125E-4,
        3.4332275390625E-4,
        1.71661376953125E-4,
        8.58306884765625E-5,
        4.291534423828125E-5,
        2.1457672119140625E-5,
        1.0728836059570312E-5,
        5.364418029785156E-6,
        2.682209014892578E-6,
        1.341104507446289E-6
    ];
    var crs = new L.Proj.CRS('SR-ORG:7408',
        '+proj=longlat +ellps=GRS80 +no_defs',
        {
            resolutions: res,
            origin: [-180,90],
        });
    L.map('map', {
        center: new L.LatLng(26.565052,106.691417),
        zoom: 10,
        crs: crs,
        layers: [baselayer]
    });

 第六步:生成地图渲染数据

var data={"max":108,"data":[{"x":104.54040688300006,"y":24.79143100700003,"value":83},{"x":104.81660000100004,"y":24.804038889000026,"value":98},.....]    //数据过多只粘贴一部分

第七步:生成渲染函数

function rendererHeatMap(data){
        var cfg = {
            "radius": 0.04,
            "maxOpacity": .8,
            "scaleRadius": true,
            "useLocalExtrema": true,
            latField: 'y',
            lngField: 'x',
            valueField: 'value'
        };
        heatmapLayer = new HeatmapOverlay(cfg);
        map.addLayer(heatmapLayer);

        heatmapLayer.setData(data);
    }

第八步:调用渲染生成热力图

rendererHeatMap(data);

第九步:结果截图

图片 2

项目结构:

图片 3

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>heatmap</title>
    <link rel="stylesheet" href="lib/leaflet/leaflet.css">
    <script src="lib/leaflet/leaflet.js"></script>
    <script src="lib/proj4-compressed.js"></script>
    <script src="lib/proj4leaflet.js"></script>
    <script src="lib/heatmap/heatmap.js"></script>
    <script src="lib/heatmap/leaflet-heatmap.js"></script>
    <script src="lib/leaflet/esri-leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 900px;width: 900px;"></div>
<script>
    baselayer = L.esri.tiledMapLayer(
        {url: "http://localhost:6080/arcgis/rest/services/vec2/MapServer/"});
    var res=[
        0.703125, // Level 0
        0.3515625, // Level 1
        0.17578125, // Level 2
        0.087890625, // Level 3
        0.0439453125, // Level 4
        0.02197265625,
        0.010986328125,
        0.0054931640625,
        0.00274658203125,
        0.001373291015625,
        6.866455078125E-4,
        3.4332275390625E-4,
        1.71661376953125E-4,
        8.58306884765625E-5,
        4.291534423828125E-5,
        2.1457672119140625E-5,
        1.0728836059570312E-5,
        5.364418029785156E-6,
        2.682209014892578E-6,
        1.341104507446289E-6
    ];
    var crs = new L.Proj.CRS('SR-ORG:7408',
        '+proj=longlat +ellps=GRS80 +no_defs',
        {
            resolutions: res,
            origin: [-180,90],
        });
    map=L.map('map', {
        center: new L.LatLng(26.565052,106.691417),
        zoom: 7,
        crs: crs,
        layers: [baselayer]
    });

    var data={"max":108,"data":[{"x":104.54040688300006,"y":24.79143100700003,"value":83},.....];  //数据过多只粘贴一部分
    function rendererHeatMap(data){
        var cfg = {
            "radius": 0.2,
            "maxOpacity": .8,
            "scaleRadius": true,
            "useLocalExtrema": true,
            latField: 'y',
            lngField: 'x',
            valueField: 'value'
        };
        heatmapLayer = new HeatmapOverlay(cfg);
        map.addLayer(heatmapLayer);

        heatmapLayer.setData(data);
    }

    rendererHeatMap(data);

</script>
</body>

</html>

 

一、json-server介绍及安装

1、介绍

json-server是一个超级实用的服务器。写少量数据即可使用,而且功能足够强大,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等。

2、安装

**1) **新建一个项目 mkdir json-server-demo && cd json-server-demo
**2) **初始化项目,npm init生成package.json文件;
**3) **安装所需模块

npm install json-server --save-dev  //安装json-server服务
npm install nodemon --save-dev  //安装nodemon,修改配置无需重启服务
npm install mockjs --save-dev  //安装批量生成数据
3、在package.json中配置脚本

说明:本文将讲解两种方式;其一是静态数据(db.json文件),其二是动态数据(通过mockjs生成)

"scripts": {
    "server": "cd static && nodemon server.js",
    "dserver": "cd dynamic && nodemon server.js"
  }
4、目录结构
|--dynamic  //动态数据方式
    |--config.js   //配置文件
    |--db.js  //动态数据文件
    |--routes.js  //路由规则
    |--server.js  //服务文件
|--static  //静态数据方式
    |--config.js  //配置文件
    |--db.json   //静态数据文件
    |--server.js  //服务文件
|--node_modules //安装依赖包
package.json  //配置文件

二、使用静态数据

1)config.js文件内容——配置端口等
module.exports = {
  SERVER:"127.0.0.1",  
  //定义端口号
  PORT: 3003,
  //定义数据文件
  DB_FILE:"db.json"
};
2)db.json——静态数据文件
{
  "list":[
      {
        "id": 1,
        "name": "张三",
        "tel": "15223810923"
      },
      {
        "id": 2,
        "name": "李四",
        "tel": "15223810923"
      },
      {
        "id": 3,
        "name": "王二",
        "tel": "15223810923"
      }
    ],
  "list2": [
    {
      "name": "abcde",
      "tel": "123454323",
      "id": 5
    },
    {
      "id": 4,
      "name": "你好2121",
      "tel": "15223810923"
    }
  ]
}
TAG标签:
版权声明:本文由金沙澳门官网4166发布于文物考古,转载请注明出处:heatmap实现热力图