Skip to content

N
nyx
Commit b93eb4aa by jscat
Options

nyx: 地图优化 

1. 优化图片和商家加载速度
before: loadMap()加载图片功能，获取图片size信息，getMemberPos只能串行计算；对快速加载影响很大。
after: 图片的尺寸直接从数据库读取，无需通过wx.getImageInfo载入
则loadMap()加载图片功能，获取图片size信息，getMemberPos计算商家坐标功能都可以异步计算
parent d876b266
正在显示 包含 76 行增加 和 17 行删除
增值产品-小程序及app/doc/create_table_sql/key/create_table_area.sql
USE rockwell_key;
USE rockwell_key;
......@@ -13,15 +13,17 @@ CREATE TABLE IF NOT EXISTS `tbl_area` (
`city` VARCHAR(40) NOT NULL COMMENT '城市名称',
`district` VARCHAR(40) NOT NULL COMMENT '区域名称',
`url` VARCHAR(200) DEFAULT '0' COMMENT '图片地址',
`width` VARCHAR(20) DEFAULT '0' COMMENT '图片width',
`height` VARCHAR(20) DEFAULT '0' COMMENT '图片height',
PRIMARY KEY (`id`)
) ENGINE=INNODB DEFAULT CHARSET=utf8 COMMENT '省市区表';
INSERT INTO `tbl_area`(`code`, `province`, `city`, `district`, `url`)
INSERT INTO `tbl_area`(`code`, `province`, `city`, `district`, `url`, `width`, `height`)
VALUES
('000000', '0', '上海市', '静安区', 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/sh-jingan.jpg'),
('000000', '0', '上海市', '黄浦区', 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/sh-huangpu.jpg'),
('000000', '0', '上海市', '徐汇区', 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/sh-xuhui.jpg'),
('000000', '0', '上海市', '陆家嘴', 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/sh-lujiazui.jpg'),
('000000', '0', '上海市', '世博', 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/sh-shibo.jpg'),
('000000', '0', '北京市', '朝阳区', 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/sh-shibo.jpg')
('000000', '0', '上海市', '静安区', 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/sh-jingan.jpg','2368','3168'),
('000000', '0', '上海市', '黄浦区', 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/sh-huangpu.jpg','2363','2530'),
('000000', '0', '上海市', '徐汇区', 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/sh-xuhui.jpg','2370','3179'),
('000000', '0', '上海市', '陆家嘴', 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/sh-lujiazui.jpg','2361','2443'),
('000000', '0', '上海市', '世博', 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/sh-shibo.jpg','2364','1793'),
('000000', '0', '北京市', '朝阳区', 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/sh-shibo.jpg','2364','1793')
;
\ No newline at end of file
增值产品-小程序及app/doc/create_table_sql/key/create_view_area_total.sql
USE rockwell_key;
USE rockwell_key;
......@@ -9,7 +9,7 @@ USE rockwell_key;
DROP VIEW IF EXISTS view_area_total;
CREATE VIEW view_area_total
AS
SELECT aa.id, aa.code, aa.province, aa.city, aa.district, aa.url, COUNT(bb.id) AS num_bar
SELECT aa.id, aa.code, aa.province, aa.city, aa.district, aa.url, aa.width, aa.height, COUNT(bb.id) AS num_bar
FROM tbl_area aa
LEFT JOIN tbl_member_area bb ON bb.area_id=aa.id
GROUP BY aa.id
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/map/map.js
var config = wx.getStorageSync("config");
var config = wx.getStorageSync("config");
......@@ -58,6 +58,8 @@ Page({
city: [],
district: [],
url: [],
width: [],
height: [],
numBar:[],
// provinceIndex: 0,
cityIndex: 0,
......@@ -313,6 +315,8 @@ Page({
var district = []
var numBar = []
var url = []
var width=[]
var height=[]
for (var i = 0; i < res.data.data.length; i++) {
// city.push(res.data.data[i].city)
var cityName = res.data.data[i].city
......@@ -325,6 +329,8 @@ Page({
district.push(res.data.data[i].district)
numBar.push(res.data.data[i].numBar)
url.push(res.data.data[i].url)
width.push(res.data.data[i].width)
height.push(res.data.data[i].height)
}
}
cityIndex = json["上海市"]-1
......@@ -332,14 +338,21 @@ Page({
district: district,
numBar: numBar,
url: url,
width: width,
height:height,
city: city,
cityIndex:cityIndex,
})
//获得新的地区名
var districtName = district[0]
var areaName = city[cityIndex] + "_" + districtName
//基于图片大小重置setData参数，必须最先运行
loadImgOnData(_this, width[0], height[0])
//分析图片是temp还是https获取
_this.loadMap(_this, url[0], areaName)
//_this.getMemberPos("", areaName)
//基于图片尺寸，计算member的pos
_this.getMemberPos("", areaName)
//是否缓存图片
_this.cacheImage();
}
}
......@@ -399,6 +412,8 @@ Page({
var district = []
var numBar = []
var url = []
var width=[]
var height=[]
for (var i = 0; i < res.data.data.length; i++) {
var result = {}
result["district"] = res.data.data[i].district
......@@ -407,6 +422,8 @@ Page({
district.push(res.data.data[i].district)
numBar.push(res.data.data[i].numBar)
url.push(res.data.data[i].url)
width.push(res.data.data[i].width)
height.push(res.data.data[i].height)
list.push(result)
}
_this.setData({
......@@ -414,12 +431,15 @@ Page({
district: district,
numBar: numBar,
url: url,
width:width,
height:height,
})
//获得新的地区名
var districtName = district[0]
var areaName = cityName + "_" + districtName
loadImgOnData(_this, width[0], height[0])
_this.loadMap(_this, url[0], areaName)
//_this.getMemberPos("", areaName)
_this.getMemberPos("", areaName)
_this.cacheImage();
}
}
......@@ -510,7 +530,9 @@ Page({
var cityName = _this.__data__.city[cityIndex]
var districtName = _this.__data__.district[currentDistrictIndex]
var areaName = cityName + "_" + districtName
loadImgOnData(_this, _this.__data__.width[currentDistrictIndex], _this.__data__.height[currentDistrictIndex])
_this.loadMap(_this, _this.__data__.url[currentDistrictIndex], areaName)
_this.getMemberPos("", areaName)
_this.cacheImage();
},
......@@ -534,7 +556,7 @@ Page({
img_cache_key: img_cache_key,
imgUrl: imgUrl
})
loadImgOnImage(self, tempPath, areaName)
//loadImgOnImage(self, tempPath, areaName)
},
fail: function (errmsg) {
console.log("===loadMap, fail Load res from temp")
......@@ -545,7 +567,7 @@ Page({
img_cache_key: img_cache_key,
imgUrl: imgUrl
})
loadImgOnImage(self, imgUrl, areaName)
//loadImgOnImage(self, imgUrl, areaName)
},
})
}
......@@ -556,7 +578,7 @@ Page({
img_cache_key: img_cache_key,
imgUrl: imgUrl
})
loadImgOnImage(self, imgUrl, areaName)
//loadImgOnImage(self, imgUrl, areaName)
}
},
......@@ -676,6 +698,37 @@ function loadImgOnImage(self, imgUrl, areaName) {
})
}
// system function
function loadImgOnData(self, width, height) {
self.oldScale = 1
//已转换为px 图片原始大小/显示大小
self.initRatio = height / self.imgViewHeight
//jscat 取一个最大的ratio, max(ratio_height, ratio_width)，以避免溢出
if (self.initRatio < width / (750 * self.deviceRatio)) {
self.initRatio = width / (750 * self.deviceRatio)
}
//图片显示大小
//jscat 为了更好显示, 这里放大了图片
self.scaleWidth = (width / self.initRatio) * 2
self.scaleHeight = (height / self.initRatio) * 2
self.initScaleWidth = self.scaleWidth
self.initScaleHeight = self.scaleHeight
self.initWidth = width
self.initHeight = height
self.startX = 750 * self.deviceRatio / 2 - self.scaleWidth / 2;
self.startY = self.imgViewHeight / 2 - self.scaleHeight / 2;
self.setData({
imgWidth: self.scaleWidth,
imgHeight: self.scaleHeight,
imgTop: self.startY,
imgLeft: self.startX,
initImgTop: self.startY,
initImgLeft: self.startX
})
// wx.hideLoading();
}
function throttle(fn, miniTimeCell) {
var timer = null,
previous = null;
......
增值产品-小程序及app/nyx_app_key/api/src/main/java/cn/com/fun/nyxkey/api/domain/Rockwell_keyV_area_total.java
package cn.com.fun.nyxkey.api.domain;
package cn.com.fun.nyxkey.api.domain;
......@@ -21,6 +21,8 @@ public class Rockwell_keyV_area_total{
private String city; // 城市名
private String district; // 地区名
private String url; // 该区地区
private String width; // 已复工数目
private String height; // 已复工数目
private String numBar; // 已复工数目
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论