(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 =
|
"<div style='margin:0px;'>" +
|
"<div style='margin:10px 10px; '>" +
|
"<div >电话 : (010)88187700 <br>地址：北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +
|
"</div>" +
|
"<input width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='跳转详情' onClick=\"showToast()\">" +
|
"</div>" +
|
"</div>";
|
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: `<div style='position:absolute;left:-50%;transform: translateX(-50%);'>${name}<div>`,
|
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());
|
}
|
|
})();
|
