【地图中心项目】—— 封装基于jquery的插件暴露接口供外部调用

(function (window, undefined) {
    // JS 加密混淆器 https://www.sojson.com/yasuojs.html
    var Map = function(){
        return new Map.fn.init();
    };
    Map.fn = Map.prototype = {
        checkTokenUrl: "http://192.168.0.154:8899/mapcenter/checkToken",
        featureUrl:  "http://192.168.0.154:8899/mapcenter/wfs/getFeature",
        wktDataQueryUrl: "http://192.168.0.154:8899/mapcenter/data/query",
        add: function () {
            // console.log("add");
        },
        remove: function () {
            // console.log("remove");
        },
        init: function () {
            // console.log("init");
            return this;
        },

        //根据图层名称和ID获取wfs数据并赋值给Layer
        /** 九交用法：
         {
                    "analyzeType":"1",
                    "crsCode":"4326",
                    "de9imType":4,
                    "queryWkt":"MULTIPOINT((116.947186 40.498603))",
                    "tableName":"fgstest",
                    "workspace":"ceshi0414fgs",
                    "queryConditions":{"NAME":"七区" }
                }

         模糊查询用法：
         {
                    "tableName":"fgstest",
                    "workspace":"ceshi0414fgs",
                    "queryConditions":{"NAME":"大" }
                }
         */

        //根据图层名称获取全量wfs数据
        getWfsFeaturesForLayer: function(typeName,queryConditions,fun){
            //获取当前地图（屏幕）四个顶点的经纬度
            // var vertices = map.getBounds();
            var data = {
                "tableName": typeName,
                "workspace": "ceshi0414fgs",
                "pageSize" : '-1',
            };
            if(Object.keys(queryConditions).length){
                data.queryConditions = queryConditions;
            }
            if(Object.keys(wktQueryParams).length){
                data.queryConditions = Object.assign(data.queryConditions, wktQueryParams);
            }
            $.when(
                $.ajax({
                    url: this.wfsDataQueryUrl,
                    data: JSON.stringify(data),
                    type: "POST",
                    contentType: "application/json",
                })
            ).done(function(response){
                // console.log('response', response)
                if(response && response.features.length === 0){
                    currentMaplevel = maplevel;
                    conditions = [];
                    wktQueryParams = [];
                    isClearTagInfoFun(true);
                    Map.clearQua();
                    Map.drawWfsLayer(null,null);
                }else{
                    if(response.features.length && response.features[0].properties.maplevel === '7'){
                        preLayerWlwgPhotoName = response.features[0].properties.phywgname6;
                    }
                    if(typeof fun === 'function'){
                        fun(response, typeName);
                    }
                    Map.budpoint(response);
                }
            })
        },

    };

    Map.fn.init.prototype = Map.fn;

    //添加扩展(静态、实例)方法【demo】
    //传入{methodName:function(){}}
    Map.extend = Map.fn.extend = function (obj) {
        for (var item in obj) {
            this[item] = obj[item];
        }
    };

    //初始化地图可用的全局变量
    var map;
    var phywgdesc;
    var token = "";
    var systemId = "";

    //查询条件
    var queryConditions={};
    var navigationControl; //缩放控件对象
    var tagPhotoId; //查询条件所需全局photoid
    var photoid;   //图层id
    var maplevel;  //图层最高等级
    

    Map.extend({
        /**
         * @author zy
         * 设置token
         */
        setToken:function(sId,t,fun) {
            systemId = sId;
            token = t;

            Map.fn.featureUrl += `?token=${t}&systemId=${sId}`;
            Map.fn.wktDataQueryUrl += `?token=${t}&systemId=${sId}`;

            if(fun && typeof fun === 'function'){
                hanldeRejectFun = fun;
            }
        },

        /**
         * @author zyun
         * 初始化地图
         */
        initMap:function(divName){
            Map.createMap(divName);
            Map.setMapEvent();
            Map.addMapControl();
            return map;
        },

        /**
         * @author zyun
         * 创建地图
         * 根据不同的层级设置不同的中心点和层级
         */
        createMap: function(divName){
            // console.log(divName, maplevel, photoid)
            map = new BMap.Map(divName,{ enableMapClick: false }); //在百度地图容器中创建一个地图
            var queryCon = {
                photoid: photoid
            };
        },

        /**
         * @author zyun
         * 地图事件设置
         */
        setMapEvent: function(){
            map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
            map.enableScrollWheelZoom(true);//启用地图滚轮放大缩小
            // map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        },

        /**
         * @author ljq
         * 添加地图控件
         */
        addMapControl: function(){
            navigationControl = new BMap.NavigationControl({
                type : BMAP_NAVIGATION_CONTROL_ZOOM, //缩放控件类型 仅包含缩放按钮
                anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //右下角
            });
            //向地图中添加缩放控件
            map.addControl(navigationControl);

            //向地图中添加比例尺控件
            map.addControl(new BMap.ScaleControl());
        },

        /**
         * @author ljq
         * 重置缩放地图控件
         * anchor: 缩放按钮的位置（左上，右上，左下，右下）
         * x:缩放按钮的水平偏移量
         * y:缩放按钮的竖直偏移量
         */
        resetNavigationControl: function(anchor, x, y){
            //移除缩放控件
            map.removeControl(navigationControl);
            navigationControl = new BMap.NavigationControl({
                type : BMAP_NAVIGATION_CONTROL_ZOOM, //缩放控件类型 仅包含缩放按钮
                anchor : anchor, //右下角
                offset : new BMap.Size(x, y) //进一步控制缩放按钮的水平竖直偏移量
            });
            //向地图中添加缩放控件
            map.addControl(navigationControl);
        },


        /**
         * @author ljq
         * 清除地图图层接口
         */
        clearMap: function() {
            if(polygonData){
                polygonData.set([]);
            }
            if(markerClusterer){
                markerClusterer.clearMarkers();
            }
        },

        /**
         * @author ljq
         * 清除参数
         */
        clearQua: function(){
            queryConditions = {};
        },

        /**
         * @author ljq
         * 防抖函数
         * @param fn：操作函数
         * @param wait：延迟时间
         */
        debounce: function(fn, wait) {
            var timeout = null;
            return function() {
                if(timeout !== null)   clearTimeout(timeout);
                timeout = setTimeout(fn, wait);
            }
        },


    });

    window.Map = Map;
})(window)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>olmap</title>
  <script type="text/javascript" src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://api.map.baidu.com/api?v=2.0&ak=自己申请的密钥"></script>
  <script type="text/javascript" src="https://mapv.baidu.com/build/mapv.js"></script>
 <script type="text/javascript" src="http://192.168.0.154:8899/mapcenter/static/js/wicket.js"></script>

<script type="text/javascript" src="mapcenter.js"></script>

 
</head>
<style>
  html,
  body {
     100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  #map {
     100%;
    height: 100%;
    /* height: 400px; */
  }
</style>
<body>
<div>
  <input type="text" id="ipt">
  <div id="map"></div>
  <div id="info"></div>
<script>

  Map.setToken('MyWorkbench','52e7b95a-5686-48d3-aa08-dd8e0734a332);
 
  var map = Map.initMap('map');
  
  Map.clearMap();

</script>
</body>

</html>

---

注：转载请注明出处