(function () { // 图片路径 const locationIMGPath = 'img/location.png'; const markerBalckPath = 'img/marker_black.svg'; const markerRedPath = 'img/marker_red.svg'; const markerBluePath = 'img/marker_blue.svg'; const centerPin = 'img/push_pin.svg'; 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: locationIMGPath, iconSize: new T.Point(27, 27), iconAnchor: new T.Point(10, 25) }); 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) { // 如果有点击取水口则将取水口恢复成黑色 // 上次点击的标注改为黑色 var defaulticon = new T.Icon({ iconUrl: markerBluePath, iconSize: new T.Point(28, 28), iconAnchor: new T.Point(14, 28) }); lastClickedMarker.setIcon(defaulticon); } 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; // 点击后图标 var clickedIcon = new T.Icon({ iconUrl: markerRedPath, iconSize: new T.Point(28, 28), iconAnchor: new T.Point(14, 28) }); // 设置当前点击的 marker 为点击后图标 currentMarker.setIcon(clickedIcon); // 判断点击的不是同一个坐标 if (lastClickedMarker !== null) { if (!isEqualsLngLat(data.target.getLngLat(), lastClickedMarker.getLngLat())) { var defaulticon = new T.Icon({ iconUrl: markerBluePath, iconSize: new T.Point(28, 28), iconAnchor: new T.Point(14, 28) }); lastClickedMarker.setIcon(defaulticon); } } 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); var iconUrl; if (isRed) { iconUrl = markerRedPath; } else { iconUrl = markerBluePath; } var icon = new T.Icon({ iconUrl: iconUrl, iconSize: new T.Point(28, 28), iconAnchor: new T.Point(14, 28) }); let marker = new T.Marker( new T.LngLat(lng, lat) // 创建标注 , { icon: icon }); //添加点击事件 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) { let icon = new T.Icon({ iconUrl: locationIMGPath, iconSize: new T.Point(20, 20), iconAnchor: new T.Point(10, 10) }); if (locationMarker) { map.removeOverLay(locationMarker); } var newPoint = new T.LngLat(log, lat); locationMarker = new T.Marker(newPoint, { icon: icon }); 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) { var center = e.target.getCenter(); console.log("lng:" + center.getLng() + " lat:" + center.getLat()) window.Android.refreshCenter(center.getLng(), center.getLat()); } })();