Skip to content

N
nyx
Commit 45df79d1 by jscat
Options

nyx: map初版 

1 bug: 初次加载数据和图片的时候太慢-需要优化
parent 89ac4d5d
正在显示 包含 334 行增加 和 62 行删除
增值产品-小程序及app/nyx-master/config.js
//config.js API全局域名配置 //config.js API全局域名配置
//config.js API全局域名配置 //config.js API全局域名配置
var prod = 0; var prod = 0;
var local = 1; var local = 0;
var test = 0; var test = 1;
var debug = 0; //是否打印调试信息 var debug = 0; //是否打印调试信息
var host_key = "https://fun.hisuhong.com"; var host_key = "https://fun.hisuhong.com";
...@@ -48,6 +48,9 @@ var config={ ...@@ -48,6 +48,9 @@ var config={
user_reg_url: host_key + "/api/nyx/user/reg", user_reg_url: host_key + "/api/nyx/user/reg",
userinfo_query_url: host_key + "/api/nyx/userinfo/query", userinfo_query_url: host_key + "/api/nyx/userinfo/query",
notes_query_url: host_key + "/api/nyx/post/query", notes_query_url: host_key + "/api/nyx/post/query",
city_list_url: host_key + "/api/nyx/citylist/query",
city_query_url: host_key + "/api/nyx/city/query",
member_query_url: host_key + "/api/nyx/member/pos/query",
socket_url: socket_url, socket_url: socket_url,
} }
module.exports=config; module.exports=config;
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/discover/note-writer/note-writer.js
// pages/index/note-writer/note-writer.js // pages/discover/note-writer/note-writer.js
// pages/index/note-writer/note-writer.js // pages/discover/note-writer/note-writer.js
Page({ Page({
/** /**
......
增值产品-小程序及app/nyx-master/pages/discover/note-writer/note-writer.wxml
<view class="page"> <view class="page">
<view class="page"> <view class="page">
<span>尚未完成</span> <span></span>
</view> </view>
增值产品-小程序及app/nyx-master/pages/map/map.js
var config = wx.getStorageSync("config"); var config = wx.getStorageSync("config");
...@@ -12,6 +12,8 @@ Page({ ...@@ -12,6 +12,8 @@ Page({
maxScale: 2.5, maxScale: 2.5,
doodleImageSrc: '', doodleImageSrc: '',
tempImageSrc: 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/jingan.jpg', tempImageSrc: 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/jingan.jpg',
img_cache_key: "",
imgUrl: "",
originImageSrc: '../../icon/sakura.jpg', originImageSrc: '../../icon/sakura.jpg',
imgWidth: 0, imgWidth: 0,
imgHeight: 0, imgHeight: 0,
...@@ -26,24 +28,24 @@ Page({ ...@@ -26,24 +28,24 @@ Page({
deviceRatio: 1, deviceRatio: 1,
allText : [ allText : [
{ // {
id: "mid_001", // id: "mid_001",
name: "Renaissance Bar", // name: "Renaissance Bar",
address: "愚园路610号", // address: "愚园路610号",
textL: 0, // 参照图是可视的原点 // textL: 0, // 参照图是可视的原点
textT: 0, // textT: 0,
initTextL: 0, // initTextL: 0,
initTextT: 0, // initTextT: 0,
}, // },
{ // {
id: "mid_123", // id: "mid_123",
name: "CinCin Wine Cellar", // name: "CinCin Wine Cellar",
address: "五原路610号", // address: "五原路610号",
textL: 50, // textL: 50,
textT: 100, // textT: 100,
initTextL: 50, // initTextL: 50,
initTextT: 100, // initTextT: 100,
}, // },
], ],
// texted:false, // texted:false,
indexTagSelected: -1, indexTagSelected: -1,
...@@ -52,16 +54,23 @@ Page({ ...@@ -52,16 +54,23 @@ Page({
//start - address selector //start - address selector
//refer https://github.com/parasol-wu/wxapp-area-picker //refer https://github.com/parasol-wu/wxapp-area-picker
province: [], // province: [],
city: ['上海'], city: [],
district: ['静安区'], district: [],
provinceIndex: 0, url: [],
numBar:[],
// provinceIndex: 0,
cityIndex: 0, cityIndex: 0,
districtIndex: 0, districtIndex: 0,
provinceCode: '',
cityCode: '', cityInfoIndex: 0,
districtCode: '', cityInfo: [
numBar: '5', {
district: "",
url: "",
number: "",
}
],
//end - address selector //end - address selector
//start - long press event //start - long press event
...@@ -75,6 +84,7 @@ Page({ ...@@ -75,6 +84,7 @@ Page({
*/ */
onLoad: function () { onLoad: function () {
var self = this var self = this
self.device = wx.getSystemInfoSync() self.device = wx.getSystemInfoSync()
//self.device = app.globalData.myDevice //self.device = app.globalData.myDevice
// jscat miniprogram default width is 750rpx // jscat miniprogram default width is 750rpx
...@@ -86,24 +96,27 @@ Page({ ...@@ -86,24 +96,27 @@ Page({
self.setData({ self.setData({
imgViewHeight: self.imgViewHeight, imgViewHeight: self.imgViewHeight,
deviceRatio: self.deviceRatio, deviceRatio: self.deviceRatio,
// tempCanvasHeight: self.imgViewHeight,
page: 'mainPage',
}) })
//chooseImage(self)
loadImgOnImage(self) //获取所有城市列表
self.initCityInfo();
}, },
chooseOneImage() {
chooseImage(this) /**
}, * 生命周期函数--监听页面初次渲染完成
toMainPage() { */
loadImgOnImage(this) onReady: function () {
this.setData({
page: 'mainPage'
})
}, },
bestShow() {
loadImgOnImage(this) /**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var self = this;
// self.cacheImage();
}, },
uploadScaleStart(e) { //缩放图片 uploadScaleStart(e) { //缩放图片
let self = this let self = this
let xDistance, yDistance let xDistance, yDistance
...@@ -277,17 +290,274 @@ Page({ ...@@ -277,17 +290,274 @@ Page({
if (name != "" && address != "") { if (name != "" && address != "") {
_this.addMember(name, address) _this.addMember(name, address)
} }
} },
// 1. 获取全部的city数据
// 2. 获取city="上海市"的所有"district, url, 及num_bar
// 3. 获取某个区的allText
initCityInfo: function(){
var _this = this;
_this.getCityList();
},
/**
* getCityList
*/
// 获取全部的city数据
getCityList: function () {
var _this = this;
var strUrl = config.city_list_url
config.debug == 1 ? console.log("===getCityList strUrl is: \"" + strUrl + "\"") : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.data.resultCode == 200) {
//表示HTTP请求成功
console.log(res.data);
var list = []
for (var i = 0; i < res.data.data.length; i++) {
list.push(res.data.data[i].city)
}
var city = list[0]
_this.getCityInfo(city)
_this.setData({
city: list,
})
}
}
})
},
//
getCityInfo: function(cityName)
{
var _this = this;
var strUrl = config.city_query_url + "?city=" + cityName
config.debug == 1 ? console.log("===getCityInfo strUrl is: \"" + strUrl + "\"") : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.data.resultCode == 200) {
//表示HTTP请求成功
console.log(res.data);
var list = []
var district = []
var numBar = []
var url = []
for (var i = 0; i < res.data.data.length; i++) {
var result = {}
result["district"] = res.data.data[i].district
result["url"] = res.data.data[i].url
result["number"] = res.data.data[i].numBar
district.push(res.data.data[i].district)
numBar.push(res.data.data[i].numBar)
url.push(res.data.data[i].url)
list.push(result)
}
_this.setData({
cityInfo: list,
district: district,
numBar: numBar,
url: url,
})
//获得新的地区名
var districtName = district[0]
var areaName = cityName + "_" + districtName
_this.getMemberPos("", areaName)
_this.loadMap(_this, url[0], areaName)
_this.cacheImage();
}
}
})
},
//获取全部的member信息
//to allText
// id: "mid_123",
// name: "CinCin Wine Cellar",
// address: "五原路610号",
// initTextL: 50,
// initTextT: 100,
getMemberPos: function (area_id, area_name) {
var _this = this;
var query_string = area_id == "" ? "?areaName=" + area_name : "?areaId=" + area_id
var strUrl = config.member_query_url + query_string
config.debug == 1 ? console.log("===getMemberPos strUrl is: \"" + strUrl + "\"") : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.data.resultCode == 200) {
//表示HTTP请求成功
console.log(res.data);
var list = []
for (var i = 0; i < res.data.data.length; i++) {
var result = {}
result["id"] = res.data.data[i].id
result["name"] = res.data.data[i].memberName
result["textL"] = parseInt(res.data.data[i].posLeft)
result["textT"] = parseInt(res.data.data[i].posTop)
result["address"] = res.data.data[i].memberAddress
result["initTextL"] = parseInt(res.data.data[i].posLeft)
result["initTextT"] = parseInt(res.data.data[i].posTop)
list.push(result)
}
_this.setData({
allText: list,
})
}
}
})
},
//获取City下的district和num_bar数据
//输入cityName
//输出member
onCityPicker: function (e)
{
var _this = this;
var currentCityIndex = e.detail.value
var cityName = _this.__data__.city[currentCityIndex]
_this.setData(
{
cityIndex : currentCityIndex,
districtIndex:0,
}
)
_this.getCityInfo(cityName)
},
//获取City下的district和num_bar数据
//输入cityName
//输出member
onDistrictPicker: function (e) {
var _this = this;
var currentDistrictIndex = e.detail.value
var cityIndex = _this.__data__.cityIndex
_this.setData(
{
districtIndex: currentDistrictIndex,
}
)
var cityName = _this.__data__.city[cityIndex]
var districtName = _this.__data__.district[currentDistrictIndex]
var areaName = cityName + "_" + districtName
_this.getMemberPos("", areaName)
_this.loadMap(_this, _this.__data__.url[currentDistrictIndex], areaName)
_this.cacheImage();
},
loadMap: function (self, imgUrl, areaName)
{
var img_cache_key = areaName + "_imgcache"
var path = wx.getStorageSync(img_cache_key) == "" ? imgUrl : wx.getStorageSync(img_cache_key)
console.log("===loadMap, imgage path: "+path)
self.setData({
tempImageSrc: path,
img_cache_key: img_cache_key,
imgUrl: imgUrl
})
loadImgOnImage(self, path)
},
cacheImageFunc1: function (img_cache_key, imgUrl)
{
wx.downloadFile({
url: imgUrl,
success: function (res) {
if (res.statusCode === 200) {
console.log('图片下载成功' + res.tempFilePath)
// 第二步: 使用小程序的文件系统，通过小程序的api获取到全局唯一的文件管理器
const fs = wx.getFileSystemManager()
// fs为全局唯一的文件管理器。那么文件管理器的作用是什么，我们可以用来做什么呢？
// 文件管理器的作用之一就是可以根据临时文件路径，通过saveFile把文件保存到本地缓存.
fs.saveFile({
tempFilePath: res.tempFilePath, // 传入一个临时文件路径
success(res) {
console.log('图片缓存成功', res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径
// 此时图片本地缓存已经完成，res.savedFilePath为本地存储的路径。
//小程序的本地文件路径标准： {{协议名}}://文件路径
//协议名在 iOS/Android 客户端为 "wxfile"，在开发者工具上为 "http"，
//开发者无需关注这个差异，也不应在代码中去硬编码完整文件路径。
//好了，到此为止，我们已经把图片缓存到本地了，而且我们也得到了本地缓存的路径。
// 那么我们把本地缓存的路径，通过小程序的数据缓存服务保存下来。
// 下次打开小程序 首先去缓存中检查是否存在本地文件的缓存路径
// 如果有，直接image src赋值本地缓存路径。
//如果没有，则是第一次下载图片，或者用户手动清理缓存造成的。
wx.setStorageSync(img_cache_key, res.savedFilePath)
}
})
} else {
console.log('响应失败', res.statusCode)
}
}
})
},
cacheImageFunc: function (img_cache_key, imgUrl) {
wx.downloadFile({
url: imgUrl,
success: function (res) {
if (res.statusCode === 200) {
console.log('图片下载成功' + res.tempFilePath)
// 第二步: 使用小程序的文件系统，通过小程序的api获取到全局唯一的文件管理器
// 此时图片本地缓存已经完成，res.savedFilePath为本地存储的路径。
//小程序的本地文件路径标准： {{协议名}}://文件路径
//协议名在 iOS/Android 客户端为 "wxfile"，在开发者工具上为 "http"，
//开发者无需关注这个差异，也不应在代码中去硬编码完整文件路径。
//好了，到此为止，我们已经把图片缓存到本地了，而且我们也得到了本地缓存的路径。
// 那么我们把本地缓存的路径，通过小程序的数据缓存服务保存下来。
// 下次打开小程序 首先去缓存中检查是否存在本地文件的缓存路径
// 如果有，直接image src赋值本地缓存路径。
//如果没有，则是第一次下载图片，或者用户手动清理缓存造成的。
wx.setStorageSync(img_cache_key, res.tempFilePath)
} else {
console.log('响应失败', res.statusCode)
}
}
})
},
cacheImage: function ()
{
var _this = this;
var img_cache_key = _this.__data__.img_cache_key
var imgUrl = _this.__data__.imgUrl
if (wx.getStorageSync(img_cache_key)=="")
{
_this.cacheImageFunc(img_cache_key, imgUrl)
}
},
}) })
function loadImgOnImage(self) { // system function
function loadImgOnImage(self, imgUrl) {
wx.getImageInfo({ wx.getImageInfo({
src: self.data.tempImageSrc, src: imgUrl,
success: function (res) { success: function (res) {
self.oldScale = 1 self.oldScale = 1
self.initRatio = res.height / self.imgViewHeight //已转换为px 图片原始大小/显示大小 //已转换为px 图片原始大小/显示大小
//jscat 取一个最大的ratio, max(ratio_height, ratio_width)，以避免溢出 self.initRatio = res.height / self.imgViewHeight
//jscat 取一个最大的ratio, max(ratio_height, ratio_width)，以避免溢出
if (self.initRatio < res.width / (750 * self.deviceRatio)) { if (self.initRatio < res.width / (750 * self.deviceRatio)) {
self.initRatio = res.width / (750 * self.deviceRatio) self.initRatio = res.width / (750 * self.deviceRatio)
} }
...@@ -310,7 +580,7 @@ function loadImgOnImage(self) { ...@@ -310,7 +580,7 @@ function loadImgOnImage(self) {
initImgTop: self.startY, initImgTop: self.startY,
initImgLeft: self.startX initImgLeft: self.startX
}) })
wx.hideLoading(); // wx.hideLoading();
} }
}) })
} }
......
增值产品-小程序及app/nyx-master/pages/map/map.wxml
<view class="page"> <view class="page">
...@@ -3,18 +3,16 @@ ...@@ -3,18 +3,16 @@
<view class="container"> <view class="container">
<view class='address'> <view class='address'>
<view class='selectAddress'> <view class='selectAddress'>
<picker mode="selector" range="{{city}}" value="{{cityIndex}}" bindchange="cityPicker" class='address_province' <picker mode="selector" range="{{city}}" value="{{cityIndex}}" bindchange="onCityPicker" class='address_province'>
data-citycode="{{cityCode}}">
<text>{{city[cityIndex]}}</text> <text>{{city[cityIndex]}}</text>
<image src='../../icon/down.png' style='width: 56rpx;height: 56rpx;' class='selecrtImg'></image> <image src='../../icon/down.png' style='width: 56rpx;height: 56rpx;' class='selecrtImg'></image>
</picker> </picker>
<picker mode="selector" range="{{district}}" value="{{districtIndex}}" bindchange="districtPicker" class='address_province' <picker mode="selector" range="{{district}}" value="{{districtIndex}}" bindchange="onDistrictPicker" class='address_province'>
data-councode="{{districtCode}}">
<text>{{district[districtIndex]}}</text> <text>{{district[districtIndex]}}</text>
<image src='../../icon/down.png' style='width: 56rpx;height: 56rpx;' class='selecrtImg'></image> <image src='../../icon/down.png' style='width: 56rpx;height: 56rpx;' class='selecrtImg'></image>
</picker> </picker>
<view class='address_province'> <view class='address_province'>
<text>已复工{{numBar}}家</text> <text>已复工{{numBar[districtIndex]}}家</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -29,8 +27,8 @@ ...@@ -29,8 +27,8 @@
<!-- image left:textL-15px;top:textT-15;width:60rps;height:60rpx --> <!-- image left:textL-15px;top:textT-15;width:60rps;height:60rpx -->
<!-- text left:textL+15px;top:textT-15; --> <!-- text left:textL+15px;top:textT-15; -->
<image src="../../icon/tag.png" style="left:{{item.textL-imgTagWidth*deviceRatio/2}}px;top:{{item.textT-imgTagWidth*deviceRatio/2}}px;position:absolute;width:{{imgTagWidth}}rpx;height:{{imgTagWidth}}rpx" bind:tap="onSelectTap" id="{{index}}"></image> <image src="../../icon/tag.png" style="left:{{item.textL-imgTagWidth*deviceRatio/2}}px;top:{{item.textT-imgTagWidth*deviceRatio/2}}px;position:absolute;width:{{imgTagWidth}}rpx;height:{{imgTagWidth}}rpx" bind:tap="onSelectTap" id="{{index}}"></image>
<text class="active-text" style="left:{{item.textL+imgTagWidth*deviceRatio/2}}px;top:{{item.textT-imgTagWidth*deviceRatio/2}}px;">{{item.name}}</text> <text class="active-text" style="left:{{item.textL+imgTagWidth*deviceRatio/2}}px;top:{{item.textT-60*deviceRatio/2}}px;">{{item.name}}</text>
</block> </block>
</view> </view>
<!-- 主页面-底部--> <!-- 主页面-底部-->
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论