Vue+OpenLayers省份高亮【三】

原创已于 2024-12-10 09:30:20 修改 · 885 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

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

OpenLayers 专栏收录该内容

5 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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: [
                // 蓝色
                {
                    fillColor: "#4e98f444",
                    strokeColor: [71, 137, 227, 1],
                },
                // 红色
                {
                    fillColor: "#DF002944",
                    strokeColor: [223, 0, 41, 1],
                },
                // 橘色
                {
                    fillColor: "#EC870E44",
                    strokeColor: [236, 135, 14, 1],
                },
                // 黄色
                {
                    fillColor: "#F9F40044",
                    strokeColor: [249, 244, 0, 1],
                },
                // 绿色
                {
                    fillColor: "#5BBD2B44",
                    strokeColor: [91, 189, 43, 1],
                },
                // 青色
                {
                    fillColor: "#00B2BF44",
                    strokeColor: [0, 178, 191, 1],
                },
                // 紫色
                {
                    fillColor: "#635BA244",
                    strokeColor: [99, 91, 162, 1],
                },
            ],
        };
    },
    created() {},
    mounted() {
        this.initMap();
    },
    methods: {
        // 设置区域
        addArea(geo = []) {
            if (geo.length == 0) {
                return false;
            }
            let features = [];
            geo.forEach((g) => {
                let lightArr = [
                    g.features[12],
                    g.features[22],
                    g.features[30],
                    g.features[2],
                    g.features[4],
                    g.features[5],
                    g.features[16],
                ];
                lightArr.forEach((item, index) => {
                    let lineData3 = item;
                    let routeFeature3 = "";
                    if (lineData3.geometry.type == "MultiPolygon") {
                        routeFeature3 = new Feature({
                            geometry:
                            new MultiPolygon(lineData3.geometry.coordinates),
                        });
                    } else if (lineData3.geometry.type == "Polygon") {
                        routeFeature3 = new Feature({
                            geometry:
                            new Polygon(lineData3.geometry.coordinates),
                        });
                    }
                    routeFeature3.setStyle(
                        new Style({
                            fill: new Fill({
 	                            //填充颜色
                                color: this.colorList[index].fillColor,
                            }),
                            stroke: new Stroke({
                                 //边界宽度
                                width: 3,
                                //边界颜色
                                color: this.colorList[index].strokeColor, 
                            }),
                        })
                    );
                    features.push(routeFeature3);
                });
            });
            // 设置图层
            let routeLayer = new VectorLayer({
                source: new VectorSource({
                    features: features,
                }),
            });
            // 添加图层
            this.map.addLayer(routeLayer);
        },
        // 初始化地图
        initMap() {
            this.map = new Map({
                target: "map", // 指向对象
                layers: [
                    // 图层
                    new TileLayer({
                        // 这里定义的是平铺图层
                        source: new OSM(),
                    }),
                ],
                view: new View({
                    projection: "EPSG:4326",
                    center: [118.792207, 32.133476],
                    zoom: 5,
                }),
            });
            this.addArea(areaGeo);
        },
    },
};
</script>

<style lang="less" scoped>
#map {
    width: 1000px;
    height: 600px;
}
</style>