高德数据可视化初体验

背景

换了新工作，虽然还是java开发，但是之前搞做在线教育的，现在做地图相关的事。因此，花了些时间学了空间索引相关的内容，后期会写关于空间索引相关的内容，这期写地理数据可视化相关的内容。

准备

1.高德开发平台账号

高德开放平台：https://lbs.amap.com/

申请账号并在应用管理创建需要的key，如图

2.学习高德JS API文档

这里我主要关注多边形的展示，所以贴一下矢量图形的链接，有需要的可自行看其他内容
https://lbs.amap.com/api/jsapi-v2/guide/overlays/vector-overlay

然后，楼主又花了点时间在B站上学了JS基本语法相关的内容，然后就可以动手做了

开发

后端接口

接口主要提供国内的行政区划数据，即省市区的编码和多边形围栏数据，在网上google找了一个可以用的数据https://github.com/Civitasv/DataV_GeoJSON，将区级别的json数据解析出来，导入数据库里，这样我们就有了基础数据。

然后提供一个接口，可以返回多边形边界数据

    @GetMapping("/queryByAdcode")@CrossOriginpublic ShapeListDTO queryByAdcode(@RequestParam("adcode") Integer adcode) {log.info("queryByAdcode,adcode:{}", adcode);return cityService.queryByAdcode(adcode);}//返回对象数据结构
@Data
public class ShapeListDTO {private Integer total;private List<String> shape;
}

前端

前端通过ajax请求后端接口获取数据，然后调高德JS API方法将多边形边界数据在页面上渲染即可

直接贴代码：

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/><title>地图显示</title><style>html,body,#container {width: 100%;height: 100%;}</style>
</head>
<body>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=2.0&key=【你申请的key】"></script>
<script>var req = new XMLHttpRequest();req.open("GET", "http://127.0.0.1:8080/queryByAdcode?adcode=110000")req.onload = function () {if (req.responseText == '') {errorMsg.style.display = 'block'} else {console.log(req.responseText)var map = new AMap.Map('container', {viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',zoom: 11, //初始化地图层级center: [116.397428, 39.90923], //初始化地图中心点});var resp = JSON.parse(req.responseText);var total = resp.total;var shapes = resp.shape;for (var i = 0; i < total; i++) {var poly = shapes[i];var points = poly.split(",");var list = [];for (var j = 0; j < points.length; j++) {var pp = points[j].split(" ");list.push(pp);}var polygon1 = new AMap.Polygon({path: list,          //设置线覆盖物路径fillColor: '#42cee0', // 多边形填充颜色borderWeight: 2, // 线条宽度，默认为 1strokeColor: 'red', // 线条颜色});map.add(polygon1);}}}req.send();</script>
</body>
</html>

效果图

代码

我的代码仓库地址，这里只有后端代码：https://github.com/longbig/LBS-learn

[LBS学习笔记 1]高德数据可视化初体验相关推荐

Python数据科学学习笔记之——Matplotlib数据可视化
Matplotlib 数据可视化 1.Matplotlib 常用技巧 1.1.导入 Matplotlib import matplotlib as mpl import matplotlib.pypl ...
Python学习笔记——数据分析之数据可视化工具实战案例：世界高峰数据可视化
世界高峰数据可视化 (World's Highest Mountains) 参考:https://www.kaggle.com/alex64/d/abcsds/highest-mountains/le ...
开源 - 学习笔记 - 青阳网络文件传输系统初体验
青阳网络文件传输系统 - 学习笔记创建个启动脚本账号权限配置服务配置参考资料创建个启动脚本 @echo off title 青阳网络文件传输系统 start /B java -server ...
学习笔记：matplotlib数据可视化
先保存在这里,还没写完... import numpy as np from matplotlib import pyplot as plt x=np.linspace(-10,10,1000) y1 ...
Java Web学习笔记01：动态网站初体验
文章目录一.课程概述 1.课程地位 2.课程目标二.动态网站
LVGL v8学习笔记 | 01 - LVGL PC模拟器初体验
一.LVGL LVGL官网:https://lvgl.io/. LVGL全称Light and Versatile Graphics Library,轻量化和多功能的图形库,遵循MIT开源许可协议,具 ...
[LBS学习笔记4]地理特征POI、AOI、路径轨迹
1 简述今天继续LBS地理信息的学习,目标是写到10篇博客的时候,做出一个地图工具页面用,包含地图空间索引Geohash.S2.H3的可视化展示. 地理特征分为点(POI).线(路径).面(AOI) ...
[LBS学习笔记3]redis geo地理位置查询分析
1.redis geo命令 1.1 redis6.2版本geo命令简介 redis自3.2版本开始,提供了地理位置相关的命令: GEOADD:添加空间元素 GEOPOS: 获取某个地理位置的坐标 GE ...
Caffe学习系列(13)：数据可视化环境（python接口)配置
原文有更新: Caffe学习系列(13):数据可视化环境(python接口)配置 - denny402 - 博客园 http://www.cnblogs.com/denny402/p/5088399. ...

[LBS学习笔记 1]高德数据可视化初体验

高德数据可视化初体验

背景

准备

开发

后端接口

前端

效果图

代码

[LBS学习笔记 1]高德数据可视化初体验相关推荐

最新文章

热门文章