数据可视化学习@Openlayers与Vue结合

说明：一般的数据可视化，用不上地图，但是如果有相应的需求，Openlayers是一个很不错的选择，后面还可以与Cesium 结合，做二三维一体化。

1、安装OpenLayers

npm i ol

2、代码

<template>

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

</template>

<script>

    import "ol/ol.css";
    import Map from 'ol/Map';
    import View from 'ol/View';
    import TileLayer from 'ol/layer/Tile';
    import OSM from "ol/source/OSM";

    export default {
        name: "openlayersIndex",
        data() {
            return {
                map: null,
            }
        },
        mounted() {
            this.initMap();
        },
        methods: {
            initMap: function () {
                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,

                    }),
                });
            }
        }
    }
</script>

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

以上所有代码都可以在Gitee中下载

gitee.com/maquebi/stu…