(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 icon = new T.Icon({ iconUrl: CONFIG.IMAGES.LOCATION, iconSize: new T.Point(20, 20), iconAnchor: new T.Point(10, 10) }); let marker = new T.Marker( new T.LngLat(lng, lag), { icon: icon } ); 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); let icon = new T.Icon({ iconUrl: CONFIG.IMAGES.LOCATION, iconSize: new T.Point(20, 20), iconAnchor: new T.Point(10, 10) }); locationMarker = new T.Marker( newPoint, { icon: icon } ); map.addOverLay(locationMarker); map.panTo(newPoint); } //保存定位坐标生成轨迹 var path = []; var lineLayer = new T.Polyline([], { color: '#E9900A', 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: '#E9900A', 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) }); } })();