全国地图钻取（openlayers6+高德地图api行政区划）

1、用的是两种方式加载行政范围：全国、陕西、西安用的是本地数据，其他各区域用的是高德行政区划数据。
2、用高德的web服务——行政区划，需要先申请key，个人账户每天可调用3000次。
3、效果如下：

4、完整代码。

<!--* @Author: yangxiunan* @Date: 2020-10-20 17:06:42* @LastEditTime: 2020-10-27 10:20:26* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \cesium-city3dd:\myCode\ol6\src\components\loadJson.vue
-->
<template>
<div class="box"><div id="map" class="map"></div><div id="bread"><span v-for="item of breadData" :key = "item.code" @click="changeCity(item.code,item.level)">{{item.name}}</span></div>
</div>
</template>
<script>
/* eslint-disable */
import $ from '@/assets/js/jquery-3.5.1.min.js';
import chinaData from '@/assets/data/china_outline.json';
import shanxiData from '@/assets/data/shanxi_outline.json';
import xianData from '@/assets/data/xian_outline.json';
import administrationData from "@/assets/data/administration.json"
import "ol/ol.css";
import Point from 'ol/geom/Point';
import Circle from "ol/geom/Circle";
import LineString from 'ol/geom/LineString';
import Polygon from 'ol/geom/Polygon';
import Feature from "ol/Feature";
import GeoJSON from "ol/format/GeoJSON";
import Map from "ol/Map";
import View from "ol/View";
import XYZ from 'ol/source/XYZ';
import { Circle as CircleStyle, Fill, Stroke, Style, Icon, Text} from "ol/style";
import { OSM, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
export default {data(){return {breadData:[{name:"中国",code:"100000",level:"country"},]}},mounted() {this.vectorLayer = new VectorLayer({source: new VectorSource(),});var map = new Map({layers: [// new TileLayer({//   source:new XYZ({//      url: 'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'//     }),// }),this.vectorLayer,],target: "map",view: new View({center: [108.946994,34.261361],zoom: 10,projection: "EPSG:4326"}),});this.map = map;// 默认加载中国this.loadFeatures(chinaData);map.on('click', evt => {this.vectorLayer.getFeatures(evt.pixel).then( features => {var feature = features.length ? features[0] : undefined;console.log(feature);if (feature === undefined) return;let properties = feature.getProperties();let code = properties.code;if(code){this.loadFeatureByCode(code, true, properties);}})});},methods:{// 用高德获取该区域数据并加载在地图上getGaodeData(city){$.ajax({dataType:'jsonp',url:`https://restapi.amap.com/v3/config/district?keywords=${city}&subdistrict=3&extensions=all&key=您的key`,## 标题success:res => {console.log("高德",res);let response = res.districts[0];let center = response.center;let code = response.adcode;center = center.split(",");let name = response.name;let level = response.level;let data=response.polyline;data = data.split("|");data.forEach(polyline=>{polyline = polyline.split(";");let polygon =[];polyline.forEach(item => {let point = item.split(",");polygon.push(point);})let feature = new Feature({geometry:new Polygon([polygon]),name: name,code: code,level: level})feature.setStyle(this.polygonStyle());this.vectorLayer.getSource().addFeature(feature);})this.loadPoint(center, name);this.fitLayer(this.vectorLayer);}})},loadFeatureByCode(code,flag = false ,properties = {}){let obj = null;if(code === "100000"){ //中国this.loadFeatures(chinaData);}else if(code === "610000"){ //陕西this.loadFeatures(shanxiData);obj = {name:"陕西省",code:"610000",level:"province",}}else if(code === "610100"){ //西安市this.loadFeatures(xianData);obj = {name:"西安市",code:"610100",level:"city",}}else{let codes = this.getChildrenCode(code);// 县级没有下级节点if(codes.length>0){this.clearLayer(this.vectorLayer);let codes = this.getChildrenCode(code);codes.forEach(code => {this.getGaodeData(code);})obj = {name:properties.name,code:properties.code,level:properties.level,}}}if(flag && obj){this.breadData.push(obj);}},// 加载featuresloadFeatures(data){this.clearLayer(this.vectorLayer);let features = [];data.forEach(item => {let feature = new Feature({geometry: new Polygon(item.coordinates),name: item.name,center: item.center,code: item.code,level: item.level});feature.setStyle(this.polygonStyle());features.push(feature);this.loadPoint(item.center, item.name);})this.vectorLayer.getSource().addFeatures(features);this.fitLayer(this.vectorLayer);},// 加载地名和点loadPoint(point,text){let feature = new Feature({geometry: new Point(point),});feature.setStyle(new Style({text: new Text({text: text,stroke:new Stroke({color: 'rgba(29,233,182,0)',}),fill:new Fill({color: 'rgba(29,233,182,1)'}),textAlign: 'center',textBaseline: 'bottom',}),}))this.vectorLayer.getSource().addFeature(feature);},// 清除图层clearLayer(layer){layer.getSource().clear();},// 地图自适应图层所在元素的范围fitLayer(layer){let extent = layer.getSource().getExtent();this.map.getView().fit(extent);},// polygon样式polygonStyle(){return new Style({stroke:new Stroke({color:`rgba(3,199,213,1)`,width:1,}),fill:new Fill({color:`rgba(19,44,71,1)`,})})},// 获取该城市下级城市codegetChildrenCode(code){let result = [];administrationData.forEach(item => {if(item.code === code){if(item.children.length>0){result = item.children;}return;}item.children.forEach(v => {if(v.code === code){if(v.children.length>0){result = v.children;}return;}})}) let codes=[];result.forEach(value => {codes.push(value.code);})return codes;},// 根据城市编码，切换地图changeCity(code,level){if(level === "country"){this.breadData = this.breadData.slice(0,1);}else if(level === "province"){this.breadData = this.breadData.slice(0,2);}else if(level === "city"){this.breadData = this.breadData.slice(0,3);}this.loadFeatureByCode(code);},},
};
</script>
<style lang="less" scoped>
.box{width: 100%;height: 100%;position: relative;background: rgba(9,15,39,1);#bread{color: #fff;position: absolute;top: 10px;left: 50px;span{padding:0 3px;cursor: pointer;&:after{display: inline-block;content:"";width:8px;height: 8px;border-top:1px solid #fff;border-right:1px solid #fff;transform: rotate(45deg);}&:last-child{&:after{display: none;}}}}#map {width: 100%;height: 100%;}
}</style>

4、相关文件
@/assets/data/china_outline.json
@/assets/data/shanxi_outline.json
@/assets/data/xian_outline.json
@/assets/data/administration.json

全国地图钻取（openlayers6+高德地图api行政区划）相关推荐

项目 - Web地图开发【高德地图API】(一)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
项目 - Web地图开发【高德地图API】(二)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
java 地图坐标转换_百度地图坐标和高德地图坐标转换代码 Java实现
最近做项目需要百度地图坐标转换到高德地图坐标,高德官方也给出了转换接口(百度地图也给出了转换接口) http://lbs.amap.com/api/javascript-api/reference/l ...
js 跳转到指定位置高德地图_JS引入高德地图定位
在此记录一下X项目使用高德地图的思路高德地图(X项目前端框架是Jquery) 2准备工作(封装方法,以便直接调用) -2.2封装超时方法($.timeOut-参考) -2.3封装异步调用地图的方法 / ...
高德地图学习---在高德地图图层上使用google的卫星图
公司要做一个项目要用到卫星图,但是高德地图提供的卫星图有很多地方由于权限问题还有等等一系列问题是显示不全的,拉到比较偏远的地方就显示不了了,而且清晰度也不够,研究了一下并且在网上查看了好多文章之后发现 ...
报表中能实现中国地图钻取到各省地图吗？
地图类问题,目前 echarts 做的比较专业,设置起来还比较灵活,找一个支持 echarts 的报表工具就可以,在报表中处理数据,然后将数据注入 echarts 图用来展示,在 echarts 里可 ...
html调用高德地图得到城市,高德地图API获取行政区域
高德地图API提供的行政区划查询,可以获取到行政区域的区号.城市编码.中心点.边界.下辖区域的详细信息.基于该工具进行扩展,对边界数据做转换处理,保存为GeoJson格式文件,方便使用.现已可以单个城 ...
java实现高德地图app_入门指南-高德地图手机版 | 高德地图API
Android 端如果您需要在浏览器中打开高德地图App,例如在H5页面中跳转到高德地图App,或者在本地App中加载的H5页面跳转到高德地图App,需要使用scheme调用,在H5中的链接中加入高 ...
js 跳转到指定位置高德地图_第三方高德地图Javascript API
1. 申请JSAPI的开发者Key : http://lbs.amap.com/dev/key 2. 引入高德地图JSAPI文件: AMap.Scale // 地图的比例因子 / ...
python 根据经纬度调取和显示地图_Python调用高德地图API实现经纬度换算、地图可视化-站长资讯中心...
目前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请 ...

全国地图钻取（openlayers6+高德地图api行政区划）

全国地图钻取（openlayers6+高德地图api行政区划）相关推荐

最新文章

热门文章