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