脚本宝典收集整理的这篇文章主要介绍了【地图中心项目】—— 封装基于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 {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 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>
注：转载请注明出处
以上是脚本宝典为你收集整理的【地图中心项目】—— 封装基于jquery的插件暴露接口供外部调用全部内容，希望文章能够帮你解决【地图中心项目】—— 封装基于jquery的插件暴露接口供外部调用所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。