vue3+高德地图+turfjs实现等压线,色斑图(用于显示气象,环境等地图场景)

首先是turf.js(英文官网),也有中文网不过也就目录翻译了一下.
高德官网自行获得key
使用turf的isobands api实现.
数据: 需要准备geojson格式经纬度信息+业务值(比如温度,高度,光照只要是number值什么数据都可以)
国内各地区geojson数据点这里获得

参考的是这位大佬写的内容
我这个是贵州的实例
业务值 使用的是随机值
效果图

<style scoped lang="scss">
  .About{
    height: 100%;
    width: 100%;
    position: relative;
     #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }


  }
</style>

<template>
  <div class="About">
    <div id='map'></div>
  </div>
</template>

<script>
import * as turf from '@turf/turf'
import mapData from "../assets/json/guizhougexiancenter.json";
import guizhoulunkuo from "../assets/json/guizhoulunkuo.json";
import { onMounted, ref } from 'vue'
import AmapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'About',
  components: {
  },
  setup () {
    console.log('mapData', mapData)
    const calculateContourLines = () => {
      // 第一步  生成点位
      // 计算贵州东南西北最远坐标  
      var bbox = turf.bbox(guizhoulunkuo); // 数组组合 01   03   21   23
      console.log('bbox', bbox)
      let coordinates = [
        ...(mapData.features[0].geometry.coordinates[0][0][0]),
        [bbox[0], bbox[1]],
        [bbox[2], bbox[1]],
        [bbox[2], bbox[3]],
        [bbox[0], bbox[3]],
      ]
      // 绑定各经纬度第三个业务值
      let centerPositionList = coordinates.map((item, index) => {
        return {
          type: "Feature",
          properties: {
            // 这个value就是温度;气温;光照等,除经纬度外影响划分区域的业务值
            value: (Math.random() * 100).toFixed(2)
          },
          geometry: {
            type: "Point",
            coordinates: item  //经纬度
          }
        }
      })
      // points为每个点数据
      let points = {
        type: "FeatureCollection",
        features: centerPositionList
      }



      // 第二步  网格点
      let interpolate_options = {
        // 点位
        gridType: "points",
        // property中取那个元素
        property: "value",
        // 单位
        units: "degrees",
        // 权重
        weight: 10
      };
      // interpolate中第一是点位数据   第二个是精细度(值越小画的点越多)  配置项
      // grid网格点
      let grid = turf.interpolate(points, 0.05, interpolate_options);
      // value保留两位小数  经过interpolate计算后value会变得很长
      grid.features.map((i) => (i.properties.value = i.properties.value.toFixed(2)));
      


      // 第三步  等压线
      // 规定样式配置
      let isobands_options = {
        zProperty: "value",
        commonProperties: {
          "fill-opacity": 0.8
        },
        breaksProperties: [
          { fill: "#e3e3ff" },
          { fill: "#c6c6ff" },
          { fill: "#a9aaff" },
          { fill: "#8e8eff" },
          { fill: "#7171ff" },
          { fill: "#5554ff" },
          { fill: "#3939ff" },
          { fill: "#1b1cff" },
          { fill: "#1500ff" }
        ]
      };
      // isobands没有经过编辑裁剪 是正方形图层,   是根据网格点,取值范围和样式配置返回等压线(geojson)
      let isobands = turf.isobands(
        grid,
        [1, 10, 20, 30, 50, 70, 80, 90 ,100],
        isobands_options
      );
      // flatten 减少geoJson嵌套层级
      guizhoulunkuo = turf.flatten(guizhoulunkuo);
      isobands = turf.flatten(isobands);
      // console.log('isobands', isobands)



      // 第四步  将等压线限制在贵州范围内并生成最终等压线
      // 通过intersect判断是否存在交集  来判断是否在贵州范围内
      // features存放有交集的点位
      let features = [];
      isobands.features.forEach(function (layer1) {
        guizhoulunkuo.features.forEach(function (layer2) {
          let intersection = null;
          try {
            intersection = turf.intersect(layer1, layer2);
          } catch (e) {
            layer1 = turf.buffer(layer1, 0);
            intersection = turf.intersect(layer1, layer2);
          }
          if (intersection != null) {
            intersection.properties = layer1.properties;
            intersection.id = Math.random() * 100000;
            features.push(intersection);
          }
        });
      });
      // intersection为最终完整图层
      let intersection = turf.featureCollection(features);
      console.log('intersection', intersection)



      // 最后  将数据传入地图
      // initMap(points, isobands, intersection)
      initGaoDeMap(points, isobands, intersection)
    }
    const initGaoDeMap = (points, isobands, intersection) => {
      // 可视化及交互部分
      AmapLoader.load({
          key:"高德地图key", // key
          version:"2.0", 
          plugins:['AMap.DistrictSearch', 'AMap.GeoJSON'], // 需要使用的的插件列表
      }).then((AMap) => {
          const district = new AMap.DistrictSearch({subdistrict:2,extensions:'all',level:'province'});
          district.search('贵州',function(status, result){
              const bounds = result.districtList[0].boundaries
              const mask = []
              for (let i=0;i<bounds.length;i++){
                  mask.push([bounds[i]])
              }
              const map = new AMap.Map("map",{  // 设置地图容器id
                  mask: mask, 
                  zoom:8, // 设置当前显示级别
                  expandZoomRange:true, // 开启显示范围设置
                  zooms: [7, 20], //最小显示级别为7,最大显示级别为20
                  center:[106.629577,26.684338], // 设置地图中心点位置
                  zoomEnable:true, // 是否可以缩放地图
                  resizeEnable:true,
              });
              // 添加描边
              for (let i=0;i<bounds.length; i++) {
                  const polyline = new AMap.Polyline({
                      path:bounds[i], // polyline 路径,支持 lineString 和 MultiLineString
                  })
                  polyline.setMap(map);
              }
              loadGeoJson(AMap,map)
          })
      }).catch(e=>{
          console.log(e);
      })
      const loadGeoJson = (AMap, map) => {
        var geojson = new AMap.GeoJSON({
            geoJSON: intersection,
            getPolygon: function(geojson, lnglats) {
                return new AMap.Polygon({
                    path: lnglats,
                    strokeColor: 'white',
                    fillColor: geojson.properties.fill,
                    fillOpacity: geojson.properties['fill-opacity'],
                    strokeWeight:0,
                });
            }
        });
        map.add(geojson)
      }
    }
    onMounted(() => {
      calculateContourLines()
    })
    return {
    }
  }
}
</script>

