Openlayer学习之请求服务器地图资源

在项目中使用到了openlayer技术，公司有自己的地图服务，记录下如何访问服务器的地图资源

1、整体的思路是，使用Vuex存储服务器的BaseApi，在需要用的页面中，创建地图，并配置地图资源路径

2、具体的操作步骤：

VueX中的api.js文件

const baseUrl = process.env.VUE_APP_BASE_API
const api = {
  state: {
  
    baseApi: baseUrl,
    // mapurl瓦片地图服务url
    mapApi: 'http://服务器IP:端口',
 
    satelliteMapSourceURL: 'http://服务器IP/base/getTile?type=1&x={x}&y={y}&zoom={z}',
    tagForMapSourceURL: 'http://服务器IP/base/getTile?type=4&x={x}&y={y}&zoom={z}',
    electronicMapSourceURL: 'http://服务器IP/base/getTile?type=0&x={x}&y={y}&zoom={z}'
 
  }
}

export default api

getters.js文件：

const getters = {
 
  baseApi: state => state.api.baseApi,
  mapApi: state => state.api.mapApi,
  satelliteMapSourceURL: state => state.api.satelliteMapSourceURL,
  
}
export default getters

在需要具体的map.vue页面使用：

mounted() {
           const mapInstance = this.initMap()
            const {
                businessLayerLayers,
                businessLayerManage
            } = this.createBusinessLayerManage({
                mapInstance,
                electronicMapSourceURL: this.$store.getters.electronicMapSourceURL,    //电子图层
                satelliteMapSourceURL: this.$store.getters.satelliteMapSourceURL,   //卫星图Url
                tagForMapSourceURL: this.$store.getters.tagForMapSourceURL,      //卫星标记图Url
             
            })
        },

methods: {
      // 初始化地图
        initMap(){
            ......
        },

    // 初始化地图的图层
            createBusinessLayerManage({
                                          mapInstance,
                                          electronicMapSourceURL,
                                          satelliteMapSourceURL,
                                          tagForMapSourceURL
                                      }) {
                const businessLayerManage = new Map();   // 创建map对象
                businessLayerManage.set('electronicMapLayer', {  //电子图层
                    layer: new TileLayer({
                        source: new XYZ({  // Z 表示缩放层级， Z=zoom ； XY 的原点在左上角， X 从左向右， Y 从上向下
                            url: electronicMapSourceURL
                        }),
                        visible: true,
                        zIndex: 10
                    }),
                    type: 'base'
                })
                businessLayerManage.set('satelliteMapLayer', { // 卫星图层
                    layer: new TileLayer({
                        source: new XYZ({
                            url: satelliteMapSourceURL
                        }),
                        visible: false,
                        zIndex: 11
                    }),
                    type: 'base'
                })
                businessLayerManage.set('tagForMapLayer', { // 卫星注记图层
                    layer: new TileLayer({
                        source: new XYZ({
                            url: tagForMapSourceURL
                        }),
                        visible: false,
                        zIndex: 20
                    }),
                    type: 'base'
                })
                const businessLayerLayers = Array.from(businessLayerManage.values()).map(l => l.layer)
                businessLayerLayers.forEach(l => mapInstance.addLayer(l))

        return {
                    businessLayerLayers,
                    businessLayerManage
                }
    }
}