简介
本文教程在于制作一个可以帮助用户查找行政区域信息前后端+数据库功能。
大致效果就是这样：三级下拉菜单选择省>市>区，并在地图上展示所选择的区域：
本文内容其实也很简单，一共分为三部分：数据获取，数据存储，关联查询。
本教程基于 Java 技术栈，使用 springboot + mybatis 实现。因为作者是全栈开发，所以前端用 angular 、 react 、 vue 各写一个 demo 。（上图效果是作者的一个开源项目，使用 Swing 实现的）
为了方便代码分享，本教程数据库使用 SQLite 。实际开发中你可以直接将 JDBC 替换为你需要的其它关系型数据库，例如 MySQL 、SQL Server 、 Oracle 等，教程使用最基础的 SQL 语句，更换 JDBC 无需改动业务代码。
本教程适用于以下场景：
- 个人项目，或者没有足够的项目预算，无法大量使用第三方 API
- 内网项目或者客户端等，需要数据本地化
- 非 GIS 项目，没有必要为了该功能而去研究 shp 文件等相关资源，再为其搭建 GeoServer 或 ArcGIS 服务来提供接口
数据获取
全国行政区数据可以通过高德地图 API 获取：
行政区域查询-API文档-开发指南-Web服务 API|高德地图API (amap.com)
具体操作就是在 Java 中使用 okhttp 访问高德地图 API ，遍历获取全国行政区信息，解析返回数据并存入数据库。
由于数据量与 API 访问次数限制，本文只做到区级行政区存储。你可以根据本文的思路和方法做到街道级行政区存储。但是那样存下来 API 访问量可能需要上万甚至上十万，数据库大小可能会超过 1GB 甚至更多。目前存储全国区级行政区数据所需要的数据量大小为 150MB ，高德地图 API 单用户日使用额度为 5000 次，可以完成一次本教程存储流程的需要。
根据高德地图 API 文档，我们请求一次行政区查询，会返回如下格式的数据（只截取部分）：
restapi.amap.com/v3/config/d…
{
"status": "1",
"info": "OK",
"infocode": "10000",
"count": "1",
"suggestion": {
"keywords": [],
"cities": []
},
"districts": [
{
"citycode": [],
"adcode": "420000",
"name": "湖北省",
"polyline": "112.716779,32.357793;112.719173,32.361766;112.729295,32.366112;112.733577,32.366214;112.734229,32.363641",
"center": "114.341552,30.546222",
"level": "province",
"districts": [
{
"citycode": "027",
"adcode": "420100",
"name": "武汉市",
"center": "114.304569,30.593354",
"level": "city",
"districts": [
{
"citycode": "027",
"adcode": "420106",
"name": "武昌区",
"center": "114.316464,30.55418",
"level": "district",
"districts": []
},
{
"citycode": "027",
"adcode": "420105",
"name": "汉阳区",
"center": "114.21859,30.554287",
"level": "district",
"districts": []
},
{
"citycode": "027",
"adcode": "420103",
"name": "江汉区",
"center": "114.270763,30.601129",
"level": "district",
"districts": []
}
]
},
{
"citycode": "0710",
"adcode": "420600",
"name": "襄阳市",
"center": "112.121743,32.010161",
"level": "city",
"districts": [
{
"citycode": "0710",
"adcode": "420682",
"name": "老河口市",
"center": "111.683861,32.359068",
"level": "district",
"districts": []
},
{
"citycode": "0710",
"adcode": "420625",
"name": "谷城县",
"center": "111.653077,32.26339",
"level": "district",
"districts": []
}
]
}
]
}
]
}
直接根据上述 JSON 信息你也可以看出个大概了，简单讲解下主要字段：
请求字段：
keywords：需要查询的区域，可以直接填名字也可以填adcode
subdistrict：子级行政区，用于设置下级行政区级数
返回字段：
districts：区域信息，为嵌套数组，上述请求中子级行政区设置的为1，故只套了一层数组
polyline：行政区经纬度范围
adcode：行政区编码
请求字段与返回字段具体可以在高德地图 API 中查看：
数据存储
了解高德地图 API 如何请求与其返回结果信息后，就可以开始设计如何将这些数据存储到数据库了。
数据库表设计
如何设计数据库表，我们先看我们需要存哪些东西：省级行政区、市级行政区、区（县）级行政区，以及每个行政区的经纬度范围。所以我们需要四张表：
tb_province： 省级行政区信息及对应 code
tb_city： 市级行政区信息及对应 code + 父省级行政区code
tb_district： 区级行政区信息及对应 code + 父市级行政区code
tb_area： 每个行政区 code 所对应的经纬度坐标信息
如果你需要精确到街道，那么后续自己可以加一个表：
tb_street： 街道级行政区信息及对应 code + 父区级行政区code
接下来就是每张表的具体字段结构：
接下来是建表 SQL ，适用于 SQLite ，其它关系型数据库自行修改：
CREATE TABLE "tb_province" (
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"name" TEXT NOT NULL,
"center" TEXT NOT NULL,
"adcode" TEXT NOT NULL,
UNIQUE ("id" ASC)
);
CREATE TABLE "tb_city" (
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"name" TEXT NOT NULL,
"center" TEXT NOT NULL,
"citycode" TEXT NOT NULL,
"adcode" TEXT NOT NULL,
"padcode" TEXT NOT NULL,
UNIQUE ("id" ASC)
);
CREATE TABLE "tb_district" (
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"name" TEXT NOT NULL,
"center" TEXT NOT NULL,
"citycode" TEXT NOT NULL,
"adcode" TEXT NOT NULL,
"padcode" TEXT NOT NULL,
UNIQUE ("id" ASC)
);
CREATE TABLE "tb_area" (
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"adcode" TEXT NOT NULL,
"polyline" TEXT NOT NULL
);
根据上述高德地图 API 接口返回字段与本处表中的字段，你应该也了解到表中各字段的含义了。
建表完成后，可以手动在省级行政区的表中插入一条数据，用于后续在下拉框中可以查到全国信息：
Java 实体类
接下来就是根据数据库字段来编写对应的 Java 实体类：
数据库表实体类
首先是每个表各自对应一个实体类：
省级行政区：
@Data
public class ProvinceEntity {
private Integer id;
private String province;
private String adcode;
}
市级行政区：
@Data
public class CityEntity {
private Integer id;
private String name;
private String center;
private String citycode;
private String adcode;
private String padcode;
}
区级行政区：
@Data
public class DistrictEntity {
private Integer id;
private String name;
private String center;
private String citycode;
private String adcode;
private String padcode;
}
经纬度坐标信息：
@Data
public class AreaEntity {
private Integer id;
private String adcode;
private String polyline;
}
API 返回值实体类
根据高德地图 API 的返回值编写对应的实体类：
@Data
public class WebAPIResult {
private String name;
private String citycode;
private String adcode;
private String polyline;
private String center;
private List<WebAPIResult> districts;
}
访问 API 并存储数据
代码解析
数据库增删改查的 SQL 在此就不做介绍了，都是最基础的 SQL 代码，没有必要花太多篇幅去讲解，直接在 git 上看详细代码即可。
其中存储与查询市级行政区信息的 Dao 与 Mapper ：
CityDao
@Mapper
public interface CityDao {
int add(CityEntity city);
int isExist(String adcode);
List<CityEntity> getAll();
List<CityEntity> getByPadcode(String padcode);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.demo.dao.CityDao">
<resultMap id="cityResultMap" type="com.example.demo.model.CityEntity">
<result property="id" column="id"/>
<result property="name" column="name"/>
<result property="center" column="center"/>
<result property="citycode" column="citycode"/>
<result property="adcode" column="adcode"/>
<result property="padcode" column="padcode"/>
</resultMap>
<insert id="add" parameterType="com.example.demo.model.CityEntity">
INSERT INTO tb_city(name, center, citycode, adcode, padcode)
VALUES (#{name}, #{center}, #{citycode}, #{adcode}, #{padcode})
</insert>
<select id="isExist" resultType="java.lang.Integer">
SELECT count() FROM tb_city WHERE adcode=#{adcode}
</select>
<select id="getAll" resultMap="cityResultMap">
SELECT * FROM tb_city
</select>
<select id="getByPadcode" resultMap="cityResultMap">
SELECT * FROM tb_city WHERE padcode=#{padcode}
</select>
</mapper>
我们直接看 API 所需要的完整 Java 代码：
@Component
public class ApiGetFunc {
/**
* 本方法用于通过高德地图API建立行政区表
* SQLite表结构
* (1)tb_province： 省级行政区及对应code
* (2)tb_city： 市级行政区及对应code+父code
* (3)tb_district： 区级行政区及对应code+父code
* (4)tb_area： 每个行政区的经纬度坐标信息
*/
private final String WEB_API_URL = "https://restapi.amap.com/v3/config/district?keywords={adcode}&subdistrict=0&extensions=all&key=你的key";
@Autowired
private HttpClient http;
@Autowired
private ProvinceDao provinceDao;
@Autowired
private CityDao cityDao;
@Autowired
private DistrictDao districtDao;
@Autowired
private AreaDao areaDao;
// 建立全国行政区信息
private void writeProvinceInfo() {
var url = "https://restapi.amap.com/v3/config/district?keywords=100000&subdistrict=3&key=你的key";
var result = this.http.doGet(url);
var jsonObj = JSON.parseObject(result);
var webApiResults = JSON.parseArray(jsonObj.get("districts").toString(), WebAPIResult.class);
// 省级
var provinces = webApiResults.get(0).getDistricts();
for (var province : provinces) {
System.out.println(province);
if (this.provinceDao.isExist(province.getAdcode()) == 0) {
var p = new ProvinceEntity();
p.setName(province.getName());
p.setCenter(province.getCenter());
p.setAdcode(province.getAdcode());
this.provinceDao.add(p);
}
// 市级
var cities = province.getDistricts();
for (var city : cities) {
System.out.println(city);
if (this.cityDao.isExist(city.getAdcode()) == 0) {
System.out.println("添加");
var c = new CityEntity();
c.setName(city.getName());
c.setCenter(city.getCenter());
c.setCitycode(city.getCitycode());
c.setAdcode(city.getAdcode());
c.setPadcode(province.getAdcode());
this.cityDao.add(c);
}
// 区级
var districts = city.getDistricts();
for (var district : districts) {
System.out.println(district);
if (this.districtDao.isExist(district.getAdcode()) == 0) {
System.out.println("添加");
var d = new DistrictEntity();
d.setName(district.getName());
d.setCenter(district.getCenter());
d.setCitycode(district.getCitycode());
d.setAdcode(district.getAdcode());
d.setPadcode(city.getAdcode());
this.districtDao.add(d);
}
}
}
}
System.out.println("finish!");
}
// 建立省级行政区坐标信息
private void writeProvinceArea() {
var provinces = this.provinceDao.getAll();
for (var province : provinces) {
if (this.areaDao.isExist(province.getAdcode()) == 0) {
this.getAreaAndInsert(province.getAdcode());
}
}
System.out.println("finish!");
}
// 建立市级行政区坐标信息
private void writeCityArea() {
var cities = this.cityDao.getAll();
for (var city : cities) {
if (this.areaDao.isExist(city.getAdcode()) == 0) {
this.getAreaAndInsert(city.getAdcode());
}
}
System.out.println("finish!");
}
// 建立区级行政区坐标信息
private void writeDistrictArea() {
var districts = this.districtDao.getAll();
for (var district : districts) {
if (this.areaDao.isExist(district.getAdcode()) == 0) {
this.getAreaAndInsert(district.getAdcode());
}
}
System.out.println("finish!");
}
private void getAreaAndInsert(String adcode) {
System.out.println(adcode);
var url = this.WEB_API_URL.replaceAll("\{adcode\}", adcode);
var isFinish = false;
var result = this.http.doGet(url);
if (result != null) {
try {
var jsonObj = JSON.parseObject(result);
var webApiResults = JSON.parseArray(jsonObj.get("districts").toString(), WebAPIResult.class);
var line = webApiResults.get(0).getPolyline();
var code = webApiResults.get(0).getAdcode();
var area = new AreaEntity();
area.setAdcode(code);
area.setPolyline(line);
this.areaDao.add(area);
isFinish = true;
} catch (Exception e) {
e.printStackTrace();
}
}
if (!isFinish) {
System.out.println(adcode + "重新查询");
try {
Thread.sleep(5000);
this.getAreaAndInsert(adcode);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
上述代码已经做好注释，大致方法也已经了解下，接下来就是对代码里面有需要的地方进行一个详细解析：
- HTTP 模块：
private HttpClient http;
本项目使用 okhttp3 访问高德地图 API ，此处的 HttpClient 为封装好的 okhttp3 方法模块，可以直接调用其方法。具体代码可在 git 中查看。
- 获取并存储全国行政区信息：
private void writeProvinceInfo()
该方法内部有一个三层的 for 循环，在该方法定义的 API 地址中可以看到两个字段： keywords=100000 subdistrict=3，其作用为直接获取全国下三级行政区，即一次性获取省市区这三个级别的行政区信息，然后通过三个 for 循环解析存库。
- 获取并存储各个行政区坐标信息：
private void writeProvinceArea()、private void writeCityArea()、private void writeDistrictArea()
该步骤为分别获取省市区三个表中的行政区信息，通过高德地图 API 获取各个行政区的坐标信息，存到 tb_area 表中。其中 private void getAreaAndInsert(String adcode) 该方法为访问 API 获取坐标信息的实际方法，因为需要访问上千次 API ，中途难免会遇到出错，故单独将 API 访问方法封装出来，若访问失败可以进行递归重新访问，以保证所有 API 访问全部成功。
代码执行
写一个类，用于在 springboot 启动时来执行上述代码：
@Component
@Order(1)
public class Init implements ApplicationRunner {
@Autowired
private ApiGetFunc apiGetFunc;
@Override
public void run(ApplicationArguments args) throws Exception {
new Thread(() -> {
// 全国行政区信息
this.apiGetFunc.writeProvinceInfo();
// 省市区各个行政区坐标
this.apiGetFunc.writeProvinceArea();
this.apiGetFunc.writeCityArea();
this.apiGetFunc.writeDistrictArea();
}).start();
}
}
步骤就是先获取全国行政区信息，然后依次获取各个行政区的经纬度信息。
代码运行后，可以看到控制台有相关的打印信息了，现在就耐心等它完成：
遇到错误也会自动重新获取：
同时也可以看到数据库在逐渐变大：
存库结果
代码执行完成后，可以看到数据库的四个表都有对应的数据了：
记得注释相关代码，数据库建立完成后，这一块就不再使用了。
数据查询
接口定义
根据文章开头的效果编写查询接口：
@CrossOrigin
@RestController
@RequestMapping("/query")
public class QueryController {
@Autowired
private QueryService queryService;
@RequestMapping(value = "/getAllProvinces", method = RequestMethod.GET)
@ResponseBody
private RESTfulResult<List<ProvinceEntity>> getAllProvinces() {
var result = new RESTfulResult<List<ProvinceEntity>>();
var data = this.queryService.getAllProvinces();
result.setData(data);
result.setCode(200);
result.setSuccess(true);
return result;
}
@RequestMapping(value = "/getCitiesByProvinceAdcode", method = RequestMethod.GET)
@ResponseBody
private RESTfulResult<List<CityEntity>> getCitiesByProvinceAdcode(@RequestParam("adcode") String adcode) {
var result = new RESTfulResult<List<CityEntity>>();
var data = this.queryService.getCitiesByProvinceAdcode(adcode);
result.setData(data);
result.setCode(200);
result.setSuccess(true);
return result;
}
@RequestMapping(value = "/getDistrictsByCityAdcode", method = RequestMethod.GET)
@ResponseBody
private RESTfulResult<List<DistrictEntity>> getDistrictsByCityAdcode(@RequestParam("adcode") String adcode) {
var result = new RESTfulResult<List<DistrictEntity>>();
var data = this.queryService.getDistrictsByCityAdcode(adcode);
result.setData(data);
result.setCode(200);
result.setSuccess(true);
return result;
}
@RequestMapping(value = "/getAreaByAdcode", method = RequestMethod.GET)
@ResponseBody
private RESTfulResult<AreaEntity> getAreaByAdcode(@RequestParam("adcode") String adcode) {
var result = new RESTfulResult<AreaEntity>();
var data = this.queryService.getAreaByAdcode(adcode);
result.setData(data);
result.setCode(200);
result.setSuccess(true);
return result;
}
}
@Slf4j
@ControllerAdvice
public class ControllerExceptionHandler {
@ResponseBody
@ExceptionHandler(Exception.class)
public RESTfulResult<?> handleException(Exception e) {
log.error("Controller error:", e);
var result = new RESTfulResult<>();
result.setCode(500);
result.setMessage(e.getMessage());
result.setSuccess(false);
return result;
}
}
Service 层和 Dao 层就不做详细展示了，具体可以看详细代码。根据 Controller 中的各个接口已经能够知道它们的作用了。
接口请求
在 postman 中请求上述接口，可以看到如下返回值：
获取所有省级行政区：
localhost:8001/query/getAllProvinces
根据省级行政区代码获取下属市级行政区：
localhost:8001/query/getCitiesByProvinceAdcode?adcode=420000
根据市级行政区代码获取下属区级行政区：
localhost:8001/query/getDistrictsByCityAdcode?adcode=420100
前端展示
做好接口后，就可以在前端进行访问了。前端使用 antd 组件库，地图使用 openlayers ，用三个框架各写一个。具体代码搭建过程就不在此处展示了。
以 Angular 为例，效果如下图所示。 React 与 Vue 效果也相同。
下面就只展示各框架中主要页面代码部分，具体完整代码可在 git 上查看：
地图部分
地图使用开源地图框架 openlayers ，这个是作者在工作中使用了五年多的地图框架，做过大量二维地图业务，在此抽出其中一部分最为核心的地图封装，放在文章中展示（由于本文需求简单，只做了最基础的封装）。同时此处的地图代码是和前端框架无关的，换句话说就是业务与框架分离，业务代码不受框架影响。完整代码见 git 。
map-base.ts
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { Vector as VectorSource, XYZ } from 'ol/source';
import { fromLonLat } from "ol/proj";
import { DragPan, DragZoom, KeyboardPan, KeyboardZoom, MouseWheelZoom, PinchZoom } from "ol/interaction";
import { ScaleLine, Zoom } from "ol/control";
import { Vector as VectorLayer } from "ol/layer";
export class MapBase {
private mapObj!: Map;
public getOlMap = () => this.mapObj;
// 图层名字
public readonly drawLayerName: string = 'vector-draw';
constructor(
private dom: HTMLDivElement,
) {
this.initMap();
}
/** 生成地图 */
private initMap(): void {
let mapLayers = [];
// XYZ
let tileLayer = new TileLayer({
source: new XYZ({
url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8',
}),
zIndex: 0,
});
mapLayers.push(tileLayer);
// 绘制层
let vectorDrawLayer = new VectorLayer({
source: new VectorSource(),
zIndex: 10,
});
vectorDrawLayer.setProperties({ 'name': this.drawLayerName });
mapLayers.push(vectorDrawLayer);
/** 实例化地图 */
this.mapObj = new Map({
target: this.dom,
layers: mapLayers,
view: new View({
projection: 'EPSG:3857',
center: fromLonLat([105.203317, 37.506176]),
zoom: 4,
maxZoom: 21,
minZoom: 0
}),
interactions: [
new DragPan(),
new PinchZoom(),
new KeyboardPan(),
new KeyboardZoom(),
new MouseWheelZoom(),
new DragZoom(),
],
controls: [
new Zoom(),
new ScaleLine(),
]
});
}
/** 根据name获取图层 */
getVectorLayerByName(name: string): VectorLayer<any> | null {
if (this.mapObj == null) {
return null;
}
let layers = this.mapObj.getLayers().getArray();
for (let i = 0; i < layers.length; i++) {
if (name == layers[i].getProperties()['name']) {
return <VectorLayer<any>>layers[i];
}
}
return null;
}
}
map-draw.ts
import { Point } from "./point";
import { fromLonLat } from "ol/proj";
import { Polygon } from "ol/geom";
import { Feature } from "ol";
import { Fill, Stroke, Style } from "ol/style";
export class MapDraw {
private static polygonFillColor = 'rgba(50, 138, 288, 0.3)';
private static polygonStrokeColor = 'rgba(0, 90, 200, 1)';
/** 新建多边形Feature */
public static createPolygonFeature(points: Array<Point>): Feature<Polygon> {
let pts = [];
for (let i = 0; i < points.length; i++) {
pts.push(fromLonLat([points[i].lng, points[i].lat]));
}
let polygon = new Polygon([pts]);
let feature = new Feature({ geometry: polygon });
let style = new Style({
stroke: new Stroke({
color: this.polygonStrokeColor,
width: 3
}),
fill: new Fill({
color: this.polygonFillColor,
}),
});
feature.setStyle(style);
return feature;
}
}
Angular
<div class="selector">
<nz-select [(ngModel)]="provinceValue" [nzLoading]="provinceLoading" (ngModelChange)="getCityList($event)">
<nz-option *ngFor="let province of provinceList" [nzLabel]="province.name" [nzValue]="province.adcode">
</nz-option>
</nz-select>
<nz-select [(ngModel)]="cityValue" [nzLoading]="cityLoading" (ngModelChange)="getDistrictList($event)">
<nz-option *ngFor="let city of cityList" [nzLabel]="city.name" [nzValue]="city.adcode">
</nz-option>
</nz-select>
<nz-select [(ngModel)]="districtValue" [nzLoading]="districtLoading">
<nz-option *ngFor="let district of districtList" [nzLabel]="district.name" [nzValue]="district.adcode">
</nz-option>
</nz-select>
<button nz-button nzType="primary" [nzLoading]="areaLoading" (click)="showAreaOnMap()">查看</button>
</div>
<div class="map" #map></div>
.selector {
margin: 48px;
nz-select {
margin-right: 12px;
width: 200px;
}
}
.map {
margin: 48px;
width: 800px;
height: 600px;
}
@Component({
selector: 'app-container',
templateUrl: './container.component.html',
styleUrls: ['./container.component.less'],
providers: [QueryService]
})
export class ContainerComponent implements OnInit {
@ViewChild('map', { static: true }) mapEleRef!: ElementRef<HTMLDivElement>;
private mapBase!: MapBase;
provinceLoading: boolean = false;
provinceList: Array<ProvinceType> = [];
provinceValue: string = '100000';
cityLoading: boolean = false;
cityList: Array<CityType> = [];
cityValue: string | null = null;
districtLoading: boolean = false;
districtList: Array<DistrictType> = [];
districtValue: string | null = null;
areaLoading: boolean = false;
constructor(
private queryService: QueryService,
) {
}
ngOnInit(): void {
this.mapBase = new MapBase(this.mapEleRef.nativeElement);
this.getProvinceList();
}
getProvinceList(): void {
// 重置
this.provinceList = [];
this.provinceValue = '100000';
this.cityList = [];
this.cityValue = null;
this.districtList = [];
this.districtValue = null;
// 查询
this.provinceLoading = true;
this.queryService.getAllProvinces().then((res) => {
this.provinceLoading = false;
this.provinceList = res.data;
});
}
getCityList(adcode: string): void {
// 重置
this.cityList = [];
this.cityValue = null;
this.districtList = [];
this.districtValue = null;
// 查询
this.cityLoading = true;
this.queryService.getCitiesByProvinceAdcode({ adcode: adcode }).then((res) => {
this.cityLoading = false;
this.cityList = res.data;
});
}
getDistrictList(adcode: string): void {
// 重置
this.districtList = [];
this.districtValue = null;
// 查询
this.districtLoading = true;
this.queryService.getDistrictsByCityAdcode({ adcode: adcode }).then((res) => {
this.districtLoading = false;
this.districtList = res.data;
});
}
showAreaOnMap(): void {
let adcode = this.districtValue || this.cityValue || this.provinceValue;
this.areaLoading = true;
setTimeout(() => {
this.queryService.getAreaByAdcode({ adcode: adcode }).then((res) => {
this.areaLoading = false;
this.draw(res.data.polyline)
});
}, 500);
}
draw(polyline: string): void {
MapWrap.removeAllFeatures(this.mapBase, this.mapBase.drawLayerName);
let features: Array<Feature> = [];
let blocks = polyline.split('|');
blocks.forEach((block) => {
let points = block.split(';');
let polygon: Array<Point> = [];
points.forEach((point) => {
let p = point.split(',');
polygon.push(new Point(Number(p[0]), Number(p[1])));
});
let feature = MapDraw.createPolygonFeature(polygon);
features.push(feature);
MapWrap.addFeature(this.mapBase, this.mapBase.drawLayerName, feature);
});
MapWrap.setFitViewByFeatures({
map: this.mapBase,
features: features,
padding: [32, 32, 32, 32]
});
}
}
React
.selector {
margin: 48px;
}
.each {
margin-right: 12px;
width: 200px;
}
.map {
margin: 48px;
width: 800px;
height: 600px;
}
const ContainerComponent: React.FC = () => {
const mapEleRef = useRef<HTMLDivElement>(null);
const mapBase = useRef<MapBase>();
const [provinceLoading, setProvinceLoading] = useState<boolean>(false);
const [provinceList, setProvinceList] = useState<Array<ProvinceType>>([]);
const [provinceValue, setProvinceValue] = useState<string>('100000');
const [cityLoading, setCityLoading] = useState<boolean>(false);
const [cityList, setCityList] = useState<Array<CityType>>([]);
const [cityValue, setCityValue] = useState<string | null>(null);
const [districtLoading, setDistrictLoading] = useState<boolean>(false);
const [districtList, setDistrictList] = useState<Array<DistrictType>>([]);
const [districtValue, setDistrictValue] = useState<string | null>(null);
const [areaLoading, setAreaLoading] = useState<boolean>(false);
const getProvinceList = (): void => {
// 重置
setProvinceList([]);
setProvinceValue('100000');
setCityList([]);
setCityValue(null);
setDistrictList([]);
setDistrictValue(null);
// 查询
setProvinceLoading(true);
QueryService.getAllProvinces().then((res) => {
setProvinceLoading(false);
setProvinceList(res.data);
});
}
const getCityList = (adcode: string): void => {
// 重置
setCityList([]);
setCityValue(null);
setDistrictList([]);
setDistrictValue(null);
// 查询
setCityLoading(true);
QueryService.getCitiesByProvinceAdcode({adcode: adcode}).then((res) => {
setCityLoading(false);
setCityList(res.data);
});
}
const getDistrictList = (adcode: string): void => {
// 重置
setDistrictList([]);
setDistrictValue(null);
// 查询
setDistrictLoading(true);
QueryService.getDistrictsByCityAdcode({adcode: adcode}).then((res) => {
setDistrictLoading(false);
setDistrictList(res.data);
});
}
const showAreaOnMap = (): void => {
let adcode = districtValue || cityValue || provinceValue;
setAreaLoading(true);
setTimeout(() => {
QueryService.getAreaByAdcode({adcode: adcode}).then((res) => {
setAreaLoading(false);
draw(res.data.polyline);
});
}, 500);
}
const draw = (polyline: string): void => {
if (mapBase.current == null) {
return;
}
MapWrap.removeAllFeatures(mapBase.current, mapBase.current.drawLayerName);
let features: Array<Feature> = [];
let blocks = polyline.split('|');
blocks.forEach((block) => {
let points = block.split(';');
let polygon: Array<Point> = [];
points.forEach((point) => {
let p = point.split(',');
polygon.push(new Point(Number(p[0]), Number(p[1])));
});
let feature = MapDraw.createPolygonFeature(polygon);
features.push(feature);
mapBase.current && MapWrap.addFeature(mapBase.current, mapBase.current.drawLayerName, feature);
});
MapWrap.setFitViewByFeatures({
map: mapBase.current,
features: features,
padding: [32, 32, 32, 32]
});
}
useEffect(() => {
if (mapEleRef.current != null && mapBase.current == null) {
mapBase.current = new MapBase(mapEleRef.current);
}
getProvinceList();
}, []);
return (
<>
<Space wrap className={"selector"}>
<Select
className={"each"}
loading={provinceLoading}
onChange={(e) => {
setProvinceValue(e);
getCityList(e);
}}
defaultValue={provinceValue}
options={provinceList.map((province) => ({label: province.name, value: province.adcode}))}
/>
<Select
className={"each"}
loading={cityLoading}
onChange={(e) => {
setCityValue(e);
getDistrictList(e);
}}
defaultValue={cityValue}
options={cityList.map((city) => ({label: city.name, value: city.adcode}))}
/>
<Select
className={"each"}
loading={districtLoading}
onChange={(e) => {
setDistrictValue(e);
}}
defaultValue={districtValue}
options={districtList.map((district) => ({label: district.name, value: district.adcode}))}
/>
<Button type="primary" loading={areaLoading} onClick={() => showAreaOnMap()}>查看</Button>
</Space>
<div className={"map"} ref={mapEleRef}></div>
</>
);
}
export default ContainerComponent;
Vue
<style lang="css" scoped src="./container.component.css"></style>
<template>
<div class="selector">
<a-select class="each"
v-model:value="provinceValue"
:loading="provinceLoading"
:options="provinceList.map(province => ({ label: province.name, value: province.adcode }))"
@change="getCityList">
</a-select>
<a-select class="each"
v-model:value="cityValue"
:loading="cityLoading"
:options="cityList.map(city => ({ label: city.name, value: city.adcode }))"
@change="getDistrictList">
</a-select>
<a-select class="each"
v-model:value="districtValue"
:loading="districtLoading"
:options="districtList.map(district => ({ label: district.name, value: district.adcode }))">
</a-select>
<a-button type="primary" :loading="areaLoading" @click="showAreaOnMap()">查看</a-button>
</div>
<div class="map" ref="mapEleRef"></div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import type { Feature } from "ol";
import type { ProvinceType } from "@/model/province.type";
import type { CityType } from "@/model/city.type";
import type { DistrictType } from "@/model/district.type";
import { QueryService } from "@/service/query.service";
import { MapBase } from "@/map/map-base";
import { MapWrap } from "@/map/map-wrap";
import { Point } from "@/map/point";
import { MapDraw } from "@/map/map-draw";
export default defineComponent({
name: 'ContainerComponent',
setup() {
let mapBase!: MapBase;
const state = reactive<{
provinceLoading: boolean, provinceList: Array<ProvinceType>, provinceValue: string,
cityLoading: boolean, cityList: Array<CityType>, cityValue: string | null,
districtLoading: boolean, districtList: Array<DistrictType>, districtValue: string | null,
areaLoading: boolean,
}>({
// 省
provinceLoading: false,
provinceList: [],
provinceValue: '100000',
// 市
cityLoading: false,
cityList: [],
cityValue: null,
// 区
districtLoading: false,
districtList: [],
districtValue: null,
//
areaLoading: false,
});
return {
mapBase,
...toRefs(state),
};
},
methods: {
getProvinceList(): void {
// 重置
this.provinceList = [];
this.provinceValue = '100000';
this.cityList = [];
this.cityValue = null;
this.districtList = [];
this.districtValue = null;
// 查询
this.provinceLoading = true;
QueryService.getAllProvinces().then((res) => {
this.provinceLoading = false;
this.provinceList = res.data;
});
},
getCityList(adcode: string): void {
// 重置
this.cityList = [];
this.cityValue = null;
this.districtList = [];
this.districtValue = null;
// 查询
this.cityLoading = true;
QueryService.getCitiesByProvinceAdcode({ adcode: adcode }).then((res) => {
this.cityLoading = false;
this.cityList = res.data;
});
},
getDistrictList(adcode: string): void {
// 重置
this.districtList = [];
this.districtValue = null;
// 查询
this.districtLoading = true;
QueryService.getDistrictsByCityAdcode({ adcode: adcode }).then((res) => {
this.districtLoading = false;
this.districtList = res.data;
});
},
showAreaOnMap(): void {
let adcode = this.districtValue || this.cityValue || this.provinceValue;
this.areaLoading = true;
setTimeout(() => {
QueryService.getAreaByAdcode({ adcode: adcode }).then((res) => {
this.areaLoading = false;
this.draw(res.data.polyline)
});
}, 500);
},
draw(polyline: string): void {
MapWrap.removeAllFeatures(this.mapBase, this.mapBase.drawLayerName);
let features: Array<Feature> = [];
let blocks = polyline.split('|');
blocks.forEach((block) => {
let points = block.split(';');
let polygon: Array<Point> = [];
points.forEach((point) => {
let p = point.split(',');
polygon.push(new Point(Number(p[0]), Number(p[1])));
});
let feature = MapDraw.createPolygonFeature(polygon);
features.push(feature);
MapWrap.addFeature(this.mapBase, this.mapBase.drawLayerName, feature);
});
MapWrap.setFitViewByFeatures({
map: this.mapBase,
features: features,
padding: [32, 32, 32, 32]
});
}
},
created() {
this.getProvinceList();
},
mounted() {
this.mapBase = new MapBase(this.$refs.mapEleRef);
}
});
</script>
结束
至此行政区域查询完整业务就做完了。附上本文教程的完整代码：
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
