《阿里云产品四月刊》—Ganos H3 地理网格能力解析与最佳实践(3)

简介: 阿里云瑶池数据库云原生化和一体化产品能力升级,多款产品更新迭代

本文来源于阿里云社区电子书《阿里云产品四月刊》


《阿里云产品四月刊》—Ganos H3 地理网格能力解析与最佳实践(2)https://developer.aliyun.com/article/1554159

附录

可视化前端 Python 脚本如下:

from quart import Quart, send file, render template
import asyncpg
import io
import re
# 数据库连接参数
CONNECTION = {"host": "YOUR HOST NAME OR IP", "port": PORT NO,
"database": "DATABASE NAME",
"user": "USER NAME", "password": "PASSWORD"}
# 目标表名/字段/ID
TABLE = "h3 count lev13"
H3 COL = "h3 lev13"
H3 GEOM COL = "geometry"
AGG VAL COL = "count"
COL SRID = 4326
app = Quart( name , template folder='./')
@app.before serving
async def create db pool():
app.db pool = await asyncpg.create pool(**CONNECTION)
@app.after serving
async def close db pool():
await app.db pool.close()
@app.route("/")
async def home():
sql = f'''
SELECT ST Extent(ST Transform(ST Envelope({H3 GEOM COL}), 4326))
FROM {TABLE};
'''
async with app.db pool.acquire() as connection:
box = await connection.fetchval(sql)
box = re.findall('BOX\((.*?) (.*?),(.*?) (.*?)\)', box)[0]
min x, min y, max x, max y = list(map(float, box))
bounds = [[min x, min y], [max x, max y]]
center = [(min x + max x) / 2, (min y + max y) / 2]
return await render template('./index.html', center=str(center),
bounds=str(bounds))
@app.route("/h3 mvt/<int:z>/<int:x>/<int:y>")
async def h3 mvt(z, x, y):
sql = f'''
SELECT ST AsMVT(tile.*)
FROM
(SELECT
ST AsMVTGeom({H3 COL},
ST Transform(ST TileEnvelope($1,$2,$3),{COL SRID}), 4096, 512, true)
geometry,
{AGG VAL COL} count
FROM {TABLE}
WHERE
({H3 COL}
&&
ST Transform(ST TileEnvelope($1,$2,$3),{COL SRID}))) tile'''
async with app.db pool.acquire() as connection:
tile = await connection.fetchval(sql, z, x, y)
return await send file(io.BytesIO(tile),
mimetype='application/vnd.mapbox vector tile')
if name == " main ":
app.run(port=5100)


