openlayers6 mapserver加载地图底图

Posted 2023-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了openlayers6 mapserver加载地图底图相关的知识，希望对你有一定的参考价值。

参考技术A import 'ol/ol.css'

import Map, View, Featurefrom '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, transformfrom 'ol/proj'

import *as controlfrom 'ol/control'

import *as coordinatefrom 'ol/coordinate';

import Modify, Snapfrom 'ol/interaction'

import Style, Stroke, Fill, Circleas StyleCirclefrom "ol/style";

import LineString, Polygon, MultiPolygon, Geometry, Point, LinearRing, Circlefrom "ol/geom";

import fromCircle as fromCirclePolygon, circular as circularPolygonfrom 'ol/geom/Polygon';

import Vectoras FeatureVectorfrom "ol/Feature"

import Tilefrom 'ol/layer/Tile'

import OSMfrom 'ol/source/OSM'

import regionDatafrom 'element-china-area-data'

import Draw, createBox, createRegularPolygonfrom "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]

),

);

,

openlayer3-加载第三方地图，百度，谷歌等

OpenLayers 3 之加载地图摘要在浏览器中加载一幅地图，而且是可交互（包含缩放、平移、查询和分析等高级功能）的，该怎么做呢？我们当然知道要想网页中的内容是动态的，可交互的，要使用JavaScript，地图应用也不例外，不过要从底层开发的话，要费老鼻子的劲儿了！OpenLayers便是一个

以上是关于openlayers6 mapserver加载地图底图的主要内容，如果未能解决你的问题，请参考以下文章

openlayers6结合geoserver实现地图矢量瓦片(附源码下载)

openlayers6结合geoserver实现地图空间查询(附源码下载)

openlayers6热力图(附源码下载)

openlayers6聚合图(附源码下载)

openlayers6热力图(附源码下载)