【地图服务】openlayers的调用地图服务

说明：openlayers调用WMS和WMTS服务，需要在geoServer开启对用的服务，具体看上一章。
1、openlayers调用openlays的WMS服务，这调用的是一个图层，没有缩放的功能

	//geoServer的卫星图层
    const baseLayerWX = new ol.layer.Tile({
        visible: true,//是否展示这个地图
        source: new ol.source.TileWMS({
            url: 'http://localhost:9004/geoserver/chongqing/wms',
            params: {
                'LAYERS': 'chongqing:CQ_hunhe_photo'
            },
            serverType: 'geoserver'
        })
    });
    //geoServer的矢量图层
    const baseLayerSL = new ol.layer.Tile({
        visible: false,//是否展示这个地图
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/CQ_8-13/wms',
            params: {
                'FORMAT' : 'image/png',
                'LAYERS': 'CQ_8-13:CQ_L12'
            },
            serverType: 'geoserver'
        })
    });
    
    const view = new ol.View({
        projection: "EPSG:4326", //使用这个坐标系，这是经纬度坐标系，后期打点连线可以直接用经纬度 比较方便
        center: [107.55321790186011, 30.22099733447633], //地图中心坐标
        zoom: 8
    });
   const map = new ol.Map({
        target: 'map',//div的id的挂载点
        view: view,
        layers: [baseLayerWX,baseLayerSL ]
    });

2、openlayers调用openlays的WMS服务，WMTS具有缩放功能。

    //切片策略  WMTS加载
    var tilegrid = new ol.tilegrid.WMTS({
        extent: [-180.0, -90.0, 180.0, 90.0],//范围
        tileSize: [256, 256],
        origin: [-180.0, 90.0],//切片原点
        resolutions: ['0.5515625','0.17578125','0.087890625','0.0439453125','0.02197265625','0.010986328125','0.0054931640625','0.00274658203125','0.001373291015625','0.0006866455078125','0.0003433227539062','0.0001716613769531'],//分辨率
        matrixIds: ['EPSG:4326:1','EPSG:4326:2','EPSG:4326:3','EPSG:4326:4','EPSG:4326:5','EPSG:4326:6','EPSG:4326:7','EPSG:4326:8','EPSG:4326:9','EPSG:4326:10','EPSG:4326:11','EPSG:4326:12']//层级标识列表，与地图级数保持一致
    });
   //设置地图投影
    var projection = new ol.proj.Projection({
        code: 'EPSG:4326',
        units: 'degrees',
        axisOrientation: 'neu'
    });
    var tileSource = new ol.source.WMTS({
        url: 'http://localhost:8080/geoserver/gwc/service/wmts',
        layer:"CQ_8-13:CQ_L12",
        format: "image/png",
        matrixSet:"EPSG:4326",
        projection: projection,
        tileGrid: tilegrid
    });
 const map = new ol.Map({
        target: 'map',
        view: view,//view和上一个一样
        layers: [tileSource]
    });

说明：切片策略的参数在哪里看，如果你使用的坐标系是EPSG:4326，可以直接超过去，其他再坐标系，再geoServe里看，可以对应看一下
3、这是我使用geoServe的使用心得，但是最后项目没有使用geoServe，因为那边直接给到的是瓦片资源，就是切好的地图资源。没有办法，只能采用其他方式区加载地图资源了。第三种方式加载：XYZ方式加载，
3.1你要确定你收到的瓦片资源，就是已经切好的地图资源和层级


3.2，将这些资源tomcat的webapps下面或者nginx下面，本人比较熟悉tomcat，所用用的tomcat。然后启动tomcat服务器。
3.3使用XYZ加载地图，这样就可以了，

    //XYZ加载
    var tileLayer = new ol.layer.Tile({// 使用XYZ的方式加载
        visible: true,
        source: new ol.source.XYZ({
            url: 'http://localhost:9004/cqsl/{z}/{x}/{y}.png'
        })
    });
    //
    var wxLayer = new ol.layer.Tile({// 使用XYZ的方式加载
        visible: false,
        source: new ol.source.XYZ({
            url: 'http://localhost:9004/cqwx/{z}/{x}/{y}.jpg'
        })
    });
    //引入地图
    const map = new ol.Map({
        target: 'map',
        view: view,
        layers: [wxLayer, tileLayer, Vector]
    });

4、如果项目需要做地图切换，使用下面的方法，就是这是前面说的Visible值，很简单的

    //混合图
    $('#hunHe').click(function () {
            tileLayer.setVisible(false);
            wxLayer.setVisible(true);
    });

    //矢量图
    $("#shiLiang").click(function () {
            wxLayer.setVisible(false);
            tileLayer.setVisible(true);
    });

接下来说使用openlayers打点连线的问题，还有shp图层加载
原创不易，转载说明，谢谢