guizhoulunkuo.json是贵州轮廓通过我最上面获得geojson的网站获取
guizhougexiancenter.json 贵州各县中心点geojosn

// guizhougexiancenter.json
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "adcode": 520000,
        "name": "贵州省",
        "center": [
          106.713478,
          26.578343
        ],
        "centroid": [
          106.880455,
          26.826368
        ],
        "childrenNum": 9,
        "level": "province",
        "acroutes": [
          100000
        ],
        "parent": {
          "adcode": 100000
        }
      },
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
          [
            [
              [
                [
                  106.943784,
                  27.694395
                ],
                [
                  106.937265,
                  27.706626
                ],
                [
                  106.831668,
                  27.535288
                ],
                [
                  106.826591,
                  28.131559
                ],
                [
                  107.191024,
                  27.951342
                ],
                [
                  107.441872,
                  28.550337
                ],
                [
                  107.605342,
                  28.880088
                ],
                [
                  107.887857,
                  28.521567
                ],
                [
                  107.722021,
                  27.960858
                ],
                [
                  107.485723,
                  27.765839
                ],
                [
                  107.892566,
                  27.221552
                ],
                [
                  106.200954,
                  28.327826
                ],
                [
                  105.698116,
                  28.587057
                ],
                [
                  106.412476,
                  27.803377
                ],
                [
                  109.192117,
                  27.718745
                ],
                [
                  109.21199,
                  27.51903
                ],
                [
                  108.848427,
                  27.691904
                ],
                [
                  108.917882,
                  27.238024
                ],
                [
                  108.229854,
                  27.519386
                ],
                [
                  108.255827,
                  27.941331
                ],
                [
                  108.405517,
                  27.997976
                ],
                [
                  108.117317,
                  28.26094
                ],
                [
                  108.495746,
                  28.560487
                ],
                [
                  109.202627,
                  28.165419
                ],
                [
                  107.977541,
                  26.582964
                ],
                [
                  107.901337,
                  26.896973
                ],
                [
                  108.12678,
                  27.034657
                ],
                [
                  108.681121,
                  26.959884
                ],
                [
                  108.423656,
                  27.050233
                ],
                [
                  108.816459,
                  27.173244
                ],
                [
                  109.212798,
                  26.909684
                ],
                [
                  109.20252,
                  26.680625
                ],
                [
                  108.440499,
                  26.727349
                ],
                [
                  108.314637,
                  26.669138
                ],
                [
                  109.136504,
                  26.230636
                ],
                [
                  108.521026,
                  25.931085
                ],
                [
                  108.912648,
                  25.747058
                ],
                [
                  108.079613,
                  26.381027
                ],
                [
                  107.593172,
                  26.494803
                ],
                [
                  107.794808,
                  26.199497
                ],
                [
                  107.517021,
                  26.258205
                ],
                [
                  107.513508,
                  26.702508
                ],
                [
                  107.8838,
                  25.412239
                ],
                [
                  107.233588,
                  26.580807
                ],
                [
                  107.478417,
                  27.066339
                ],
                [
                  107.542757,
                  25.826283
                ],
                [
                  107.32405,
                  25.831803
                ],
                [
                  106.750006,
                  25.429894
                ],
                [
                  106.447376,
                  26.022116
                ],
                [
                  106.977733,
                  26.448809
                ],
                [
                  106.657848,
                  26.128637
                ],
                [
                  107.87747,
                  25.985183
                ],
                [
                  106.715963,
                  26.573743
                ],
                [
                  106.713397,
                  26.58301
                ],
                [
                  106.670791,
                  26.410464
                ],
                [
                  106.762123,
                  26.630928
                ],
                [
                  106.633037,
                  26.676849
                ],
                [
                  106.626323,
                  26.646358
                ],
                [
                  106.969438,
                  27.056793
                ],
                [
                  106.737693,
                  27.092665
                ],
                [
                  106.599218,
                  26.840672
                ],
                [
                  106.470278,
                  26.551289
                ],
                [
                  105.946169,
                  26.248323
                ],
                [
                  106.259942,
                  26.40608
                ],
                [
                  105.745609,
                  26.305794
                ],
                [
                  105.768656,
                  26.056096
                ],
                [
                  105.618454,
                  25.944248
                ],
                [
                  106.084515,
                  25.751567
                ],
                [
                  104.897982,
                  25.088599
                ],
                [
                  105.192778,
                  25.431378
                ],
                [
                  104.955347,
                  25.786404
                ],
                [
                  105.218773,
                  25.832881
                ],
                [
                  105.650133,
                  25.385752
                ],
                [
                  106.091563,
                  25.166667
                ],
                [
                  105.81241,
                  24.983338
                ],
                [
                  105.471498,
                  25.108959
                ],
                [
                  104.846244,
                  26.584805
                ],
                [
                  105.474235,
                  26.210662
                ],
                [
                  104.95685,
                  26.540478
                ],
                [
                  104.468367,
                  25.706966
                ],
                [
                  105.284852,
                  27.302085
                ],
                [
                  105.609254,
                  27.143521
                ],
                [
                  106.038299,
                  27.024923
                ],
                [
                  106.222103,
                  27.459693
                ],
                [
                  105.768997,
                  26.668497
                ],
                [
                  105.375322,
                  26.769875
                ],
                [
                  104.286523,
                  26.859099
                ],
                [
                  104.726438,
                  27.119243
                ]
              ]
            ]
          ]
        ]
      }
    }
  ]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/534534.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

