H5数据可视化(高德地图绘制行政区)

1、高德地图可视化项目搭建

参考我的上篇文章完成基本搭建：H5数据可视化(高德地图构建项目)

2、使用高德行政区查询

该部分主要参照官方教程即可，其中使用行政区划查询服务前要先引入该插件，具体的引入方式请参考教程：插件的使用。
下面列出我的代码实例，官方文档教程点这里

 AMap.plugin('AMap.DistrictSearch', function() {var opts = {subdistrict: 0, // 获取边界不需要返回下级行政区extensions: "all", // 返回行政区边界坐标组等具体信息level: "city" // 查询行政级别为 市};var district = new AMap.DistrictSearch(opts);district.search('郑州市', function(status, result) {// 查询成功时，result即为对应的行政区信息var bounds = result.districtList[0].boundaries;// ...下一步绘制覆盖物在这里进行})})

3、绘制行政区覆盖

高德地图绘制覆盖物教程

                    for (var i = 0, l = bounds.length; i < l; i++) {var polygonbox = new AMap.Polygon({strokeWeight: 3,path: bounds[i],fillOpacity: 0.9,fillColor: "#6e3fc8",strokeColor: "#6e3fc8",extData: {IDname: "郑州",Center: "传递内容"}});map.add(polygonbox);}

4、效果图与完整代码

效果图

源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><script src="https://a.amap.com/Loca/static/dist/jquery.min.js"></script><script src="https://webapi.amap.com/maps?key=2da678792428d85bd3f0c0e26b25c54b&v=1.4.15&plugin=Map3D"></script><script src="https://webapi.amap.com/loca?key=2da678792428d85bd3f0c0e26b25c54b&v=1.3.0"></script>
</head><body><div id='map' style='width:800px; height:600px;'></div><script>window.onload = function() {const map = new AMap.Map('map', {pitch: 50, // 地图俯仰角度，有效范围 0 度- 83 度viewMode: '3D', // 地图模式mapStyle: 'amap://styles/8b1ff64d2c968f4f84c2a5f5ef562cfb', // 地图主题zoom: 8, //设置地图的缩放级别zooms: [8, 20], // 缩放级别限制center: [113.509464, 34.662878],});AMap.plugin('AMap.DistrictSearch', function() {var opts = {subdistrict: 0, // 获取边界不需要返回下级行政区extensions: "all", // 返回行政区边界坐标组等具体信息level: "city" // 查询行政级别为 市};var district = new AMap.DistrictSearch(opts);district.search('郑州市', function(status, result) {// 查询成功时，result即为对应的行政区信息var bounds = result.districtList[0].boundaries;for (var i = 0, l = bounds.length; i < l; i++) {var polygonbox = new AMap.Polygon({strokeWeight: 3,path: bounds[i],fillOpacity: 0.9,fillColor: "#6e3fc8",strokeColor: "#6e3fc8",extData: {IDname: "郑州",Center: "传递内容"}});map.add(polygonbox);}})})}</script>
</body></html>

H5数据可视化(高德地图绘制行政区)相关推荐

vue高德地图绘制行政区边界
<template><div id="gaodeMap"></div> </template><script>impor ...
Echarts数据可视化series-map地图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
数据分析---疫情数据可视化（地图）
数据分析---疫情数据可视化(地图) 安装pyecharts库爬取所需要的数据(网上直接爬取数据) 绘制全国地图绘制省份地图(以湖北省为例) 在全国地图上加入湖北省数据导入数据(本地导入数据) ...
vue2+高德地图绘制多个圆形覆盖物和多边形覆盖物
vue2+高德地图绘制圆形覆盖物以及多边形覆盖物直接贴代码直接贴代码添加复选款 <el-checkbox v-model="checkedAri" @change=&q ...
python 3d大数据可视化_Python大数据可视化编程实践-绘制图表
Python 数据可视化编程实践 - 绘制图表准备工作打开 Jupyter Notebook ,导入需要的包, 并配置好图片交互和中文显示环境: import pandas as pd impo ...
高德地图-绘制去程和回程路线
1.问题背景设置去程和回程的路线图,并用不同的颜色设置路线 2.实现源码 <!doctype html> <html> <head><meta charse ...
Python数据分析三剑客学习笔记Day6——matplotlib包的使用：数据可视化，简单绘制柱状图、曲线图、饼图、频率分布直方图
本文是视频Python数据分析三剑客数学建模基础 numpy.pandas.matplotlib的学习笔记. -------------------------------------------- ...
数据可视化——R语言绘制散点相关图并自动添加相关系数和拟合方程
数据可视化--R语言绘制散点相关图并自动添加相关系数和拟合方程加载所需的包并设置主题样式示例数据基本的散点相关图添加相关系数和显著性水平(P值) 存在多个组别的散点相关图自动添加回归曲线的拟 ...
使用高德地图绘制矩形网格，显示行政区域。
高德地图绘制矩形网格认证开发者账号替换成自己的key 效果展示代码地址:https://gitee.com/aimazhe/LocationMap.git 注册高德开发者账号:https://l ...

H5数据可视化(高德地图绘制行政区)

1、高德地图可视化项目搭建

2、使用高德行政区查询

3、绘制行政区覆盖

4、效果图与完整代码

H5数据可视化(高德地图绘制行政区)相关推荐

最新文章

热门文章