(function () {
// 建议将这些常量移到一个配置对象中统一管理
const CONFIG = {
IMAGES: {
LOCATION: 'img/location.png',
MARKER_BLACK: 'img/marker_black.svg',
MARKER_RED: 'img/marker_red.svg',
MARKER_BLUE: 'img/marker_blue.svg',
CENTER_PIN: 'img/push_pin.svg'
},
MAP: {
DEFAULT_ZOOM: 12,
TIANDITU_KEY: 'd8beed89b43160a9a185e5aff431f85d'
}
};
let map;
let lastMarker = null;
let lastClickedMarker = null;
let isShowWaterIntakeDetail = false;
let zoom = 12;
// 将方法挂载到 window 上
function mountMethodToWindow() {
window.locationOverLay = locationOverLay;
window.showToast = showToast;
window.addMarker = addMarker;
window.setCenterAndZoom = setCenterAndZoom;
window.updateLocation = updateLocation;
window.aginShowLocation = aginShowLocation;
window.cleanLocationLay = cleanLocationLay;
window.updateInspectionLocation = updateInspectionLocation;
window.cleanLoclLay = cleanLoclLay;
window.showPin = showPin;
window.cancelPin = cancelPin;
window.refreshMarker = refreshMarker;
}
document.addEventListener('DOMContentLoaded', function () {
initMap();
// buttonOverLay();
mountMethodToWindow();
});
// 初始化地图
function initMap() {
// 影像底图
var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d8beed89b43160a9a185e5aff431f85d";
//创建自定义图层对象
//影像注记(地图上的地址)
var imgURL2 = "http://t0.tianditu.gov.cn/cia_w/wmts?" + "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
"&tk=d8beed89b43160a9a185e5aff431f85d";
var lay = new T.TileLayer(imageURL, { minZoom: 6, maxZoom: 18 });
var lay2 = new T.TileLayer(imgURL2, { minZoom: 6, maxZoom: 18 });
var config = { layers: [lay, lay2] };
map = new T.Map("mapDiv", config);
var scale = new T.Control.Scale();
//添加比例尺控件
map.addControl(scale);
map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom); //地图的初始化中心点,此为北京的经纬度
map.addEventListener("click", closeWaterIntakeDetail);
}
// 地图点击后获取经纬度
function getLngLat(lnglat) {
console.log(lnglat.lng.toFixed(6) + "," + lnglat.lat.toFixed(6));
// addClickOverLay(lnglat);
}
// 点击后添加坐标点
function addClickOverLay(lnglat) {
removeMyOverLay();
let marker = new T.Marker(
new T.LngLat(lnglat.lng, lnglat.lat) // 创建标注
);
map.addOverLay(marker); // 将标注添加到地图中
// 设置弹出的窗口样式
let infoWin = new T.InfoWindow();
let sContent =
"
" +
"
" +
"
电话 : (010)88187700
地址:北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +
"
" +
"
" +
"
" +
"
";
infoWin.setContent(sContent);
// 添加点击事件
marker.addEventListener("click", function () {
marker.openInfoWindow(infoWin);
});
lastMarker = marker;
}
// 删除上次点击后添加的标注
function removeMyOverLay() {
if (lastMarker !== null) {
map.removeOverLay(lastMarker); // 将标注从地图中移除
}
}
// 显示标注点击后的窗口
function openInfo(content, e) {
let point = e.lnglat;
let markerInfoWin = new T.InfoWindow(content, {
offset: new T.Point(0, -30)
});
map.openInfoWindow(markerInfoWin, point); // 开启信息窗口
}
// 手机获取到定位后显示定位
function locationOverLay(lng, lag) {
console.log("function》》》》》locationOverLay");
map.centerAndZoom(new T.LngLat(lng, lag), map.getZoom());
let marker = new T.Marker(
new T.LngLat(lng, lag),
{ icon: createIcon(CONFIG.IMAGES.LOCATION, 27) }
);
map.addOverLay(marker);
}
//设置地图中心点
function setCenterAndZoom(lng, lat, thiszoom) {
zoom = thiszoom;
console.log("function》》》》》setCenterAndZoom>>>>lng:" + lng + ",lat:" + lat);
map.centerAndZoom(new T.LngLat(lng, lat), zoom);
}
// 调用原生安卓方法显示取水口详情
function showWaterIntakeDetail(data) {
isShowWaterIntakeDetail = true;
window.Android.showWaterIntakeView(data);
}
// 调用原生安卓方法隐藏取水口详情
function closeWaterIntakeDetail(data) {
if (!isShowCenterPin) {
if (lastClickedMarker !== null) {
lastClickedMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_BLUE));
}
if (isShowWaterIntakeDetail) {
// 假如显示了取水口详情则隐藏取水口详情
isShowWaterIntakeDetail = false;
window.Android.closeWaterIntakeView();
} else {
// 假如没有显示取水口则添加点击的坐标
getLngLat(data.lnglat);
}
}
}
// 点击标注的事件
function addMarkerListener(id, data) {
if (!isShowCenterPin) {
chageMarkerIcon(data);
showWaterIntakeDetail(id);
}else {
showToast("当前正在修改选中取水口的经纬度,完成或退出后才可选择其他!");
}
}
// 修改点击标注的图标
function chageMarkerIcon(data) {
// 点击的标注改为红色
var currentMarker = data.target;
currentMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_RED));
if (lastClickedMarker !== null) {
if (!isEqualsLngLat(data.target.getLngLat(), lastClickedMarker.getLngLat())) {
lastClickedMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_BLUE));
}
}
lastClickedMarker = data.target;
map.panTo(currentMarker.getLngLat());
}
//调安卓原生
function showToast(data) {
// 调用 JavaScript 接口对象的方法
window.Android.showToast(data);
}
// 判断两个坐标是否一致
function isEqualsLngLat(data1, data2) {
return data1.lat === data2.lat && data1.lng === data2.lng;
}
function addMarker(id, lng, lat, name) {
addMarker(id, lng, lat, name, false)
}
//添加从原生传过来的坐标并显示在地图上
function addMarker(id, lng, lat, name, isRed) {
console.log("function》》》》》addMarker>>>id:" + id);
const iconUrl = isRed ? CONFIG.IMAGES.MARKER_RED : CONFIG.IMAGES.MARKER_BLUE;
let marker = new T.Marker(
new T.LngLat(lng, lat),
{ icon: createIcon(iconUrl) }
);
//添加点击事件
marker.addEventListener("click", (data) => {
addMarkerListener(id, data)
});
let label = new T.Label({
text: `${name}
`,
position: marker.getLngLat(),
offset: new T.Point(0, 8), // 设置标注文字的位置
opacity: 1, // 设置文本的显示不透明度(范围0-1)
});
label.setBorderLine(0); // 设置文本的边框线宽
label.setBackgroundColor("transparent"); // 设置文本的背景色(透明色)
label.setFontColor("#FFFFFF");
label.setFontSize(10);
marker.label = label;
if (isRed){
lastClickedMarker=marker;
}
map.addOverLay(label);
map.addOverLay(marker); // 将标注添加到地图中
return "addMarker加载成功 id:" + id
}
//更新位坐标
function updateLocation(log, lat) {
if (locationMarker) {
map.removeOverLay(locationMarker);
}
var newPoint = new T.LngLat(log, lat);
locationMarker = new T.Marker(
newPoint,
{ icon: createIcon(CONFIG.IMAGES.LOCATION, 20) }
);
map.addOverLay(locationMarker);
map.panTo(newPoint);
}
//保存定位坐标生成轨迹
var path = [];
var lineLayer = new T.Polyline([], { color: '#ff4500', weight: 3, opacity: 0.8 });
let locationMarker;
function updateInspectionLocation(log, lat) {
var lastLat = lat;
// const intervalId = setInterval(() => {
// lastLat=lastLat+0.0001;
var newPoint = new T.LngLat(log, lastLat);
path.push(newPoint);
lineLayer.setLngLats(path);
map.addOverLay(lineLayer);
// 移动地图视角到最后一个位置
// }, 500);
}
var aginPath = [];
var oldLineLayer = new T.Polyline([], { color: '#ff4500', weight: 3, opacity: 0.8 });
//显示因异常关闭的巡检记录
function aginShowLocation(lng, lat) {
// 调用 Android 提供的接口,获取数据
console.log("aginShowLocation>>lng:" + lng + ">>>lat:" + lat);
var newPoint = new T.LngLat(lng, lat);
aginPath.push(newPoint);
oldLineLayer.setLngLats(aginPath);
map.addOverLay(oldLineLayer);
}
//清除巡检记录轨迹
function cleanLocationLay() {
if (lineLayer) {
map.removeOverLay(lineLayer);
path = []
}
if (locationMarker) {
map.removeOverLay(locationMarker);
}
if (oldLineLayer) {
aginPath = []
map.removeOverLay(oldLineLayer);
}
}
//清除本地定位坐标位置
function cleanLoclLay() {
if (locationMarker) {
map.removeOverLay(locationMarker);
}
}
//是否显示了地图中心的针用来修改坐标
var isShowCenterPin;
//开始获取屏幕中间定位
function showPin(lng, lat) {
var newPoint = new T.LngLat(lng, lat);
map.panTo(newPoint);
isShowCenterPin = true;
map.addEventListener("moveend", mapMoveEnd);
window.Android.refreshCenter(map.getCenter().getLng(), map.getCenter().getLat());
return true;
}
//取消修改定位
function cancelPin() {
isShowCenterPin = false;
}
//成功修改取水口经纬度后刷新取水口位置
function refreshMarker(id, lng, lat, name) {
map.removeOverLay(lastClickedMarker.label);
map.removeOverLay(lastClickedMarker);
addMarker(id, lng, lat, name, true);
}
function mapMoveEnd(e) {
debounce(() => {
const center = e.target.getCenter();
window.Android.refreshCenter(center.getLng(), center.getLat());
}, 300);
}
// 添加防抖函数
function debounce(fn, delay) {
let timer = null;
return function() {
if(timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
}
}
// 创建marker图标的方法可以抽取出来复用
function createIcon(iconUrl, size = 28) {
return new T.Icon({
iconUrl: iconUrl,
iconSize: new T.Point(size, size),
iconAnchor: new T.Point(size/2, size)
});
}
})();