<template>
<view>
<view class="map" id="mapDiv" style="width: 100%;height: 80vh;z-index: 0;position: relative;" :prop="dataOption"
:change:prop="Trenderjs.initTMap" :change:renderTrigger="Trenderjs.handleMessage"
:renderTrigger="triggerCounter">
</view>
</view>
</template>
<script>
export default {
data() {
return {
msg: '我是service层原来的msg',
triggerCounter: 0,
isProcessing: false, // 新增状态锁
message: null
};
},
props: {
dataOption: {
type: String,
default: ''
},
},
methods: {
renderjsData() {
console.log('----------', this.triggerCounter);
if (this.isProcessing) return; // 阻止重复触发
this.isProcessing = true;
this.triggerCounter++
console.log('=============', this.triggerCounter);
},
someMethodInVue(newVal) {
console.log('位置', newVal);
this.$emit('childEvent', newVal);
this.message = newVal
this.isProcessing = false;
}
}
};
</script>
<script module="Trenderjs" lang="renderjs">
var control;
export default {
data() {
return {
tk: '27657afc3318f8f2166fceba83427734',
options: {
lng: '104.397894',
lat: '31.126855',
},
iconType: "default",
dataList: [],
pointList: [],
Tmap: null,
gisDataObj: {},
gisData: {},
geocode: null,
gisPointLngLat: {}
}
},
mounted() {
if (!window.T) {
console.log('00000', );
const script = document.createElement('script')
script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=' + this.tk
// this.initChartsRender.bind()
document.head.appendChild(script)
script.onload = this.initChartsRender.bind()
} else {
console.log('++++', );
const {
lng,
lat
} = this.options
this.Tmap = null;
console.log(this.Tmap);
this.Tmap = new T.Map('mapDiv');
this.Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
this.Tmap.setStyle("indigo"); //设置地图主体颜色indigo
this.Tmap.disableDoubleClickZoom();
this.Tmap.disableScrollWheelZoom();
this.Tmap.disableInertia()
this.Tmap.disableKeyboard()
//创建对象
this.geocode = new T.Geocoder();
control = new T.Control.Zoom();
this.Tmap.addControl(control);
var controlPosition = T_ANCHOR_BOTTOM_RIGHT;
control.setPosition(controlPosition);
// Tmap.enableDrag();
// this.setIcon(lng, lat, true, '')
}
},
created() {
},
methods: {
// 初始化地图
initTMap(newValue, oldValue) {
let that = this;
// 开启实时定位监听
that._watchId && plus.geolocation.clearWatch(that._watchId); // 先清除旧的监听
that._watchId = plus.geolocation.watchPosition(successCB => {
let data = {
lng: successCB.coords.longitude,
lat: successCB.coords.latitude
}
console.log('实时定位:', data.lng, data.lat);
that.Tmap.centerAndZoom(new T.LngLat(data.lng, data.lat), 20);
var point = new T.LngLat(data.lng, data.lat);
const marker = new T.Marker(point, {
// icon
});
that.Tmap.clearOverLays(); // 可选：每次清除旧的覆盖物
that.Tmap.addOverLay(marker);
var label = new T.Label({
text: '实时定位:' + data.lng + ',' + data.lat,
position: point,
offset: new T.Point(-40, 10)
});
//创建地图文本对象
that.Tmap.addOverLay(label);
}, err => {
console.log(err);
}, {
provider: 'system',
enableHighAccuracy: true,
});
// let that = this
if (newValue) {
setTimeout(function() {
console.log(JSON.parse(newValue));
that.gisDataObj = JSON.parse(newValue)
console.log(JSON.parse(that.gisDataObj.data));
that.gisData = JSON.parse(that.gisDataObj.data)
// if (that.gisData.length > 0) {
// that.options = {
// lng: that.pointList[0].deviceDeploymentLocation.split(',')[1],
// lat: that.pointList[0].deviceDeploymentLocation.split(',')[0]
// }
// } else {
let gisPoint = JSON.parse(that.gisData.data)
that.gisPointLngLat = JSON.parse(that.gisData.data)
if (that.gisData.type == 'marker') {
that.options = {
lng: gisPoint.lng,
lat: gisPoint.lat,
}
} else if (that.gisData.type == 'polyline' || that.gisData.type == 'polygon') {
that.options = {
lng: gisPoint[0].lng,
lat: gisPoint[0].lat,
}
} else {
that.options = {
lng: '104.397894',
lat: '31.126855',
}
}
const {
lng,
lat
} = that.options
that.Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
if (that.gisData.type == 'marker') {
var point = new T.LngLat(gisPoint.lng, gisPoint.lat);
console.log(point);
const marker = new T.Marker(point, {
// icon
});
that.Tmap.addOverLay(marker);
var label = new T.Label({
text: that.gisData.name,
position: point,
offset: new T.Point(-40, 10)
});
//创建地图文本对象
that.Tmap.addOverLay(label);
} else if (that.gisData.type == 'polyline') {
let points = [];
for (let i = 0; i < gisPoint.length; i++) {
points.push(new T.LngLat(gisPoint[i].lng, gisPoint[i].lat));
}
//创建线对象
var line = new T.Polyline(points, {
color: that.gisDataObj.color,
weight: 6,
});
//向地图上添加线
that.Tmap.addOverLay(line);
var label = new T.Label({
text: that.gisData.name,
position: points[points.length - 1],
offset: new T.Point(-40, 10)
});
//创建地图文本对象
that.Tmap.addOverLay(label);
} else if (that.gisData.type == 'polygon') {
let points = [];
for (let i = 0; i < gisPoint.length; i++) {
points.push(new T.LngLat(gisPoint[i].lng, gisPoint[i].lat));
}
//创建线对象
var polygon = new T.Polygon(points, {
color: that.gisDataObj.color,
weight: 6,
});
//向地图上添加线
that.Tmap.addOverLay(polygon);
var label = new T.Label({
text: that.gisData.name,
position: points[points.length - 1],
offset: new T.Point(-40, 10)
});
//创建地图文本对象
that.Tmap.addOverLay(label);
}
}, 1000);
}
},
// 若没有加载地图方法
initChartsRender() {
const {
lng,
lat
} = this.options
var that = this;
this.Tmap = new T.Map('mapDiv');
this.Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
this.Tmap.setStyle("indigo"); //设置地图主体颜色indigo
this.Tmap.disableDoubleClickZoom();
this.Tmap.disableScrollWheelZoom();
this.Tmap.disableInertia()
this.Tmap.disableKeyboard()
control = new T.Control.Zoom();
this.Tmap.addControl(control);
var controlPosition = T_ANCHOR_BOTTOM_RIGHT;
control.setPosition(controlPosition);
// Tmap.enableDrag();
// this.setIcon(lng, lat, true, '')
},
// 地图图标Icon
setIcon(lng, lat, isClear, markerActive) {
if (isClear) {
// if (this.iconType == 'searchIcon') {
// this.Tmap.clearOverLays()
// } else {
this.Tmap.removeOverLay(markerActive)
// }
}
console.log(this.gisData);
let gisPoint = JSON.parse(this.gisData.data)
},
// RenderJS事件处理器
handleMessage(newVal, oldVal) {
console.log(newVal, oldVal);
if (newVal !== oldVal) {
const center = this.Tmap.getCenter();
var lo = new T.Geolocation();
let that = this
// let gisPoint = JSON.parse(this.gisData.data)
const fn = function(e) {
let distance = that.getDistance(e.lnglat.lat, e.lnglat.lng, that.gisPointLngLat.lat, that
.gisPointLngLat.lng)
that.$ownerInstance.callMethod('someMethodInVue', {
lng: e.lnglat.lng,
lat: e.lnglat.lat,
distance: distance * 1000
});
// // if (this.getStatus() == 0) {
// that.Tmap.centerAndZoom(e.lnglat, 15)
// console.log('e.lnglat000', e.lnglat.lat, e.lnglat.lng);
// // var marker = new T.Marker(e.lnglat);
// // that.Tmap.addOverLay(marker);
// // }
// // if (this.getStatus() == 1) {
// console.log('e.lnglat111', e.lnglat.lat, e.lnglat.lng);
// that.Tmap.centerAndZoom(e.lnglat, e.level)
// // var marker = new T.Marker(e.lnglat);
// // that.Tmap.addOverLay(marker);
// // }
}
lo.getCurrentPosition(fn);
}
},
getDistance(lat1, lng1, lat2, lng2) {
console.log(lat1, lng1, lat2, lng2);
const radLat1 = (lat1 * Math.PI) / 180.0
const radLat2 = (lat2 * Math.PI) / 180.0
const a = radLat1 - radLat2
const b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0
let s =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(a / 2), 2) +
Math.cos(radLat1) *
Math.cos(radLat2) *
Math.pow(Math.sin(b / 2), 2)
)
)
s *= 6378.137 // EARTH_RADIUS;
s = Math.round(s * 100) / 100
console.log(s);
return s // 调用 return的距离单位为km
}
},
}
</script>
只在这段代码的基础上修复漂移的问题即可
扫一扫
1061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
