使用(h3.js)绘制六角网格码

今天来记录一篇关于h3.js插件库的使用，他可以很高效的计算出地球上某个经纬度坐标六边形顶点。

前段时间领导突然给我个售前功能，要求是使用h3.js插件在地球上绘制出六边形网格码，本来以为挺棘手的，结果看完文档后发现也挺简单的，话不多说，开干...

h3.js

学前热身

首先看几张示意图：

1. 基础的六角网格

2. 可根据地球缩放层级的不同而渲染不同大小的六边形

3. 右击网格码，可以变换底色

4. 可以根据随机给六角网格添加颜色区分

实现思路

准备

首先给项目安装相关依赖

npm install h3-js

或者

pnpm install h3-js

当然如果我们不是vue等框架项目，也无所谓，只需要引入h3.js的js文件即可。

<script src="https://unpkg.com/h3-js"></script>

实现

useHexagonTrellisCode 是一个基于 Cesium 和 H3 库的六边形网格码可视化工具，用于在地图上生成和显示 H3 六边形网格系统。

其中我们实现时需要用到几个h3.js自带的api,大家想了解的可以去官网看看。

polygonToCells, cellToLatLng, latLngToCell, cellToBoundary, getHexagonEdgeLengthAvg, UNITS

我将本次编辑的代码整合到一个类中，下面是使用方法：

初始化

import * as Cesium from 'cesium';
import { useHexagonTrellisCode } from './useHexagonTrellisCode';// 创建Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer');// 初始化配置，参数下面有简介
let option = {level: 6,                  // 网格层级 (3-6)polygonArea: [             // 初始绘制区域,注意这里是纬度在前，经度在后[纬度1, 经度1],[纬度2, 经度2],[纬度3, 经度3]],isSort: true,              // 是否对六边形进行排序（可选）Mark_color: ["#00ffff85"]   // 标记颜色（可选）
}// 初始化六边形网格码工具
const hexagonTool = new useHexagonTrellisCode(viewer, option);// 是否显示标签（可选）
hexagonTool.showLabel();// 渲染网格
hexagonTool.render();

参数配置(option)

参数	类型	默认值	说明
level	number	6	H3网格层级 (3-6)
isPolygonFullDraw	boolean	false	是否根据视口大小绘制图形（还在实验中）
isSort	boolean	false	是否对六边形进行排序
Mark_color	string[]	["#00ffff85", "#a605ff85", "#ffce0585", "#05ff1d85"]	标记颜色数组
polygonArea	number[][]	[]	定义绘制六边形网格码的区域

主要方法

1、显示标签

showLabel()

2、渲染网格

render()

3、高亮选中的六边形

/*** longitude: 经度* latitude: 纬度* option: 可选配置，如 { selectColor: "red" }*/
select_high_lightObject(longitude, latitude, option)

4、设置网格层级

setLevel(level)

5、设置绘制区域

setPolygonArea(position)

6、销毁实例

destory()

使用示例

1、基本使用

const useHexagonTrellis = new useHexagonTrellisCode(viewer, {level: 5,polygonArea: [[39.9, 116.3],[39.9, 116.5],[40.1, 116.5],[40.1, 116.3]]
}).showLabel().render();

2、交互示例