振动信号频域图绘制函数(python版)

在实际应用中&#xff0c;不免会看时域图和频域图&#xff0c;封装了绘制时域图和频域图程序&#xff0c;方便调用 ## 导入包 from matplotlib import pyplot as plt from matplotlib import rcParams import numpy as np import pandas as pdconfig {"font.family"…

BTS141TC 智能低电压端电源开关 12A 60V TO-263-3

BTS141TC是英飞凌&#xff08;Infineon&#xff09;推出的一款选用SmartSIPMOS内建芯片技术的N通道垂直功率FET。它供给嵌入式维护功用&#xff0c;如逻辑电平输入输入维护(ESD)、具有锁定功用的热关断过载维护、短路维护和过电压维护等。最大电流能够经过外部电阻调节&#xf…

JL-29 雪深监测仪

安装注意事项 &#xff08;1&#xff09;将支架安装于水平地面上&#xff0c;使用紧固器件使支架牢固的固定于水平地面&#xff0c;支架的“水平安装”至关重要&#xff0c;切不可随意。 &#xff08;2&#xff09;将太阳能固定臂&#xff0c;激光头采集固定臂&#xff0c;电…

Unity 布局 HorizontalLayoutGroup 多行 换行

演示Gif&#xff1a; 现象: 子元素宽度不同&#xff0c;超出父元素后不会换行 GridLayout则是固定宽度也不能用&#xff0c; 需求 水平排版的同时&#xff0c;超出父级后换行 代码&#xff1a; 催更就展示[狗头]

