【高德地图进阶】--- 使用DistrictSearch 绘制城市版块

在【高德地图入门】—通过geoJson绘制点，线，面一章中，我们学会了如何使用GeoJson绘制城市版块。今天我们使用高德自己的api来绘制城市版块

DistrictSearch

DistrictSearch插件可以通过城市名或城市码查询到城市的区号、城市编码、中心点、边界、下辖区域等详细信息

引入插件

  <scriptlanguage="javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=cccc&plugin=AMap.DistrictSearch"></script>

使用示例

DistrictSearch 有四个重要的属性

    let opts = {// 是否返回行政区边界坐标点extensions: "all",// 设置查询行政区级别为 区 level: "city",};// 创建DistrictSearch对象const district = new AMap.DistrictSearch(opts);district.search("山东省", function (status, result) {console.log("status", status);console.log("result", result);});

上图中的boundaries 就是所查询城市的边界坐标点数据，我们可以通过该数据绘制点，线，面

例1：绘制边界线

    let opts = {subdistrict: 1,// 是否返回行政区边界坐标点extensions: "all",// 设置查询行政区级别为 市level: "city",};// 创建DistrictSearch对象const district = new AMap.DistrictSearch(opts);district.search("山东省", function (status, result) {let bounds = result.districtList[0].boundaries;console.log(bounds.length);for (let i = 0; i < bounds.length; i += 1) {// 绘制边界线new AMap.Polyline({path: bounds[i],strokeColor: "#0dcdd1",strokeWeight: 3,map: map,});}});

例2：绘制版块

    let opts = {subdistrict: 1,// 是否返回行政区边界坐标点extensions: "all",// 设置查询行政区级别为 区level: "city",};// 创建DistrictSearch对象const district = new AMap.DistrictSearch(opts);district.search("山东省", function (status, result) {let bounds = result.districtList[0].boundaries;if (bounds) {console.log(bounds);for (let i = 0; i < bounds.length; i += 1) {// 绘制版块new AMap.Polygon({map: map,path: bounds[i],strokeColor: "#0dcdd1",fillColor: "#3D6BB1",});}}});

是不是也看出了和GeoJson的区别了呢，因为搜索出来的边界坐标是整个省的，无法直接绘制市的边界线

绘制市级边界线

result中还返回了当前搜索城市的下级行政区的信息，我们可以遍历这个数据进行多次查询

示例：根据省的边界线绘制面，然后通过遍历所有市的信息，对每个市进行搜索，获取每个市的边界坐标用于绘制市级边界线

    let opts = {// 是否返回行政区边界坐标点extensions: "all",// 设置查询行政区级别为 市level: "city",};// 创建DistrictSearch对象const district = new AMap.DistrictSearch(opts);DrawSection("山东省", district, true);// 使用递归的方式function DrawSection(cityName, district, isSearchNextLevel) {district.search(cityName, function (status, result) {let bounds = result.districtList[0].boundaries;if (bounds) {for (let i = 0; i < bounds.length; i += 1) {if (isSearchNextLevel) {// 绘制省的版块new AMap.Polygon({map: map,path: bounds[i],strokeColor: "#0dcdd1",fillColor: "#3D6BB1",});} else {// 绘制市的边界线new AMap.Polyline({path: bounds[i],strokeColor: "#0dcdd1",map: map,});}}if (isSearchNextLevel) {let districtList = result.districtList[0].districtList;for (let i = 0; i < districtList.length; i += 1) {DrawSection(districtList[i].name, district, false);}}}});}

是不是和GeoJson相比变得很麻烦，而且搜索了很多次，也浪费了很多网络资源呢？

全部代码展示（其中xxxx 高德的秘钥，cccc是高德的key，需要自己申请）

<!DOCTYPE html>
<html><head><metaname="viewport"content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>map</title><style>body,html,#container {margin: 0;width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script>window._AMapSecurityConfig = {securityJsCode: "xxxx",};</script><scriptlanguage="javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=cccc&plugin=AMap.DistrictSearch"></script><script language="javascript">const map = (window.map = new AMap.Map("container", {center: [118.035441, 36.323541],viewMode: "3D",zoom: 7,pitch: 50,showLabel: false,}));let opts = {// 是否返回行政区边界坐标点extensions: "all",// 设置查询行政区级别为 市level: "city",};// 创建DistrictSearch对象const district = new AMap.DistrictSearch(opts);DrawSection("山东省", district, true);// 使用递归的方式function DrawSection(cityName, district, isSearchNextLevel) {district.search(cityName, function (status, result) {let bounds = result.districtList[0].boundaries;if (bounds) {for (let i = 0; i < bounds.length; i += 1) {if (isSearchNextLevel) {// 绘制省的版块new AMap.Polygon({map: map,path: bounds[i],strokeColor: "#0dcdd1",fillColor: "#3D6BB1",});} else {// 绘制市的边界线new AMap.Polyline({path: bounds[i],strokeColor: "#0dcdd1",map: map,});}}if (isSearchNextLevel) {let districtList = result.districtList[0].districtList;for (let i = 0; i < districtList.length; i += 1) {DrawSection(districtList[i].name, district, false);}}}});}</script>
</html>

【高德地图进阶】--- 使用DistrictSearch 绘制城市版块相关推荐

【高德地图进阶】--- 3d城市版块之prism
在[高德地图入门]-通过geoJson绘制点,线,面一章中,我们学会了如何绘制城市版块的平面.但为了凸显某个城市,一般情况下都会将该城市的版块抬高实现3d效果.现在我们就来学学如何抬高地图版块整理 ...
【高德地图进阶】--- 添加城市版块纹理
在之前的[高德地图进阶]- 自定义地图中,有了解过如果给地图添加纹理. 但是该功能是收费的,这就劝退了不少人. 通常的业务都是将城市版块抬高,这部分之前的文章也讲述过.都是在地图上添加覆盖物在高德的 ...
十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示【二、创建地图】
十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示[二.创建地图] 在template标签内创建下列DOM 1.在template标签内,创建container的 ...
Android 高德地图中路线规划绘制界面线路
Android 高德地图中路线规划绘制界面线路下面代码是根据很多的经纬度的点,绘制出直线的线路.比较死板 /*** 绘制景区的路线*/private void setRouteInfo(List&l ...
java使用高德地图根据IP地址获取城市
话不多说!直奔主题既然是根据IP,首先肯定是先要获取IP地址的,以下代码是获取IP地址,部署到服务器上去后会获取到公网的IP不是服务器的本机IP:是通过HttpServletRequest获取注: ...
解决高德地图锁屏黑屏定位不更新，高德地图绘制定位轨迹，高德定位判断定位停留点，高德地图将所有坐标绘制在可视区域内
本文章主要介绍高德定位锁屏黑屏定位不更新的问题. 实现流程是:程序开始阶段正常执行定位,注册监听锁屏监听,唤醒cpu监听,当锁屏广播每2秒发起一起单次定位唤醒.源码如下: package net. ...
【高德地图进阶】--- 3d城市版块之wall
在之前的文章描述了如何通过prism绘制3d城市版块,这篇文章将采用另外的方式来实现3d版块的制作 AMap.Object3D.Wall wall 见名知意,这个api就是绘制墙的, 也可以看做是有高 ...
高德地图行政区域查询 DistrictSearch
当我们想查询某一地区的编码时,高德地图为我们提供了两种方法. 一:通过下载相应的文档进行查找. 二:通过插件DistrictSearch进行搜索查询第一种方法的好处是可以不用编写代码即可知道所有的详 ...
中高德地图只显示某一城市_小O地图 - 城市交通态势数据查询及下载
小O地图是一款互联网地图数据挖掘.分析.图表软件.具有专业.稳定.高效的特点.提供地图功能多达30余项,并持续更新中. 感兴趣的朋友可以登录官网下载使用 .www.GIS9.com [概述] 本文介绍 ...

【高德地图进阶】--- 使用DistrictSearch 绘制城市版块

DistrictSearch

引入插件

使用示例

绘制市级边界线

【高德地图进阶】--- 使用DistrictSearch 绘制城市版块相关推荐

最新文章

热门文章