// 点击地图高亮六边形
viewer.screenSpaceEventHandler.setInputAction(function(movement) {const pickedObject = viewer.scene.pick(movement.endPosition);if (pickedObject && pickedObject.id) {const cartographic = Cesium.Cartographic.fromCartesian(pickedObject.id);const longitude = Cesium.Math.toDegrees(cartographic.longitude);const latitude = Cesium.Math.toDegrees(cartographic.latitude);useHexagonTrellis.select_high_lightObject(longitude, latitude, {selectColor: "#ff0000"});}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

3、动态调整层级

viewer.camera.changed.addEventListener(() => {const height = viewer.camera.positionCartographic.height;if (viewer.scene.mode === Cesium.SceneMode.SCENE3D) {let level = Math.floor(Math.log2(2.0e7 / height));useHexagonTrellis.setLevel(level);}
})

主要代码

import * as Cesium from 'cesium'
import { polygonToCells, cellToLatLng, latLngToCell, cellToBoundary, getHexagonEdgeLengthAvg, UNITS } from "h3-js";
export class useHexagonTrellisCode {viewer = null;hexgonIds = [];/*** 所有六边形图元*/PrimitiveMain = null;/*** 选中时所显示的图元*/selectPrimitive = null;/*** 编码标签的集合*/labelsCollection = null;/*** 标识圆的所有图元集合*/_circles = [];config = {level : 6,      // 当前层级isPolygonFullDraw: false,   // 是否根据视口大小绘制图形isSort: false,      // 是否排序Mark_color: ["#00ffff85", "#a605ff85", "#ffce0585", "#05ff1d85"],    // 是否在六边形上添加透明图元polygonArea: [],    // 定义绘制六边形网格码的区域}/*** useHexagonTrellisCode 生成六边形网格码* @param {*} viewer * @param {*} option * @returns */constructor (viewer, option) {this.viewer = viewer;this.config = {...this.config,...option};return false;}/*** 开启标签显示* @returns */
/*** longitude: 经度* latitude: 纬度* option: 可选配置，如 { selectColor: "red" }*/showLabel() {this.labelsCollection && this.viewer.scene.primitives.remove(this.labelsCollection);this.labelsCollection = new Cesium.LabelCollection();this.viewer.scene.primitives.add(this.labelsCollection);return this;}/*** 渲染* @returns */render() {if (this.config.polygonArea.length == 0) {return false;}this.clearOldPrimitive();const hexagons = polygonToCells(this.config.polygonArea, this.config.level);this.hexgonIds = hexagons;let _hexagons_center = hexagons;// 添加排序if (this.config.isSort) {let _hexagons = hexagons.map(hexId => {const center = cellToLatLng(hexId);return {hexId, lon:center[1], lat: center[0]}})_hexagons_center = _hexagons.sort((a, b) => {if (a.lat !== a.lat) return b.lat - a.lat;return a.lon - b.lon;}).map(t => t.hexId)}this.PrimitiveMain = this.createPrimitive_line();let instances = [];let drawNum = 0;_hexagons_center.forEach((hexId) => {instances.push(this.createHexagonInstance_line(hexId))if (this.config.Mark_color.length > 0 && drawNum++ < this.config.Mark_color.length) {this.drawCircles(hexId, this.config.Mark_color[drawNum]);}if (this.labelsCollection) this.addLabel(hexId);})this.PrimitiveMain.geometryInstances = instances;return this.viewer.scene.primitives.add(this.PrimitiveMain);}/*** 根据视口绘制六边形* 实验中...*/drawPolygonByViewFull() {// 判断选中区域是否在视口内let isPolygonFull = this.isPolygonFullyInViewport(this.config.polygonArea);if (isPolygonFull == 0) {console.log("111")return false;}if (isPolygonFull == 2) {console.log("222")return this.render();}console.log("333")const viewRectangle = this.viewer.camera.computeViewRectangle();let position = [[Cesium.Math.toDegrees(viewRectangle.west),Cesium.Math.toDegrees(viewRectangle.south)],[Cesium.Math.toDegrees(viewRectangle.east),Cesium.Math.toDegrees(viewRectangle.south)],[Cesium.Math.toDegrees(viewRectangle.east),Cesium.Math.toDegrees(viewRectangle.north)],[Cesium.Math.toDegrees(viewRectangle.west),Cesium.Math.toDegrees(viewRectangle.north)]]this.removeLabelCollection();const _hexagons = polygonToCells(position, this.config.level);let instances = [];this.hexgonIds.forEach(hexId => {if (_hexagons.includes(hexId)) {instances.push(this.createHexagonInstance_line(hexId))if (this.labelsCollection) this.addLabel(hexId);}})this.PrimitiveMain.geometryInstances = instances;return true;}/*** 添加label标签* @param {*} hexId * .padEnd(this.config.labelLenght || 5, '0')*/addLabel(hexId){let lonlat = cellToLatLng(hexId);this.labelsCollection.add({position : Cesium.Cartesian3.fromDegrees(lonlat[1], lonlat[0]),text : hexId.replace(/[^\d]/g,''),font : `${this.config.labelSize || 16}px sans-serif`,horizontalOrigin : Cesium.HorizontalOrigin.CENTER,verticalOrigin : Cesium.VerticalOrigin.BOTTOM,})}/*** 通过经纬度添加选中效果* @param {*} longitude * @param {*} latitude * @param {*} option * @returns */select_high_lightObject(longitude, latitude, option) {if(!longitude || !latitude || this.config.level == -1) {return false;}let _code = latLngToCell(latitude, longitude,this.config.level);if (this.hexgonIds.includes(_code)) {// 删除之前高亮图元this.viewer.scene.primitives.remove(this.selectPrimitive); this.selectPrimitive = this.createPrimitive_polygon();this.selectPrimitive.geometryInstances = [ this.createHexagonInstance_polygon(_code, option.selectColor || "red") ];this.viewer.scene.primitives.add(this.selectPrimitive);return true;}else {return false;}}/*** 绘制圆* @param {*} hexId */drawCircles(hexId, color) {// 绘制填充多边形let polygon = this.createPrimitive_polygon();let geomtry = this.createHexagonInstance_polygon(hexId, color || "red");polygon.geometryInstances = geomtry;this._circles.push(polygon);this.viewer.scene.primitives.add(polygon);// 绘制圆let _circle = this.createPrimitive_circle();let instance = [];let distance = parseInt(getHexagonEdgeLengthAvg(this.config.level, UNITS.m)) * (Math.random() * (0.9 - 0.2) + 0.2);let colors = ["#098", "#af2","#f2a","#b2a"];for (let i=0; i<4; i++){let radius = distance - (distance * (i / 5));// 使用叠加法绘制原型轮廓线for (let j=0; j< 30; j++){instance.push(this.createHexagonInstance_circle(hexId, radius - j,colors[i]))}}_circle.geometryInstances = instance;this._circles.push(_circle);this.viewer.scene.primitives.add(_circle);}/*** 删除选中后添加的高亮图元*/remove_select_primitive() {this.selectPrimitive && this.viewer.scene.primitives.remove(this.selectPrimitive);}/*** 添加线类型Primitive* @returns */createPrimitive_line() {return new Cesium.Primitive({geometryInstances: [],appearance: new Cesium.PolylineColorAppearance({translucent: false,renderState: {depthTest: { enabled: false }, // 关闭深度测试blending: Cesium.BlendingState.ALPHA_BLEND,depthMask: false,    // 关键：禁止写入深度缓冲区}}),asynchronous: false});}/*** 添加圆类型Primitive* @returns */createPrimitive_circle() {return new Cesium.Primitive({geometryInstances: [],appearance: new Cesium.PerInstanceColorAppearance({translucent: false,closed: false,flat: true,renderState: {depthTest: { enabled: false }, // 关闭深度测试blending: Cesium.BlendingState.ALPHA_BLEND,depthMask: false    // 关键：禁止写入深度缓冲区}}),asynchronous: false});}/*** 添加多边形类型Primitive* @returns */createPrimitive_polygon() {return new Cesium.Primitive({geometryInstances: [],appearance: new Cesium.PerInstanceColorAppearance({translucent: false,closed: false,renderState: {depthTest: { enabled: false }, // 关闭深度测试blending: Cesium.BlendingState.ALPHA_BLEND,depthMask: false,    // 关键：禁止写入深度缓冲区}}),asynchronous: false});}/*** 添加圆类型GeometryInstance* @param {*} hexId * @param {*} radius * @param {*} color * @returns */createHexagonInstance_circle(hexId, radius = 5, color = "blue") {const coordinates = cellToLatLng(hexId, true); // 获取六边形边界const center = Cesium.Cartographic.fromDegrees(coordinates[1], coordinates[0]);const _center = Cesium.Cartesian3.fromRadians(center.longitude,center.latitude, 0);return new Cesium.GeometryInstance({geometry: new Cesium.CircleOutlineGeometry({center: _center,radius: isNaN(radius) ? 5 : radius}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(color))},id: hexId // 保存H3 ID以便交互});}/*** 添加线类型GeometryInstance* @returns */createHexagonInstance_line = (hexId, color = "#008df1a3") => {const coordinates = cellToBoundary(hexId, true); // 获取六边形边界const positions = coordinates.map(coord => Cesium.Cartesian3.fromDegrees(coord[0], coord[1]));return new Cesium.GeometryInstance({geometry: new Cesium.PolylineGeometry({positions: positions,width : 2.0}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(color))},id: hexId // 保存H3 ID以便交互});}/*** 添加多边形类型GeometryInstance* @returns */createHexagonInstance_polygon(hexId, color = "#008df1a3") {const coordinates = cellToBoundary(hexId, true); // 获取六边形边界const positions = coordinates.map(coord => Cesium.Cartesian3.fromDegrees(coord[0], coord[1], 200));return new Cesium.GeometryInstance({geometry: new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(positions),height: 20 // 可选高度}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(color))},id: hexId // 保存H3 ID以便交互});}/*** 判断当前选中的区域是否在全视口内* @param {*} positions * @returns *      0: 全不在视口中，不需要渲染*      1: 所选区域部分在视口内*      2: 所选区域全部在视口内*/isPolygonFullyInViewport(positions) {const viewRectangle = this.viewer.camera.computeViewRectangle();if (!viewRectangle || !positions || positions.length < 3) return 0;const _positions = positions.map(t => new Cesium.Cartographic(t[1],t[0]));let polygonRectangle  = this.createValidRectangle(_positions);console.log(viewRectangle, polygonRectangle);// 所选区域全部在视口内if (_positions.every(t => Cesium.Rectangle.contains(viewRectangle, polygonRectangle))) {return 2;}// 所选区域全部不在视口内if (!_positions.some(t => Cesium.Rectangle.contains(viewRectangle, polygonRectangle))) {return 0;} else {// 所选区域部分在视口内return 1;}}// 辅助方法：创建有效的RectanglecreateValidRectangle(cartographics) {// 1. 计算边界const west = Math.min(...cartographics.map(c => c.longitude));const south = Math.min(...cartographics.map(c => c.latitude));const east = Math.max(...cartographics.map(c => c.longitude));const north = Math.max(...cartographics.map(c => c.latitude));// 2. 验证范围if (west >= east || south >= north) {console.warn("无效的坐标范围:", {west, south, east, north});return null;}// 3. 返回有效的Rectanglereturn Cesium.Rectangle.fromDegrees(west, south, east, north);}/*** 重置层级* @param {*} level 限制 最大是6 最小是3*/setLevel(level) {let _level= Math.max(Math.min(level, 6), 3);if (Object.is(this.config.level, _level)) return false;this.config.level = _level;return this.config.isPolygonFullDraw ? this.drawPolygonByViewFull() : this.render();;}/*** 重新选择生成网格码的区域* @param {*} position */setPolygonArea(position) {this.config.polygonArea = position;this.config.isPolygonFullDraw ? this.drawPolygonByViewFull() : this.render();}/*** 删除标签*/removeLabelCollection() {this.labelsCollection && this.labelsCollection.removeAll();}/*** 删除可视化图元*/clearOldPrimitive() {this.remove_select_primitive();this.PrimitiveMain && this.viewer.scene.primitives.remove(this.PrimitiveMain);this._circles.forEach(item => this.viewer.scene.primitives.remove(item));this.removeLabelCollection();}/*** 销毁示例*/destory() {this.clearOldPrimitive();}
}

如何我们不是vue等框架项目，不容易用import和export方法来导出、引入的话，我们可以script标签方式引入，然后在所有api前添加h3.就行了（如：h3.cellToLatLng(xxx)即可）。最后将export去掉，底部添加window.useHexagonTrellisCode = useHexagonTrellisCode;代码就可以了。