renderjs 绘制百度地图，来回切换地图页面，内存会越来越大，直到app卡死退出：
<template>
<view id="allmap" class="map"
:greenlandList="greenlandList"
:change:greenlandList="map.drawGreenland"
:fenceList="fenceList"
:change:fenceList="map.drawFence"
:questionPoint="questionPoint"
:change:questionPoint="map.changeQuestionPoint"
@touchmove.passive.stop>
</view>
</template>
<script>
import { requestObj } from '@/apis/index.js'
export default {
props: {
// 问题定位地点
questionPoint: {
type: Object,
default: () => {}
},
},
data() {
return {
// 围栏数据
fenceList: null,
// 绿地数据
greenlandList: null,
}
},
methods: {
// 根据绿地获取公司
async getCompany({index}) {
const item = this.greenlandList[index];
this.$emit('setCompny', item)
},
// 获取围栏数据
async getFenceList() {
const data = await requestObj.getFenceList({
pageNum: 1,
pageSize: 10,
});
this.fenceList = data.rows;
},
// 获取绿地数据
async getGreenlandList() {
let greenlandList = uni.getStorageSync('greenlandList');
// 如果缓存没有绿地数据，则通过接口请求
if(!greenlandList) {
this.getGreenLandData();
} else {
// 调用接口查看是否需要更新
const {data} = await requestObj.getGreenlandV();
const V = uni.getStorageSync('greenLandV');
if(V === data.version) {
this.greenlandList = greenlandList;
} else {
// 更新本地绿地版本号
uni.setStorageSync('greenLandV', data.version);
// 重新请求最新的数据
this.getGreenLandData();
}
}
},
getGreenLandData() {
const _this = this;
let token = uni.getStorageSync('token');
uni.request({
url: 'https://choke.gothewind.com/media/greenland/geo.json',
header: {
Authorization: 'Bearer ' + token
},
success({data}) {
uni.setStorage({
key: 'greenlandList',
data: data,
success: function() {
console.log('绿地数据缓存成功');
}
});
_this.greenlandList = data;
}
})
},
// 通知父组件，地图加载完成，并已拿到位置信息
mapOnload(data) {
this.$emit('mapOnload', data);
}
},
}
</script>
<script module="map" lang="renderjs">
import { mymap, newPicUrl } from './fun.js';
import { wgs84ToGcj02ToBd09Public } from '../../utils/validate.js';
let maps, VIEW, qPoint;
export default {
data() {
return {
ak: '',
}
},
methods: {
// 设置问题坐标
changeQuestionPoint(qPoint) {
qPoint = qPoint;
console.log(qPoint, 'qPoint')
if(qPoint && qPoint.lng) {
// 用定时器防止地图未实例化
setTimeout(() => {
let point = new BMapGL.Point(qPoint.lng, qPoint.lat);
let myIcon = new BMapGL.Icon(newPicUrl.myIconGreen3, new BMapGL.Size(30, 30));
let marker = new BMapGL.Marker(point, {
icon: myIcon
});
maps.addOverlay(marker);
maps.setCenter(point);
maps.centerAndZoom(point, 13);
}, 2000);
}
},
setlocation(locationPoint) {
this.locationPoint = locationPoint;
// 锁定定位坐标
if(!!locationPoint) {
console.log(this.locationPoint, '当前定位点') // {lng: 121.57501486197, lat: 31.121168928805}
let point = new BMapGL.Point(116.41908279976709, 39.97724843187504); // 删除
// let point = new BMapGL.Point(locationPoint.lng, locationPoint.lat); // 生产用这个
let myIcon = new BMapGL.Icon(newPicUrl.myIconGreen3, new BMapGL.Size(30, 30));
let marker = new BMapGL.Marker(point, {
icon: myIcon
});
maps.addOverlay(marker);
maps.setCenter(point);
maps.centerAndZoom(point, 13);
}
},
drawFence(taskList) { // 绘制围栏数据
if (taskList) {
for (const item of taskList) {
const points = JSON.parse(item.coordinates);
if (points.length == 0) {
continue;
}
const arr = [];
for (const p of points) {
arr.push(new window.BMapGL.Point(p.lng, p.lat));
}
const overlay = new BMapGL.Polygon(arr, {
strokeColor: '#4fffa1',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "#154367",
fillOpacity: 0.2,
enableMassClear: false
});
maps.addOverlay(overlay);
}
}
},
drawGreenland(taskList) { // 绘制绿地数据
if (taskList) {
console.log('开始绘制绿地')
var shapeLayer2 = new mapvgl.ShapeLayer({
color: '#16ff21', // 柱状图颜色
enablePicked: true, // 是否可以拾取
selectedIndex: -1, // 选中项
selectedColor: '#5555ff', // 选中项颜色
autoSelect: true, // 根据鼠标位置来自动设置选中项
onClick: ({dataIndex, dataItem}) => { // 点击事件
const index = dataItem && dataItem.properties ? dataItem.properties.index : -1;
if(index !== -1) {
this.$ownerInstance.callMethod('getCompany', {index});
}
},
});
VIEW.addLayer(shapeLayer2);
// 处理数据格式
var polygons2 = [];
for (let q = 0; q < taskList.length; q++) {
let obj = taskList[q]
var line = JSON.parse(obj.coordinates);
for (var j = 0; j < line.length; j++) {
var p = line[j];
var polygon = [];
for (var k = 0; k < p.length; k++) {
var item = p[k];
for (var h = 0; h < item.length; h++) {
var res2 = wgs84ToGcj02ToBd09Public(item[h][0], item[h][1]);
polygon.push([res2.longitude, res2.latitude]);
}
}
polygons2.push({
geometry: {
type: 'Polygon',
coordinates: [polygon]
},
properties: {
height: 6,
index: q,
}
});
}
}
shapeLayer2.setData(polygons2);
polygons2 = [];
shapeLayer2 = null;
}
},
// 获取当前定位信息
getLocatingInfo() {
var geolocation = new BMapGL.Geolocation();
var geocoder = new BMapGL.Geocoder();
var _this = this;
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
// _this.point = r.point;
_this.setlocation(r.point)
geocoder.getLocation(r.point, function(addComp ) {
var addComp = addComp.addressComponents;
var address = addComp.province + '·' + addComp.city + addComp.district + addComp.street + addComp.streetNumber; //获取地址
// _this.address = address;
_this.$ownerInstance.callMethod('mapOnload', {address, point: r.point});
});
}
});
},
// 初始化地图
initBmp() {
// 创建百度地图实例，vue挂载地图实例
maps = new BMapGL.Map('allmap', {
minZoom: 11,
maxZoom: 17,
});
// 锁定中心轴位置
let point = new BMapGL.Point(116.546273, 39.948574);
// 创建地图中心
maps.centerAndZoom(point, 18);
// 允许鼠标缩放
maps.enableScrollWheelZoom();
// 地图赋值样式
maps.setMapStyleV2({
styleId: '20b7b3d8fe480018ade9d5312d345b43'
});
// 初始化GL
VIEW = new mapvgl.View({
map: maps,
effects: [new mapvgl.BloomEffect({
threshold: 0.5,
blurSize: 2
})],
});
VIEW.startAnimation();
// 构建区域地图
let bdary = new BMapGL.Boundary();
bdary.get('北京市朝阳区', (rs) => {
// 绘制行政区
for (var i = 0; i < rs.boundaries.length; i++) {
var xyArr = rs.boundaries[i].split(';');
var ptArr = [];
for (var j = 0; j < xyArr.length; j++) {
var tmp = xyArr[j].split(',');
var pt = new BMapGL.Point(tmp[0], tmp[1]);
ptArr.push(pt);
}
var mapmask = new BMapGL.MapMask(ptArr, {
isBuildingMask: true,
isPoiMask: true,
isMapMask: true,
showRegion: 'inside',
topFillColor: '#5679ea',
topFillOpacity: 0.5,
sideFillColor: '#5679ea',
sideFillOpacity: 0.9,
enableMassClear: false
});
maps.addOverlay(mapmask);
var border = new BMapGL.Polyline(ptArr, {
strokeColor: '#5679ea',
strokeWeight: 2,
strokeOpacity: 1,
enableMassClear: false
});
maps.addOverlay(border);
}
});
// 当地图拖出范围外，重新定位到原点
const b = new BMapGL.Bounds(
new BMapGL.Point(116.18812056752075, 39.45866640543149),
new BMapGL.Point(116.9880750077071, 40.36081183670181)
);
// 范围 左下角，右上角的点位置
maps.addEventListener("dragend", (type, target) => {
if (b.containsBounds(maps.getBounds())) {
return;
} else {
maps.centerAndZoom(point, 18);
}
})
// 定位
console.log(qPoint, '地图已完成实例化')
if(!qPoint) { // 若父级未传入问题定位，则获取当前定位信息
this.getLocatingInfo();
}
// 地图已渲染完成，获取数据,通知逻辑层
this.$ownerInstance.callMethod('getFenceList');
this.$ownerInstance.callMethod('getGreenlandList');
},
},
created() {
if (maps) {
maps.clearOverlays();
VIEW.destroy();
maps = null; // 销毁地图实例
VIEW = null; // 销毁mapval实例
}
},
mounted() {
if (typeof window.BMapGL === 'function') {
this.initBmp();
} else {
// 动态引入较大类库避免影响页面展示
mymap(this.ak, this.initBmp);
}
}
}
</script>
<style>
.map {
width: 100%;
height: 100%;
}
</style>
cyzy (作者)
created里这样算销毁了吗，首页页面里切换监听不到onUnload， 组件里监听不到destroyed
2024-12-12 17:49