vue+openlayer封装

一．安装openlayer   

npm install ol

二．配置config.js

export default{

    loadConfig: {

        url: 'http://xxx.xx.xxx.xx:8080/arcgis_js_v334_api/arcgis_js_api/library/3.34/3.34/init.js', //托管 API 地址

    }

}

三．配置init.js

import config from "./config"; // 配置项

import {loadModules} from "esri-loader";

import "ol";

class OlMap {

    constructor() {

        this.streetmap = null;

        this.maplayer = null;

        this.oldBaseLayer=null;

        this.oldLabelLayer=null

    }

    init($el) {

               loadModules(

            [

                "esri/extras/GeoOlMapInitial",

                "dojo/parser"

            ],

            config.loadConfig

        )

            .then(

                ([

                     GeoOlMapInitial,

                     Parser

                 ]) => {

                    Parser.parse(); // 解析

                    // 设置初始化地图位置

                    this.ami = new GeoOlMapInitial()

                    this.ami.init_web_map($el)//初始化地图

                }

            ) //end

            .catch((err) => {

                console.error(err);

            });

    }

}

export default OlMap

四．Vue页面引入init

<script>

    import OlMap from "../olMap/init";

    let olmap = new OlMap();

    export default {

        data(){

            return{

                map: null,

            }

        },

        mounted(){

            olmap.init("map")

        },

        methods:{

        }

    };

</script>

五．Extra中引入ol.js

六．编辑GeoOlMapInitial.js

var dojoConfig = {

    paths: {

        extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"

    }

};

define([

    "dojo/_base/declare",

    "dojo/_base/lang",

    "esri/ol",

  ],

function(declare,lang,ol){

   return declare("GeoOlMapInitial", null, {

      constructor: function(args) {



      },



      //---------------------为初始化openlayers web地图---------------------//

      init_web_map:function(id){



       center = [xxx,xx];

       zoom = 15;

       minzoom = 5;

       maxzoom = 18;

       wkid = 4326;

       units = "degrees";

       //----------------地图类型定义区域--------------------//

          function init_baselayers_group(){

           var baselayers = [];

           var baselayer = new ol.layer.Tile({

                              title: "天地图卫星图",

                              type: "base",

                              layersname:"",

                              visible: true,

                            source: new ol.source.XYZ({

                                          url:"http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=199e07a7e6332f15b3764758c3151282"

                                      })

                            });

           baselayers.push(baselayer);

            var baselayersgroup = new ol.layer.Group({

                  'title': '底图',

                  layers: baselayers

            });

            return baselayersgroup;

          }



          //初始化地图

          var projection = new ol.proj.Projection({ code: 'EPSG:'+wkid, units:units});

          map = new ol.Map({

              target: id,

              layers: [init_baselayers_group()],

              view: new ol.View({

                  projection: 'EPSG:4326',

                  //projection: projection,

                  center:center,

                  zoom:zoom,

                  minZoom: minzoom,

                  maxZoom: maxzoom

              }),

              interactions:ol.interaction.defaults({

                  doubleClickZoom:false //禁用双击放大

              })

          });

      }

     });

});