openlayers6 mapserver加载地图底图

import 'ol/ol.css'

import {Map, View, Feature}from 'ol'

import VectorLayerfrom "ol/layer/Vector";

import VectorSourcefrom "ol/source/Vector";

import TileLayerfrom "ol/layer/Tile";

import TileWMSfrom 'ol/source/TileWMS';

import XYZfrom "ol/source/XYZ";

import Proj, {transform}from 'ol/proj'

import *as controlfrom 'ol/control'

import *as coordinatefrom 'ol/coordinate';

import {Modify, Snap}from 'ol/interaction'

import {Style, Stroke, Fill, Circleas StyleCircle}from "ol/style";

import {LineString, Polygon, MultiPolygon, Geometry, Point, LinearRing, Circle}from "ol/geom";

import {fromCircle as fromCirclePolygon, circular as circularPolygon}from 'ol/geom/Polygon';

import {Vectoras FeatureVector}from "ol/Feature"

import Tilefrom 'ol/layer/Tile'

import OSMfrom 'ol/source/OSM'

import {regionData}from 'element-china-area-data'

import Draw, {createBox, createRegularPolygon}from "ol/interaction/Draw";

一、加载在线地图


initMap() {

let raster =new Tile({

source:new OSM()

});

    let vector =new VectorLayer({

source:this.source,

    })

this.map =new Map({

layers: [raster, vector],

        target:'olMap',

        controls: control.defaults().extend([

new control.MousePosition({

coordinateFormat: coordinate.createStringXY(4),

                projection:'EPSG:4326',

                target:this.$refs.mousePositionTxt

})

]),

        view:new View({

projection:'EPSG:4326',

            center: [114.064839, 22.548857],

            zoom:5,

        }),

    });

    /*let circle4326 = circularPolygon([114.064839, 22.548857], 100000, 5000);

this.source.addFeature(new Feature(circle4326));*/

},

二,加载mapserver底图


initMap() {

let mapfile =this.global.MAP_PATH +this.global.BASEMAP_NAME;

    let url =this.global.MAPSERVER_PATH;

    let wmsParam = {

map: mapfile,

        LAYERS:'ALL',

        transparent:true

    };

    let raster =new Tile({

source:new TileWMS({//切片WMS服务,多个标注

            url: url,

            params: wmsParam,

            serverType:'mapserver',    //服务器类型

            isBaseLayer:true

        })

});

    this.map =new Map({

layers: [raster],

        target:'olMap',

        controls: control.defaults().extend([

new control.MousePosition({

coordinateFormat: coordinate.createStringXY(4),

                projection:'EPSG:4326',

                target:this.$refs.mousePositionTxt

})

]),

        view:new View({

projection:'EPSG:4326',

            center: [0, 0],

            zoom:1,

            extent:[ -180, -90, 180, 90]

}),

    });

},

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容