云镓半导体:集成OA与ERP系统,构建“一站式”审批流

01 客户背景 云镓半导体成立于2021年&#xff0c;是一家专业从事氮化镓功率器件及解决方案的设计公司&#xff0c;现有上海、杭州、深圳三个研发及办事机构。 公司核心团队具有多年功率器件量产经验&#xff0c;具备工艺开发、器件定制、IC设计、封装测试、可靠性评估和系统应用…

计算机服务器中了faust勒索病毒怎么办?Faust勒索病毒解密工具流程步骤

对于现在的众多企业来说&#xff0c;计算机服务器成为大家工作中不可或缺的工具&#xff0c;利用计算机服务器可以更好地开展各项工作业务&#xff0c;企业计算机服务器也大大提升了企业生产运营效率。然而&#xff0c;网络技术的发展也为企业的数据安全带来威胁&#xff0c;近…

Linux IO的奥秘:深入探索数据流动的魔法

Linux I/O&#xff08;输入/输出&#xff09;系统是其核心功能之一&#xff0c;负责处理数据在系统内部及与外界之间的流动。为了优化这一流程&#xff0c;Linux进行了一系列努力和抽象化&#xff0c;以提高效率、灵活性和易用性。&#x1f680; 1. 统一的设备模型 Linux将所…

数据绑定多级对象属性时的报错解决

数据绑定多级对象属性时的报错解决 &#xff08;1&#xff09;例子如下&#xff1a; &#xff08;2&#xff09;当syncObjForm被后台数据赋值时&#xff0c;会产生报错&#xff1a; &#xff08;3&#xff09;原因就是&#xff1a; 模板在渲染时&#xff0c;读取对象中的某个…

SimOne协作版正式发布!“云+端”一体化,加速自动驾驶技术迭代!

创新的“云端”一体化方案 让11大于2 两端登录 场景共享 本地算法 云端并发 颠覆传统自动驾驶研发工作方式 加速自动驾驶算法迭代与优化 SimOne协作版正式发布&#xff01; 什么是SimOne协作版&#xff1f; SimOne协作版&#xff0c;一个创新的“云端”一体化产品。 它将…

