Skip to content

N
nyx
Commit b93eb4aa by jscat
Options

nyx: 地图优化 

1. 优化图片和商家加载速度
before: loadMap()加载图片功能，获取图片size信息，getMemberPos只能串行计算；对快速加载影响很大。
after: 图片的尺寸直接从数据库读取，无需通过wx.getImageInfo载入
则loadMap()加载图片功能，获取图片size信息，getMemberPos计算商家坐标功能都可以异步计算
parent d876b266
正在显示 包含 77 行增加 和 18 行删除
增值产品-小程序及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` ( ...@@ -13,15 +13,17 @@ CREATE TABLE IF NOT EXISTS `tbl_area` (
`city` VARCHAR(40) NOT NULL COMMENT '城市名称', `city` VARCHAR(40) NOT NULL COMMENT '城市名称',
`district` VARCHAR(40) NOT NULL COMMENT '区域名称', `district` VARCHAR(40) NOT NULL COMMENT '区域名称',
`url` VARCHAR(200) DEFAULT '0' COMMENT '图片地址', `url` VARCHAR(200) DEFAULT '0' COMMENT '图片地址',
`width` VARCHAR(20) DEFAULT '0' COMMENT '图片width',
`height` VARCHAR(20) DEFAULT '0' COMMENT '图片height',
PRIMARY KEY (`id`) PRIMARY KEY (`id`)
) ENGINE=INNODB DEFAULT CHARSET=utf8 COMMENT '省市区表'; ) 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 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-jingan.jpg','2368','3168'),
('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-huangpu.jpg','2363','2530'),
('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-xuhui.jpg','2370','3179'),
('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-lujiazui.jpg','2361','2443'),
('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','2364','1793'),
('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','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; ...@@ -9,7 +9,7 @@ USE rockwell_key;
DROP VIEW IF EXISTS view_area_total; DROP VIEW IF EXISTS view_area_total;
CREATE VIEW view_area_total CREATE VIEW view_area_total
AS 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 FROM tbl_area aa
LEFT JOIN tbl_member_area bb ON bb.area_id=aa.id LEFT JOIN tbl_member_area bb ON bb.area_id=aa.id
GROUP BY 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({ ...@@ -58,6 +58,8 @@ Page({
city: [], city: [],
district: [], district: [],
url: [], url: [],
width: [],
height: [],
numBar:[], numBar:[],
// provinceIndex: 0, // provinceIndex: 0,
cityIndex: 0, cityIndex: 0,
...@@ -313,6 +315,8 @@ Page({ ...@@ -313,6 +315,8 @@ Page({
var district = [] var district = []
var numBar = [] var numBar = []
var url = [] var url = []
var width=[]
var height=[]
for (var i = 0; i < res.data.data.length; i++) { for (var i = 0; i < res.data.data.length; i++) {
// city.push(res.data.data[i].city) // city.push(res.data.data[i].city)
var cityName = res.data.data[i].city var cityName = res.data.data[i].city
...@@ -325,6 +329,8 @@ Page({ ...@@ -325,6 +329,8 @@ Page({
district.push(res.data.data[i].district) district.push(res.data.data[i].district)
numBar.push(res.data.data[i].numBar) numBar.push(res.data.data[i].numBar)
url.push(res.data.data[i].url) url.push(res.data.data[i].url)
width.push(res.data.data[i].width)
height.push(res.data.data[i].height)
} }
} }
cityIndex = json["上海市"]-1 cityIndex = json["上海市"]-1
...@@ -332,14 +338,21 @@ Page({ ...@@ -332,14 +338,21 @@ Page({
district: district, district: district,
numBar: numBar, numBar: numBar,
url: url, url: url,
width: width,
height:height,
city: city, city: city,
cityIndex:cityIndex, cityIndex:cityIndex,
}) })
//获得新的地区名 //获得新的地区名
var districtName = district[0] var districtName = district[0]
var areaName = city[cityIndex] + "_" + districtName var areaName = city[cityIndex] + "_" + districtName
//基于图片大小重置setData参数，必须最先运行
loadImgOnData(_this, width[0], height[0])
//分析图片是temp还是https获取
_this.loadMap(_this, url[0], areaName) _this.loadMap(_this, url[0], areaName)
//_this.getMemberPos("", areaName) //基于图片尺寸，计算member的pos
_this.getMemberPos("", areaName)
//是否缓存图片
_this.cacheImage(); _this.cacheImage();
} }
} }
...@@ -399,6 +412,8 @@ Page({ ...@@ -399,6 +412,8 @@ Page({
var district = [] var district = []
var numBar = [] var numBar = []
var url = [] var url = []
var width=[]
var height=[]
for (var i = 0; i < res.data.data.length; i++) { for (var i = 0; i < res.data.data.length; i++) {
var result = {} var result = {}
result["district"] = res.data.data[i].district result["district"] = res.data.data[i].district
...@@ -407,6 +422,8 @@ Page({ ...@@ -407,6 +422,8 @@ Page({
district.push(res.data.data[i].district) district.push(res.data.data[i].district)
numBar.push(res.data.data[i].numBar) numBar.push(res.data.data[i].numBar)
url.push(res.data.data[i].url) url.push(res.data.data[i].url)
width.push(res.data.data[i].width)
height.push(res.data.data[i].height)
list.push(result) list.push(result)
} }
_this.setData({ _this.setData({
...@@ -414,12 +431,15 @@ Page({ ...@@ -414,12 +431,15 @@ Page({
district: district, district: district,
numBar: numBar, numBar: numBar,
url: url, url: url,
width:width,
height:height,
}) })
//获得新的地区名 //获得新的地区名
var districtName = district[0] var districtName = district[0]
var areaName = cityName + "_" + districtName var areaName = cityName + "_" + districtName
loadImgOnData(_this, width[0], height[0])
_this.loadMap(_this, url[0], areaName) _this.loadMap(_this, url[0], areaName)
//_this.getMemberPos("", areaName) _this.getMemberPos("", areaName)
_this.cacheImage(); _this.cacheImage();
} }
} }
...@@ -510,7 +530,9 @@ Page({ ...@@ -510,7 +530,9 @@ Page({
var cityName = _this.__data__.city[cityIndex] var cityName = _this.__data__.city[cityIndex]
var districtName = _this.__data__.district[currentDistrictIndex] var districtName = _this.__data__.district[currentDistrictIndex]
var areaName = cityName + "_" + districtName var areaName = cityName + "_" + districtName
_this.loadMap(_this, _this.__data__.url[currentDistrictIndex], areaName) loadImgOnData(_this, _this.__data__.width[currentDistrictIndex], _this.__data__.height[currentDistrictIndex])
_this.loadMap(_this, _this.__data__.url[currentDistrictIndex], areaName)
_this.getMemberPos("", areaName)
_this.cacheImage(); _this.cacheImage();
}, },
...@@ -534,7 +556,7 @@ Page({ ...@@ -534,7 +556,7 @@ Page({
img_cache_key: img_cache_key, img_cache_key: img_cache_key,
imgUrl: imgUrl imgUrl: imgUrl
}) })
loadImgOnImage(self, tempPath, areaName) //loadImgOnImage(self, tempPath, areaName)
}, },
fail: function (errmsg) { fail: function (errmsg) {
console.log("===loadMap, fail Load res from temp") console.log("===loadMap, fail Load res from temp")
...@@ -545,7 +567,7 @@ Page({ ...@@ -545,7 +567,7 @@ Page({
img_cache_key: img_cache_key, img_cache_key: img_cache_key,
imgUrl: imgUrl imgUrl: imgUrl
}) })
loadImgOnImage(self, imgUrl, areaName) //loadImgOnImage(self, imgUrl, areaName)
}, },
}) })
} }
...@@ -556,7 +578,7 @@ Page({ ...@@ -556,7 +578,7 @@ Page({
img_cache_key: img_cache_key, img_cache_key: img_cache_key,
imgUrl: imgUrl imgUrl: imgUrl
}) })
loadImgOnImage(self, imgUrl, areaName) //loadImgOnImage(self, imgUrl, areaName)
} }
}, },
...@@ -676,6 +698,37 @@ function 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) { function throttle(fn, miniTimeCell) {
var timer = null, var timer = null,
previous = 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{ ...@@ -21,6 +21,8 @@ public class Rockwell_keyV_area_total{
private String city; // 城市名 private String city; // 城市名
private String district; // 地区名 private String district; // 地区名
private String url; // 该区地区 private String url; // 该区地区
private String width; // 已复工数目
private String height; // 已复工数目
private String numBar; // 已复工数目 private String numBar; // 已复工数目
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论