index.html 文件内容如下:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf 8">
<title>map viewer</title>
<meta
name="viewport"
content="initial scale=1,maximum scale=1,user scalable=no">
<link
href="https://api.mapbox.com/mapbox gl js/v2.14.1/mapbox gl.css"
rel="stylesheet">
<script
src="https://api.mapbox.com/mapbox gl js/v2.14.1/mapbox gl.js"></scr
ipt>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/chroma js/2.4.2/chroma.m
in.js"></script>
</head>
<body>
<div id="map" style="position: absolute;left:0; top: 0; bottom: 0;
width: 100%;cursor:pointer;"></div>
<div class="counter"
style="position:
absolute;left:2%;font size:
20px;padding: .1em .1em;text shadow: 3px 3px 3px black;">
<span>当前网格计数:</span><span id="count">0</span>
</div>
<script>
let YOUR TOKEN = "input your mapbox token"
mapboxgl.accessToken = YOUR TOKEN;
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/navigation night v1",
center: {{ center }},
zoom: 1
})
map.on("load", () => {
map.fitBounds({{ bounds }})
map.on('mousemove', 'h3', (e) => {
map.getCanvas().style.cursor = "default";
if (e.features.length > 0)
document.getElementById('count').innerText =
e.features[0].properties.count
})
map.on('mouseleave', 'h3', () => {
map.getCanvas().style.cursor = "grab";
document.getElementById('count').innerText = 0
})
map.addSource("h3 source", {
type: "vector",
tiles: [`${window.location.href}h3 mvt/{z}/{x}/{y}`],
tileSize: 512
});
// make color map
const MIN = 1
const MAX = 600
const STEP = 10
color map = chroma.scale(["#536edb", "#5d96a5", "#68be70",
"#91d54d", "#cddf37", "#fede28", "#fda938", "#fb7447", "#f75a40",
"#f24734", "#e9352a", "#da2723", "#cb181d"])
.domain([MIN, MAX]);
let colors = []
for (let i = MIN; i < MAX; i += STEP)
colors.push(color map(i).hex(), i)
colors.push(color map(MAX).hex())
map.addLayer({
id: "h3",
type: "fill",
source: "h3 source",
"source layer": "default",
paint: {
"fill color": [
"step", ["get", "count"],
...colors
],
"fill opacity": 0.8
}
});
});
</script>
</body>
</html>
相关文章
|
21天前
|
存储 域名解析 弹性计算
阿里云上云流程参考:云服务器+域名+备案+域名解析绑定,全流程图文详解
对于初次通过阿里云完成上云的企业和个人用户来说,很多用户不仅是需要选购云服务器,同时还需要注册域名以及完成备案和域名的解析相关流程,从而实现网站的上线。本文将以上云操作流程为核心,结合阿里云的活动政策与用户系统梳理云服务器选购、域名注册、备案申请及域名绑定四大关键环节,以供用户完成线上业务部署做出参考。
|
7月前
|
存储 缓存 网络协议
阿里云特惠云服务器99元与199元配置与性能和适用场景解析:高性价比之选
2025年,阿里云长效特惠活动继续推出两款极具吸引力的特惠云服务器套餐:99元1年的经济型e实例2核2G云服务器和199元1年的通用算力型u1实例2核4G云服务器。这两款云服务器不仅价格亲民,而且性能稳定可靠,为入门级用户和普通企业级用户提供了理想的选择。本文将对这两款云服务器进行深度剖析,包括配置介绍、实例规格、使用场景、性能表现以及购买策略等方面,帮助用户更好地了解这两款云服务器,以供参考和选择。
|
7月前
|
运维 API 开发工具
【阿里云】操作系统控制台操作体验与性能评测全解析
操作系统控制台是现代云计算环境中进行系统管理和运维的重要工具,提供系统概览、诊断、观测、管理等功能,支持API、SDK、CLI等管理方式。通过创建角色、系统配置和组件安装等操作,用户可以高效管理云端资源,提升操作系统的使用效率和稳定性。尤其适合需要高效管理操作系统的用户及学习云计算、网络管理的学生。建议增强自定义功能、优化性能报告和完善文档支持,以进一步提升用户体验。
214 21
【阿里云】操作系统控制台操作体验与性能评测全解析
|
7月前
|
缓存 边缘计算 安全
阿里云CDN:全球加速网络的实践创新与价值解析
在数字化浪潮下,用户体验成为企业竞争力的核心。阿里云CDN凭借技术创新与全球化布局,提供高效稳定的加速解决方案。其三层优化体系(智能调度、缓存策略、安全防护)确保低延迟和高命中率,覆盖2800+全球节点,支持电商、教育、游戏等行业,帮助企业节省带宽成本,提升加载速度和安全性。未来,阿里云CDN将继续引领内容分发的行业标准。
397 7
|
8月前
|
云安全 人工智能 安全
阿里云网络安全体系解析:如何构建数字时代的"安全盾牌"
在数字经济时代,阿里云作为亚太地区最大的云服务提供商,构建了行业领先的网络安全体系。本文解析其网络安全架构的三大核心维度:基础架构安全、核心技术防护和安全管理体系。通过技术创新与体系化防御,阿里云为企业数字化转型提供坚实的安全屏障,确保数据安全与业务连续性。案例显示,某金融客户借助阿里云成功拦截3200万次攻击,降低运维成本40%,响应时间缩短至8分钟。未来,阿里云将继续推进自适应安全架构,助力企业提升核心竞争力。
|
8月前
|
存储 弹性计算 人工智能
阿里云发票申请图文教程及常见问题解析
在购买完阿里云服务器或者其他云产品之后,如何申请发票成为了许多用户关注的焦点。尤其是对于初次购买阿里云服务器的用户来说,发票申请流程可能并不熟悉。本文将为大家详细介绍阿里云服务器购买之后如何申请发票,以及申请过程中可能遇到的常见问题,帮助大家轻松完成发票申请。
|
7月前
|
算法 测试技术 C语言
深入理解HTTP/2:nghttp2库源码解析及客户端实现示例
通过解析nghttp2库的源码和实现一个简单的HTTP/2客户端示例,本文详细介绍了HTTP/2的关键特性和nghttp2的核心实现。了解这些内容可以帮助开发者更好地理解HTTP/2协议,提高Web应用的性能和用户体验。对于实际开发中的应用,可以根据需要进一步优化和扩展代码,以满足具体需求。
651 29
|
7月前
|
前端开发 数据安全/隐私保护 CDN
二次元聚合短视频解析去水印系统源码
二次元聚合短视频解析去水印系统源码
187 4
|
7月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章

推荐镜像

更多
  • DNS