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]
}),
});
},