Vue+Openlayers6+TileLayer加载geoserver和arcgis Server

加载Arcgis Server的地图服务

• 引入相关的模块

import "ol/ol.css"
import Map from "ol/Map"
import View from "ol/View"
import TileLayer from "ol/layer/Tile"
import TileArcGISRest from 'ol/source/TileArcGISRest'
import TileWMS from "ol/source/TileWMS"

• 地图服务器Url

 var maplayer=new TileLayer({
              source:new TileArcGISRest({
                  url:'http://121.33.231.74:60/arcgis/rest/services/yongjiang/nj/MapServer'
              })
          })

• 完整代码

          //加载Arcgis 
          var maplayer=new TileLayer({
              source:new TileArcGISRest({
              url:'http://121.33.231.74:60/arcgis/rest/services/yongjiang/nj/MapServer'
              })
          })
        this.map = new Map({
            target: "mapDivRef",
            layers: [maplayer],
            view: new View({
                center: [108.30,22.76], 
 
                zoom:14,
                minZoom:10, // 地图缩放最小级别
               projection: "EPSG:4326", 
            }),
           ]),
        })

• 地图加载

加载Geoserver地图服务器

• 地图服务器参数

var tile=
          new TileLayer({
                source: new TileWMS({
                    url: this.url+'geoserver/demo/wms',
                    params: {
                        'LAYERS': 'demo:polylineTest',
                        'STYLES': '',
                        'VERSION': '1.1.0',
                        'FORMAT': 'image/png',
                        'CRS': 'EPSG:2435', 
                        'tiled': true
                    },
                    serverType: "geoserver",
                    // transition: 0,
                }),
                // visible: true,
                // className: 'wms'
            })

• 完整代码

var tile=
            new TileLayer({
                source: new TileWMS({
                    url: this.url+'geoserver/demo/wms',
                    params: {
                        'LAYERS': 'demo:polylineTest',
                        'STYLES': '',
                        'VERSION': '1.1.0',
                        'FORMAT': 'image/png',
                        'CRS': 'EPSG:2435', 
                        'tiled': true
                    },
                    serverType: "geoserver",
                    // transition: 0,
                }),
                // visible: true,
                // className: 'wms'
            })
        this.map = new Map({
            target: "mapDivRef",
            layers: [tile],
            view: new View({
                center: [41916.95204,29395.31245], 
 
                zoom:14,
                minZoom:10, // 地图缩放最小级别
            }),
        })

• 地图展示