JavaScript逆向爬虫——无限debugger的原理与绕过

debugger 是 JavaScript 中定义的一个专门用于断点调试的关键字&#xff0c;只要遇到它&#xff0c;JavaScript 的执行便会在此处中断&#xff0c;进入调试模式。 有了 debugger 这个关键字&#xff0c;就可以非常方便地对 JavaScript 代码进行调试&#xff0c;比如使用 JavaSc…

大创项目推荐 深度学习+opencv+python实现昆虫识别 -图像识别 昆虫识别

文章目录 0 前言1 课题背景2 具体实现3 数据收集和处理3 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数&#xff1a;2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 4 MobileNetV2网络5 损失函数softmax 交叉熵5.1 softmax函数5.2 交叉熵损失函数 6 优化器SGD7 学…

【javaScript面试题】2023前端最新版javaScript模块,高频24问

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;博主收集的关于javaScript的面试题 目录 一、2023javaScript面试题精选 1.js的数据类型…

hcia datacom课程学习(6):路由与路由表基础

1.路由的作用 不同网段的设备互相通信需要具有路由功能的设备进行转发 具有路由功能的设备不一定是路由器&#xff0c;交换机可以有路由功能&#xff0c;同样的&#xff0c;路由器也可以有交换功能&#xff0c;像家里常用的路由器就是集路由功能和交换功能于一体的 2.路由相…

将本地代码提交到gitee上

本地代码提交Gitee 背景本地代码提交1. 在Gitee创建仓库2.点击克隆/下载3.本地找一个空白的文件夹初始化git仓库4.推送本地代码** 背景 在我们日常开发中有时代码写了好多才想起提交到gitee上,还有的时直接在github上或者gitee上拉取的别人的项目做框架,想把本地的代码提交到g…

【CicadaPlayer】demuxer_service中DASH的简单理解

DASH协议 dash 是属于demuxer模块的 MPEG-DASH是一种自适应比特率流技术,可根据实时网络状况实现动态自适应下载。和HLS, HDS技术类似, 都是把视频分割成一小段一小段, 通过HTTP协议进行传输,客户端得到之后进行播放;不同的是MPEG-DASH支持MPEG-2 TS、MP4(最新的HLS也支持…

数据结构OJ题——栈和队列

1. 用栈实现队列&#xff08;OJ链接&#xff09; 题目描述&#xff1a;请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09; void push(int x) 将元素 x 推到队列的末尾 int pop() 从队列的开头移除并返回…

linux学习:内存(栈,堆,数据段,代码段)

目录 内存 栈内存 堆内存 数据段 代码段 注意 堆 例子 内存 Linux 操作系统为了更好更高效地使用内存&#xff0c;将 实际物理内存进行了映射&#xff0c;对应用程序屏蔽了物理内存的具体细节&#xff0c;有利于简化程序的编写 和系统统一的管理。 假设你正在使用的…

苍穹外卖jwt令牌p10

点击小虫&#xff08;进入断点调试&#xff09;&#xff0c;打上断点&#xff0c;然后前端点击登录&#xff08;此时前端的数据会作为参数传入&#xff09;&#xff1a; 光标放在字段上还会显示接收到的数据&#xff1a; 若想程序在所希望的地方停止&#xff0c;可以添加断点&a…

NetSuite中Inactive Item后相关Transaction是否能继续?

今天的标题以一个问句出发&#xff5e;灵感来源于我们在一个项目上要准备数据切换的事宜&#xff0c;我们需要明确&#xff0c;将一个物料Inactive之后&#xff0c;涉及到该Item的Transaction是否还能在业务或者财务处理的环节继续操作&#xff5e;基本的测试分三种场景&#x…

【Linux】基础IO----系统文件IO 文件描述符fd 重定向

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解在Linux下的系统文件IO&#xff0c;知道什么是文件描述符&#xff0c;什么是重定向 > 毒鸡汤&#xff1a;白日莫闲过&#xff0c;青春不再来。 …