1.openlayer6.9.0版本整合vue开发环境教程

最新推荐文章于 2024-05-29 22:45:00 发布

小龙三维GIS

最新推荐文章于 2024-05-29 22:45:00 发布

阅读量753

点赞数 1

分类专栏： openlayer 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_34687787/article/details/125966158

版权

openlayer 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

openlayer6.9.0版本整合vue版本配置搭建开发环境，开箱即用

需要项目代码架子可以联系博主

helloworld.vue

<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map,View } from 'ol'
    import OSM from 'ol/source/OSM'
    import TileLayer from 'ol/layer/Tile'
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        mounted() {
            //初始化地图
             new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer ({
                        source: new OSM()//加载OpenStreetMap
                    })
                ],
                 //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection:"EPSG:4326", //指定投影
                    zoom: 12   //缩放到的级别
                })
            });
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>

main.js

import App from './App.vue'
import router from './router'
import Vue from 'vue/dist/vue.js';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "./common/css/reset.css"
import 'ol/ol.css' /*引入openlayers公共样式*/
Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
    el: '#app',
    router,
    components: {App},
    template: '<App/>',
})

index.vue

<template>
    <el-container>
        <el-aside>
            <Navigation/>
        </el-aside>
        <el-main class="data-main">
            <router-view/>
        </el-main>
    </el-container>
</template>

<script>
    import Navigation from '../navigation/Navigation'

    export default {
        name: "index",
        data() {
            return {
                activeHeader: false,
                navWidth: 64,
                navStyle: {
                    width: "calc(100% - " + this.navWidth + 'px' + ")",
                    height: "100%",
                    marginLeft: +this.navWidth + 'px ',
                }
            }
        },

        components: {
            Navigation,
        },
        mounted() {
        },
        computed: {},
        methods: {}
    }
</script>

<style scoped>
    .el-aside {
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 200px !important;
    }

    .el-container {
        width: 100%;
        height: 100%;
    }

    .el-main {
        width: 100%;
        height: 100%;
        padding: unset;
        margin-left: 200px;
    }

</style>

router.js

