如何用Vue3和inMap实现一个带有图例的随机多边形展示

本文由ScriptEcho平台提供技术支持

项目地址：传送门

## 基于Vue的InMap热力图实现

应用场景

InMap热力图广泛应用于地理信息可视化领域，可以直观地展示地理分布数据，帮助用户快速识别数据热点区域和分布规律。在城市规划、交通管理、疫情监测等场景中有着重要的应用价值。

代码基本功能

这段代码使用Vue框架和InMap库，实现了基于地理位置数据的热力图可视化。主要功能包括：

• 加载InMap库并创建地图实例
• 根据数据创建热力图图层，并自定义图层样式
• 创建图例，展示热力图分段配色方案
• 提供随机生成热力图数据的功能，方便用户测试

功能实现步骤及关键代码分析

1. 导入依赖库和初始化数据

import { onMounted } from 'vue'
const loadJavascript = (jsUrl) => { ... }
onMounted(async () => {
  let jsUrls = [
    'https://block-design.oss-cn-shenzhen.aliyuncs.com/component-JSON/geojson.js',
    'https://api.map.baidu.com/getscript?v=2.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240108120844',
    'https://registry.npmmirror.com/inmap/2.3.3/files/dist/inmap.min.js',
  ]
  await Promise.all(jsUrls.map((js) => loadJavascript(js)))
})

• 使用onMounted钩子在组件挂载时加载InMap库和其他依赖库。
• 定义loadJavascript函数异步加载外部脚本。

2. 创建地图实例

var inmap = new inMap.Map({
  id: 'allmap',
  skin: 'Blueness',
  center: ['114.16248337214269', '22.559515429553684'],
  zoom: {
    value: 11,
    show: true,
    max: 22,
  },
})

• 创建一个InMap地图实例，指定地图容器ID、地图主题、中心点和缩放级别。

3. 创建热力图图层

var overlay = null
var createOverlay = function (num) {
  if (overlay) {
    destroyedData()
  }
  overlay = new inMap.PolygonOverlay({
    style: {
      normal: {
        borderWidth: 1.5,
        backgroundColor: 'rgba(0,184,255,0.80)',
        label: {
          show: true, // 是否显示
          font: '10px bold ',
          color: 'rgba(224, 238, 251,1)',
        },
      },
      colors: colors,
      splitList: splitColor,
      mouseOver: {
        shadowColor: 'rgba(0, 0, 0, 1)',
        shadowBlur: 10,
        borderWidth: 1.5,
        label: {
          color: 'rgba(0, 0, 0, 1)',
        },
      },
      selected: {
        backgroundColor: 'rgba(184,0,0,1)',
        borderColor: 'rgba(255,255,255,1)',
      },
    },
    legend: {
      show: false,
    },
    tooltip: {
      show: true,
      formatter: '{count}',
    },
    data: data.features.slice(0, num).map((item) => {
      item.count = item.properties.OBJECTID_1
      return item
    }),
    event: {
      onState(state) {
        console.log(state)
      },
    },
  })
  inmap.add(overlay)
}

• 定义一个createOverlay函数创建热力图图层。
• 使用inMap.PolygonOverlay类创建多边形热力图图层，并指定图层样式、图例、提示信息等配置。
• 将热力图数据（GeoJSON格式）添加到图层中。

4. 创建图例

var createLegendDom = function () {
  var html = ''
  for (var i = 0, len = splitColor.length; i < len; i++) {
    var item = splitColor[i]
    html += `
                <p>
                    <i style="background:${item.backgroundColor}"></i> ${item.start} ~ ${item.end ? item.end : '∞'}
                </p>
                `
  }
  document.querySelector('.demo-inmap-legend').innerHTML = html
}

• 定义一个createLegendDom函数创建图例。
• 根据热力图分段配色方案生成HTML代码，并在页面中显示图例。

5. 随机生成热力图数据

document
  .querySelector('.random-polygon')
  .addEventListener('click', function () {
    createOverlay(Math.ceil(data.features.length * Math.random()))
  })

• 监听“设置随机围栏”按钮点击事件。
• 调用createOverlay函数，随机生成热力图数据并更新图层。

总结与展望

通过这段代码，我们实现了基于Vue和InMap库的热力图可视化功能。该代码具有以下特点：

• 使用Vue框架，便于集成到Web应用程序中
• 采用InMap库，提供丰富的热力图样式和交互功能
• 支持随机生成热力图数据，方便用户测试和探索

未来，可以对该代码进行以下拓展和优化：

• 集成其他数据源，支持多种地理数据格式
• 优化热力图算法，提高性能和精度

• 提供更多交互功能，如数据查询、图层叠加等

  更多组件：
  <img src="https://block-design.oss-cn-shenzhen.aliyuncs.com/haomo-ai/image/id-7f9e3f15638c3a4e3edbcca97386c43f.png" />

  获取更多Echos

  本文由ScriptEcho平台提供技术支持

  项目地址：传送门

  扫码加入AI生成前端微信讨论群：