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

最新推荐文章于 2025-10-11 16:20:21 发布

原创

最新推荐文章于 2025-10-11 16:20:21 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文介绍了一种使用OpenLayers加载特定区域（如中国、陕西、西安）的本地数据及通过高德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}'
                //     }),