import Router from 'vue-router'
import Vue from 'vue/dist/vue.js';
import HelloWorld from '../components/01openlayers入门/HelloWorld'
import MapDesc from '../components/01openlayers入门/MapDesc'
import ViewDesc from '../components/01openlayers入门/ViewDesc'
import ZoomControl from '../components/02openlayes常用控件/ZoomControl'
import BaseOperation from '../components/02openlayes常用控件/BaseOperation'
import LayerControl from '../components/02openlayes常用控件/LayerControl'
import PositionControl from '../components/02openlayes常用控件/PositionControl'
import OverViewControl from '../components/02openlayes常用控件/OverViewControl'
import FullScreenControl from '../components/02openlayes常用控件/FullScreenControl'
import ScaleLineControl from '../components/02openlayes常用控件/ScaleLineControl'
import LayerSearchControl from '../components/02openlayes常用控件/LayerSearchControl'
import AnimateControl from '../components/02openlayes常用控件/AnimateControl'
import MeasureControl from '../components/02openlayes常用控件/MeasureControl'
import ImageLayer from '../components/03openlayers各种数据/影像地图/ImageLayer'
import TileLayer from '../components/03openlayers各种数据/瓦片地图/TileLayer'
import VectorLayer from '../components/03openlayers各种数据/矢量地图/VectorFormatLayer'
import FeatureLayer from '../components/03openlayers各种数据/要素图层/VectorFeatureLayer'
import VectorTileDebug from '../components/03openlayers各种数据/网格信息/VectorTileDebug'
import BaiDuMap from '../components/03openlayers各种数据/百度地图/BaiDuMap'
import GaoDeMap from '../components/03openlayers各种数据/高德地图/GaoDeMap'
import TianDiMap from '../components/03openlayers各种数据/天地图/TianDiMap'
import GoogleMap from '../components/03openlayers各种数据/谷歌地图/GoogleMap'
import BingMap from '../components/03openlayers各种数据/Bing地图/BingMap'
import ArcgisTileLayer from '../components/03openlayers各种数据/ArcGIS/ArcgisTileLayer'
import GeojsonLayer from '../components/03openlayers各种数据/Geojson/GeojsonLayer'
import TopojsonLayer from '../components/03openlayers各种数据/Topojson/TopojsonLayer'
import EsrijsonLayer from '../components/03openlayers各种数据/Esrijson/EsrijsonLayer'
import WktLayer from '../components/03openlayers各种数据/Wkt/WktLayer'
import WkbLayer from '../components/03openlayers各种数据/Wkb/WkbLayer'
import XmlLayer from '../components/03openlayers各种数据/Xml/XmlLayer'
import GmlLayer from '../components/03openlayers各种数据/Gml/GmlLayer'
import KmlLayer from '../components/03openlayers各种数据/Kml/KmlLayer'
import GPXLayer from '../components/03openlayers各种数据/GPX/GPXLayer'
import DrawLayer from '../components/04openlayers地图交互/DrawInteraction'
import ModifyFeature from '../components/04openlayers地图交互/ModifyFeature'
import ModifyInteraction from '../components/04openlayers地图交互/ModifyInteraction'
import TranslateLayer from "../components/04openlayers地图交互/TranslateInteraction";
import MapInteraction from "../components/04openlayers地图交互/MapInteraction";
import SelectInteraction from "../components/04openlayers地图交互/SelectInteraction";
import WMS from '../components/05openlayersOGC服务/WMS'
import WMTS from '../components/05openlayersOGC服务/WMTS'
import WCS from '../components/05openlayersOGC服务/WCS'
import WFS from '../components/05openlayersOGC服务/WFS'
import PictureMarker from '../components/09openlayer高级功能/PictureMarker'
import MultiView from '../components/09openlayer高级功能/MultiView'
import GeoLocation from '../components/09openlayer高级功能/GeoLocation'
import HeatMap from '../components/09openlayer高级功能/HeatMap'
import MilitarySignDrawing from '../components/09openlayer高级功能/MilitarySignDrawing'
import ProjectTransform from '../components/08openlayers投影转换/ProjectTransform'
import ProjectTransformMethod from '../components/08openlayers投影转换/ProjectTransformMethod'
import WebGLTileLayer from '../components/10openlayer之render/webgl/WebGLTileLayer'
import WebGLPointsSpriteLayer from "../components/10openlayer之render/webgl/WebGLPointsSpriteLayer";
import WebGLPostProcessingPassLayer from "../components/10openlayer之render/webgl/WebGLPostProcessingPassLayer";
import WebGLTileStyleLayer from "../components/10openlayer之render/webgl/WebGLTileStyleLayer";
import CanvasPointsSpriteLayer from "../components/10openlayer之render/canvas/CanvasPointsSpriteLayer";
import VectorTileLayer from "../components/03openlayers各种数据/矢量瓦片/VectorTileLayer";
import CanvasTileLayer from "../components/10openlayer之render/canvas/CanvasTileLayer";
import CanvasRendererGeometryLayer from "../components/10openlayer之render/canvas/CanvasRendererGeometryLayer";
import CanvasRendererFeatureLayer from "../components/10openlayer之render/canvas/CanvasRendererImageLayer"
import ProjectMigrationMap from "../components/11openlayers项目实战/echarts/ProjectMigrationMap";
import ProjectScatterDiagram from "../components/11openlayers项目实战/echarts/ProjectScatterDiagram";
import ProjectAirQuality from "../components/11openlayers项目实战/echarts/ProjectAirQuality";
import ProjectOlCesium from "../components/11openlayers项目实战/cesium/ProjectOlCesium";
import ProjectWindLayer from "../components/11openlayers项目实战/wind/ProjectWindLayer";
import FilterBbox from "../components/06openlayers过滤器/FilterBbox";
import PopupWindow from "../components/09openlayer高级功能/PopupWindow";
import ProjectFrontCoverLayer from "../components/11openlayers项目实战/other/ProjectFrontCoverLayer";
import ProjectBackCoverLayer from "../components/11openlayers项目实战/other/ProjectBackCoverLayer";
import ProjectDynamicCircle from "../components/11openlayers项目实战/other/ProjectDynamicCircle";
import ProjectExportLayer from "../components/11openlayers项目实战/other/ProjectExportLayer";
import ProjectExportPDF from "../components/11openlayers项目实战/other/ProjectExportPDF";
import ProjectTrackPlay from "../components/11openlayers项目实战/other/ProjectTrackPlay";
import ProjectLayerSwipe from "../components/11openlayers项目实战/other/ProjectLayerSwipe";
import ProjectGeometryBuffer from "../components/11openlayers项目实战/turf/ProjectGeometryBuffer";
import ProjectGeoServerWFS from "../components/11openlayers项目实战/geoserver/ProjectGeoServerWFS";
import ProjectGeoServerWMS from "../components/11openlayers项目实战/geoserver/ProjectGeoServerWMS";
import ProjectGeoServerWMTS from "../components/11openlayers项目实战/geoserver/ProjectGeoServerWMTS";
import ProjectKriging from "../components/11openlayers项目实战/other/ProjectKriging";
import ProjectIntersectAnalysis from "../components/11openlayers项目实战/turf/ProjectIntersectAnalysis";
import ProjectDifferenceAnalysis from "../components/11openlayers项目实战/turf/ProjectDifferenceAnalysis";
import ProjectUnionAnalysis from "../components/11openlayers项目实战/turf/ProjectUnionAnalysis";
import ProjectDynamicBuffer from "../components/11openlayers项目实战/turf/ProjectDynamicBuffer";
import ExtentInteraction from "../components/04openlayers地图交互/ExtentInteraction";
import SnapInteraction from "../components/04openlayers地图交互/SnapInteraction";
import PointerInteraction from "../components/04openlayers地图交互/PointerInteraction";
import DragBoxInteraction from "../components/04openlayers地图交互/DragBoxInteraction";
import DragPanInteraction from "../components/04openlayers地图交互/DragPanInteraction";
import DragAndDropInteraction from "../components/04openlayers地图交互/DragAndDropInteraction";
import KeyboardPanInteraction from "../components/04openlayers地图交互/KeyboardPanInteraction";
import DragRotateInteraction from "../components/04openlayers地图交互/DragRotateInteraction";
import DragZoomInteraction from "../components/04openlayers地图交互/DragZoomInteraction";
import KeyboardZoomInteraction from "../components/04openlayers地图交互/KeyboardZoomInteraction";
import MouseWheelZoomInteraction from "../components/04openlayers地图交互/MouseWheelZoomInteraction";
import DoubleClickZoomInteraction from "../components/04openlayers地图交互/DoubleClickZoomInteraction";
import DragRotateAndZoomInteraction from "../components/04openlayers地图交互/DragRotateAndZoomInteraction";
import FilterBetween from "../components/06openlayers过滤器/FilterBetween";
import FilterContains from "../components/06openlayers过滤器/FilterContains";
import FilterIntersects from "../components/06openlayers过滤器/FilterIntersects";
import FilterDisjoint from "../components/06openlayers过滤器/FilterDisjoint";
import FilterDwithin from "../components/06openlayers过滤器/FilterDwithin";
import FilterWithIn from "../components/06openlayers过滤器/FilterWithIn";
import FilterDuring from "../components/06openlayers过滤器/FilterDuring";
import FilterEqualTo from "../components/06openlayers过滤器/FilterEqualTo";
import FilterGreaterThan from "../components/06openlayers过滤器/FilterGreaterThan";
import FilterIsNull from "../components/06openlayers过滤器/FilterIsNull";
import FilterLessThan from "../components/06openlayers过滤器/FilterLessThan";
import FilterLike from "../components/06openlayers过滤器/FilterLike";
import FilterAnd from "../components/06openlayers过滤器/FilterAnd";
import FilterNot from "../components/06openlayers过滤器/FilterNot";
import FilterOr from "../components/06openlayers过滤器/FilterOr";
import ProjectGeoServerOnlineEditWFS from "../components/11openlayers项目实战/geoserver/ProjectGeoServerOnlineEditWFS";
import VectorStyleLayer from "../components/07openlayer样式配置/VectorStyleLayer";
import VectorGeometryLayer from "../components/07openlayer样式配置/VectorGeometryLayer";
import VectorFillLayer from "../components/07openlayer样式配置/VectorFillLayer";
import VectorIconLayer from "../components/07openlayer样式配置/VectorIconLayer";
import VectorTextLayer from "../components/07openlayer样式配置/VectorTextLayer";
import VectorStrokeLayer from "../components/07openlayer样式配置/VectorStrokeLayer";
import VectorCircleLayer from "../components/07openlayer样式配置/VectorCircleLayer";
import VectorRegularShapeLayer from "../components/07openlayer样式配置/VectorRegularShapeLayer2";
import ProjectAngleMeasure from "../components/11openlayers项目实战/other/ProjectAngleMeasure";

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/introduction/hello',
            component: HelloWorld
        },
        {
            path: '/introduction/map',
            component: MapDesc
        },
        {
            path: '/introduction/view',
            component: ViewDesc
        },
        {
            path: '/control/zoom',
            component: ZoomControl
        },
        {
            path: '/control/operate',
            component: BaseOperation
        },
        {
            path: '/control/layer',
            component: LayerControl
        },
        {
            path: '/control/position',
            component: PositionControl
        },
        {
            path: '/control/overview',
            component: OverViewControl
        },
        {
            path: '/control/fullscreen',
            component: FullScreenControl
        },
        {
            path: '/control/scaleline',
            component: ScaleLineControl
        },
        {
            path: '/control/layersearch',
            component: LayerSearchControl
        },
        {
            path: '/control/animation',
            component: AnimateControl
        },
        {
            path: '/control/measure',
            component: MeasureControl
        },
        {
            path: '/layer/image',
            component: ImageLayer
        },
        {
            path: '/layer/tile',
            component: TileLayer
        },
        {
            path: '/layer/vector/tile',
            component: VectorTileLayer
        },
        {
            path: '/layer/vector',
            component: VectorLayer
        },
        {
            path: '/layer/feature',
            component: FeatureLayer
        },
        {
            path: '/layer/debug',
            component: VectorTileDebug
        },
        {
            path: '/layer/bd',
            component: BaiDuMap
        },
        {
            path: '/layer/gd',
            component: GaoDeMap
        },
        {
            path: '/layer/tdt',
            component: TianDiMap
        },
        {
            path: '/layer/gg',
            component: GoogleMap
        },
        {
            path: '/layer/bing',
            component: BingMap
        },
        {
            path: '/layer/arcgis',
            component: ArcgisTileLayer
        },
        {
            path: '/layer/geojson',
            component: GeojsonLayer
        },
        {
            path: '/layer/topojson',
            component: TopojsonLayer
        },
        {
            path: '/layer/esrijson',
            component: EsrijsonLayer
        },
        {
            path: '/layer/wkt',
            component: WktLayer
        },
        {
            path: '/layer/wkb',
            component: WkbLayer
        },
        {
            path: '/layer/xml',
            component: XmlLayer
        },
        {
            path: '/layer/kml',
            component: KmlLayer
        },
        {
            path: '/layer/gml',
            component: GmlLayer
        },
        {
            path: '/layer/gpx',
            component: GPXLayer
        },
        {
            path: '/layer/draw',
            component: DrawLayer
        },
        {
            path: '/filter/bbox',
            component: FilterBbox
        },
        {
            path: '/filter/between',
            component: FilterBetween
        },
        {
            path: '/filter/contains',
            component: FilterContains
        },
        {
            path: '/filter/intersects',
            component: FilterIntersects
        },
        {
            path: '/filter/disjoint',
            component: FilterDisjoint
        },
        {
            path: '/filter/dwithin',
            component: FilterDwithin
        },
        {
            path: '/filter/within',
            component: FilterWithIn
        }
        ,
        {
            path: '/filter/during',
            component: FilterDuring
        },
        ,
        {
            path: '/filter/equalTo',
            component: FilterEqualTo
        }
        ,
        {
            path: '/filter/greaterThan',
            component: FilterGreaterThan
        },

        {
            path: '/filter/isNull',
            component: FilterIsNull
        },

        {
            path: '/filter/lessThan',
            component: FilterLessThan
        }
        ,
        {
            path: '/filter/like',
            component: FilterLike
        },

        {
            path: '/filter/and',
            component: FilterAnd
        },

        {
            path: '/filter/not',
            component: FilterNot
        },

        {
            path: '/filter/or',
            component: FilterOr
        },
        {
            path: '/map/draw',
            component: DrawLayer
        },
        {
            path: '/map/modify',
            component: ModifyInteraction
        }, {
            path: '/map/interaction',
            component: MapInteraction
        },
        {
            path: '/map/extent',
            component: ExtentInteraction
        }, {
            path: '/map/snap',
            component: SnapInteraction
        }, {
            path: '/map/select',
            component: SelectInteraction
        }, {
            path: '/map/pointer',
            component: PointerInteraction
        },
        {
            path: '/map/translate',
            component: TranslateLayer
        },
        {
            path: '/map/dragbox',
            component: DragBoxInteraction
        },
        {
            path: '/map/dragpan',
            component: DragPanInteraction
        },
        {
            path: '/map/dragdrop',
            component: DragAndDropInteraction
        },
        {
            path: '/map/keyboardpan',
            component: KeyboardPanInteraction
        },
        {
            path: '/map/dragrotate',
            component: DragRotateInteraction
        },
        {
            path: '/map/dragzoom',
            component: DragZoomInteraction
        },
        {
            path: '/map/keyboardzoom',
            component: KeyboardZoomInteraction
        },
        {
            path: '/map/mousewheelzoom',
            component: MouseWheelZoomInteraction
        },
        {
            path: '/map/doubleclickzoom',
            component: DoubleClickZoomInteraction
        },
        {
            path: '/map/dragrotatezoom',
            component: DragRotateAndZoomInteraction
        },
        {
            path: '/ogc/wms',
            component: WMS
        }, {
            path: '/ogc/wmts',
            component: WMTS
        }, {
            path: '/ogc/wfs',
            component: WFS
        }, {
            path: '/ogc/wcs',
            component: WCS
        }, {
            path: '/advance/picture',
            component: PictureMarker
        }, {
            path: '/advance/popup',
            component: PopupWindow
        }, {
            path: '/advance/multi',
            component: MultiView
        }, {
            path: '/advance/location',
            component: GeoLocation
        }, {
            path: '/advance/heatMap',
            component: HeatMap
        }, {
            path: '/advance/sign',
            component: MilitarySignDrawing
        }, {
            path: '/webgl/layer',
            component: WebGLTileLayer
        }, {
            path: '/webgl/style',
            component: WebGLTileStyleLayer
        }, {
            path: '/webgl/points',
            component: WebGLPointsSpriteLayer
        }, {
            path: '/webgl/post',
            component: WebGLPostProcessingPassLayer
        }, {
            path: '/canvas/points',
            component: CanvasPointsSpriteLayer
        }, {
            path: '/canvas/layer',
            component: CanvasTileLayer
        }, {
            path: '/canvas/geometry',
            component: CanvasRendererGeometryLayer
        }, {
            path: '/canvas/image',
            component: CanvasRendererFeatureLayer
        }, {
            path: '/project/migration',
            component: ProjectMigrationMap
        }, {
            path: '/project/scatter',
            component: ProjectScatterDiagram
        }, {
            path: '/project/air',
            component: ProjectAirQuality
        }, {
            path: '/project/cesium',
            component: ProjectOlCesium

        }, {
            path: '/project/wind',
            component: ProjectWindLayer
        }, {
            path: '/project/circle',
            component: ProjectDynamicCircle
        }, {
            path: '/project/frontcover',
            component: ProjectFrontCoverLayer
        }, {
            path: '/project/backcover',
            component: ProjectBackCoverLayer
        }, {
            path: '/project/export',
            component: ProjectExportLayer
        }, {
            path: '/project/pdf',
            component: ProjectExportPDF
        }, {
            path: '/project/swipe',
            component: ProjectLayerSwipe
        }, {
            path: '/project/track',
            component: ProjectTrackPlay
        }, {
            path: '/project/buffer',
            component: ProjectGeometryBuffer
        }, {
            path: '/project/intersect',
            component: ProjectIntersectAnalysis
        }, {
            path: '/project/difference',
            component: ProjectDifferenceAnalysis
        }, {
            path: '/project/union',
            component: ProjectUnionAnalysis
        }, {
            path: '/project/dynamic',
            component: ProjectDynamicBuffer
        }, {
            path: '/project/kriging',
            component: ProjectKriging
        }, {
            path: '/project/wmts',
            component: ProjectGeoServerWMTS
        }, {
            path: '/project/wms',
            component: ProjectGeoServerWMS
        }, {
            path: '/project/wfs',
            component: ProjectGeoServerWFS
        }, {
            path: '/proj/transform',
            component: ProjectTransform
        }, {
            path: '/proj/transform/method',
            component: ProjectTransformMethod
        }, {
            path: '/project/edit',
            component: ProjectGeoServerOnlineEditWFS
        }, {
            path: '/style/style',
            component: VectorStyleLayer
        }, {
            path: '/style/geometry',
            component: VectorGeometryLayer
        }, {
            path: '/style/fill',
            component: VectorFillLayer
        }, {
            path: '/style/icon',
            component: VectorIconLayer
        },{
            path: '/style/text',
            component: VectorTextLayer
        }, {
            path: '/style/circle',
            component: VectorCircleLayer
        }, {
            path: '/style/stroke',
            component: VectorStrokeLayer
        }, {
            path: '/style/regularShape',
            component: VectorRegularShapeLayer
        }, {
            path: '/project/measure',
            component: ProjectAngleMeasure
        }
    ]
})