Vue+OpenLayers省份高亮【三】

原创

已于 2024-12-10 09:30:20 修改 · 926 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2021-08-02 14:30:16 首次发布

本文介绍如何利用province.json文件中的地理数据，在Vue.js应用中实现中国各省份的地理轮廓绘制，并通过不同颜色填充来区分各个省份。该示例采用OpenLayers库进行地图展示，包括设置图层、配置视图投影、中心点坐标及缩放级别。

areaGeo数据地址： province.json-其它文档类资源-优快云下载

<template>
    <div id="map" ref="map"></div>
</template>

<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { Map, View } from "ol";
import areaGeo from "../json/province.json";
import Feature from "ol/Feature";
import { Polygon, MultiPolygon } from "ol/geom";
import { Style, Stroke, Fill } from "ol/style";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";

export default {
    data() {
        return {
            map: null,
			colorList: [
                // 蓝色
                {
                    fillCo