pbu7of5i9
/
map
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

merge into: pbu7of5i9:master2
Branches Tags
pbu7of5i9:master2
pbu7of5i9:master1
pbu7of5i9:master
...
pull from: pbu7of5i9:master
Branches Tags
pbu7of5i9:master2
pbu7of5i9:master1
pbu7of5i9:master

No commits in common. 'master2' and 'master' have entirely different histories.
master2 ... master

26 changed files with 3 additions and 1174 deletions
Show Stats

14
.gitignore vendored
Unescape View File

@ -1,14 +0,0 @@
# Windows
[Dd]esktop.ini
Thumbs.db
$RECYCLE.BIN/
# macOS
.DS_Store
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
# Node.js
node_modules/

1
1.txt
Unescape View File

@ -0,0 +1 @@
121212121

2
README.md
Unescape View File

@ -0,0 +1,2 @@
# map

3
app.js
Unescape View File

@ -1,3 +0,0 @@
App({
onLaunch() {}
})

14
app.json
Unescape View File

@ -1,14 +0,0 @@
{
"pages":[
"index/index",
"map/map"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}

0
app.wxss
Unescape View File

250
ec-canvas/ec-canvas.js
Unescape View File

@ -1,250 +0,0 @@
import WxCanvas from './wx-canvas';
import * as echarts from './echarts';
let ctx;
function compareVersion(v1, v2) {
v1 = v1.split('.')
v2 = v2.split('.')
const len = Math.max(v1.length, v2.length)
while (v1.length < len) {
v1.push('0')
}
while (v2.length < len) {
v2.push('0')
}
for (let i = 0; i < len; i++) {
const num1 = parseInt(v1[i])
const num2 = parseInt(v2[i])
if (num1 > num2) {
return 1
} else if (num1 < num2) {
return -1
}
}
return 0
}
Component({
properties: {
canvasId: {
type: String,
value: 'ec-canvas'
},
ec: {
type: Object
},
forceUseOldCanvas: {
type: Boolean,
value: false
}
},
data: {
isUseNewCanvas: false
},
ready: function () {
// Disable prograssive because drawImage doesn't support DOM as parameter
// See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
echarts.registerPreprocessor(option => {
if (option && option.series) {
if (option.series.length > 0) {
option.series.forEach(series => {
series.progressive = 0;
});
}
else if (typeof option.series === 'object') {
option.series.progressive = 0;
}
}
});
if (!this.data.ec) {
console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '
+ 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
return;
}
if (!this.data.ec.lazyLoad) {
this.init();
}
},
methods: {
init: function (callback) {
const version = wx.getSystemInfoSync().SDKVersion
const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0;
const forceUseOldCanvas = this.data.forceUseOldCanvas;
const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas;
this.setData({ isUseNewCanvas });
if (forceUseOldCanvas && canUseNewCanvas) {
console.warn('开发者强制使用旧canvas,建议关闭');
}
if (isUseNewCanvas) {
// console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
// 2.9.0 可以使用 <canvas type="2d"></canvas>
this.initByNewWay(callback);
} else {
const isValid = compareVersion(version, '1.9.91') >= 0
if (!isValid) {
console.error('微信基础库版本过低，需大于等于 1.9.91。'
+ '参见：https://github.com/ecomfe/echarts-for-weixin'
+ '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
return;
} else {
console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能');
this.initByOldWay(callback);
}
}
},
initByOldWay(callback) {
// 1.9.91 <= version < 2.9.0：原来的方式初始化
ctx = wx.createCanvasContext(this.data.canvasId, this);
const canvas = new WxCanvas(ctx, this.data.canvasId, false);
echarts.setCanvasCreator(() => {
return canvas;
});
// const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
const canvasDpr = 1
var query = wx.createSelectorQuery().in(this);
query.select('.ec-canvas').boundingClientRect(res => {
if (typeof callback === 'function') {
this.chart = callback(canvas, res.width, res.height, canvasDpr);
}
else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr);
}
else {
this.triggerEvent('init', {
canvas: canvas,
width: res.width,
height: res.height,
canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init
});
}
}).exec();
},
initByNewWay(callback) {
// version >= 2.9.0：使用新的方式初始化
const query = wx.createSelectorQuery().in(this)
query
.select('.ec-canvas')
.fields({ node: true, size: true })
.exec(res => {
const canvasNode = res[0].node
this.canvasNode = canvasNode
const canvasDpr = wx.getSystemInfoSync().pixelRatio
const canvasWidth = res[0].width
const canvasHeight = res[0].height
const ctx = canvasNode.getContext('2d')
const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode)
echarts.setCanvasCreator(() => {
return canvas
})
if (typeof callback === 'function') {
this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)
} else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr)
} else {
this.triggerEvent('init', {
canvas: canvas,
width: canvasWidth,
height: canvasHeight,
dpr: canvasDpr
})
}
})
},
canvasToTempFilePath(opt) {
if (this.data.isUseNewCanvas) {
// 新版
const query = wx.createSelectorQuery().in(this)
query
.select('.ec-canvas')
.fields({ node: true, size: true })
.exec(res => {
const canvasNode = res[0].node
opt.canvas = canvasNode
wx.canvasToTempFilePath(opt)
})
} else {
// 旧的
if (!opt.canvasId) {
opt.canvasId = this.data.canvasId;
}
ctx.draw(true, () => {
wx.canvasToTempFilePath(opt, this);
});
}
},
touchStart(e) {
if (this.chart && e.touches.length > 0) {
var touch = e.touches[0];
var handler = this.chart.getZr().handler;
handler.dispatch('mousedown', {
zrX: touch.x,
zrY: touch.y
});
handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y
});
handler.processGesture(wrapTouch(e), 'start');
}
},
touchMove(e) {
if (this.chart && e.touches.length > 0) {
var touch = e.touches[0];
var handler = this.chart.getZr().handler;
handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y
});
handler.processGesture(wrapTouch(e), 'change');
}
},
touchEnd(e) {
if (this.chart) {
const touch = e.changedTouches ? e.changedTouches[0] : {};
var handler = this.chart.getZr().handler;
handler.dispatch('mouseup', {
zrX: touch.x,
zrY: touch.y
});
handler.dispatch('click', {
zrX: touch.x,
zrY: touch.y
});
handler.processGesture(wrapTouch(e), 'end');
}
}
}
});
function wrapTouch(event) {
for (let i = 0; i < event.touches.length; ++i) {
const touch = event.touches[i];
touch.offsetX = touch.x;
touch.offsetY = touch.y;
}
return event;
}

4
ec-canvas/ec-canvas.json
Unescape View File

@ -1,4 +0,0 @@
{
"component": true,
"usingComponents": {}
}

4
ec-canvas/ec-canvas.wxml
Unescape View File

@ -1,4 +0,0 @@
<!-- 新的：接口对其了H5 -->
<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
<!-- 旧的 -->
<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>

4
ec-canvas/ec-canvas.wxss
Unescape View File

@ -1,4 +0,0 @@
.ec-canvas {
width: 100%;
height: 100%;
}

45
ec-canvas/echarts.js
View File

File diff suppressed because one or more lines are too long

105
ec-canvas/wx-canvas.js
Unescape View File

@ -1,105 +0,0 @@
export default class WxCanvas {
constructor(ctx, canvasId, isNew, canvasNode) {
this.ctx = ctx;
this.canvasId = canvasId;
this.chart = null;
this.isNew = isNew
if (isNew) {
this.canvasNode = canvasNode;
}
else {
this._initStyle(ctx);
}
// this._initCanvas(zrender, ctx);
this._initEvent();
}
getContext(contextType) {
if (contextType === '2d') {
return this.ctx;
}
}
// canvasToTempFilePath(opt) {
// if (!opt.canvasId) {
// opt.canvasId = this.canvasId;
// }
// return wx.canvasToTempFilePath(opt, this);
// }
setChart(chart) {
this.chart = chart;
}
attachEvent() {
// noop
}
detachEvent() {
// noop
}
_initCanvas(zrender, ctx) {
zrender.util.getContext = function () {
return ctx;
};
zrender.util.$override('measureText', function (text, font) {
ctx.font = font || '12px sans-serif';
return ctx.measureText(text);
});
}
_initStyle(ctx) {
ctx.createRadialGradient = () => {
return ctx.createCircularGradient(arguments);
};
}
_initEvent() {
this.event = {};
const eventNames = [{
wxName: 'touchStart',
ecName: 'mousedown'
}, {
wxName: 'touchMove',
ecName: 'mousemove'
}, {
wxName: 'touchEnd',
ecName: 'mouseup'
}, {
wxName: 'touchEnd',
ecName: 'click'
}];
eventNames.forEach(name => {
this.event[name.wxName] = e => {
const touch = e.touches[0];
this.chart.getZr().handler.dispatch(name.ecName, {
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
zrY: name.wxName === 'tap' ? touch.clientY : touch.y
});
};
});
}
set width(w) {
if (this.canvasNode) this.canvasNode.width = w
}
set height(h) {
if (this.canvasNode) this.canvasNode.height = h
}
get width() {
if (this.canvasNode)
return this.canvasNode.width
return 0
}
get height() {
if (this.canvasNode)
return this.canvasNode.height
return 0
}
}

BIN
image/avatar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 76 KiB

59
index/index.js
Unescape View File

@ -1,59 +0,0 @@
const app = getApp()
Page({
data: {
translateX: 0, // 位移x坐标 单位px
translateY: 0, // 位移y坐标 单位px
distance: 0, // 双指接触点距离
scale: 1, // 缩放倍数
rotate: 0, // 旋转角度
oldRotate: 0, // 上一次旋转停止后的角度
startMove: { // 起始位移距离
x: 0,
y: 0,
},
startTouches: [] // 起始点touch数组
},
touchStart(e) {
const touches = e.touches
const { translateX, translateY } = this.data
const { pageX, pageY } = touches[0]
this.data.startMove = {
x: pageX - translateX,
y: pageY - translateY
}
this.data.startTouches = touches
},
touchMove(e) {
const touches = e.touches
const { pageX: onePageX, pageY: onePageY } = touches[0]
const { startMove, scale, distance: oldDistance, startTouches, oldRotate } = this.data
if (touches.length === 2 && startTouches.length === 2) {
const { pageX: twoPageX, pageY: twoPageY } = touches[1]
const distance = Math.sqrt((twoPageX - onePageX) ** 2 + (twoPageY - onePageY) ** 2)
let rotate = this.getAngle(touches[0], touches[1]) - this.getAngle(startTouches[0], startTouches[1]) + oldRotate
rotate = rotate > 360 ? rotate - 360 : rotate
this.data.distance = distance
this.setData({
scale: scale * (distance / (oldDistance || distance)),
rotate
})
} else if (startTouches.length !== 2) {
this.setData({
translateX: onePageX - startMove.x,
translateY: onePageY - startMove.y
})
}
},
touchEnd() {
this.data.oldRotate = this.data.rotate
},
getAngle(p1, p2) {
const x = p1.pageX - p2.pageX
const y = p1.pageY- p2.pageY
return Math.atan2(y, x) * 180 / Math.PI
}
})

3
index/index.json
Unescape View File

@ -1,3 +0,0 @@
{
"usingComponents": {}
}

10
index/index.wxml
Unescape View File

@ -1,10 +0,0 @@
<view style="height: 100vh; width: 100vw">
<image
src="/image/avatar.png"
class="touch-img"
style="transform: translate({{translateX}}px, {{translateY}}px) scale({{scale}}) rotate({{rotate}}deg);"
catch:touchstart="touchStart"
catch:touchmove="touchMove"
catch:touchend="touchEnd"
/>
</view>

5
index/index.wxss
Unescape View File

@ -1,5 +0,0 @@
.touch-img {
width: 300rpx;
height: 300rpx;
border-radius: 50%;
}

350
map/demo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 146 KiB

115
map/map.js
Unescape View File

@ -1,115 +0,0 @@
import * as echarts from '../ec-canvas/echarts';
let chart = null;
function initChart(canvas, width, height, dpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option;
let svg='';
echarts.registerMap('MacOdrum-LV5-floorplan-web', { svg: svg });
option = {
title: {
text: 'Visit Route',
left: 'center',
bottom: 10
},
tooltip: {},
geo: {
map: 'MacOdrum-LV5-floorplan-web',
roam: true,
emphasis: {
itemStyle: {
color: undefined
},
label: {
show: false
}
}
},
series: [
{
name: 'Route',
type: 'lines',
coordinateSystem: 'geo',
geoIndex: 0,
emphasis: {
label: {
show: false
}
},
polyline: true,
lineStyle: {
color: '#c46e54',
width: 5,
opacity: 1,
type: 'dotted'
},
effect: {
show: true,
period: 8,
color: '#a10000',
constantSpeed: 80,
trailLength: 0,
symbolSize: [20, 12],
symbol:
'path://M35.5 40.5c0-22.16 17.84-40 40-40s40 17.84 40 40c0 1.6939-.1042 3.3626-.3067 5H35.8067c-.2025-1.6374-.3067-3.3061-.3067-5zm90.9621-2.6663c-.62-1.4856-.9621-3.1182-.9621-4.8337 0-6.925 5.575-12.5 12.5-12.5s12.5 5.575 12.5 12.5a12.685 12.685 0 0 1-.1529 1.9691l.9537.5506-15.6454 27.0986-.1554-.0897V65.5h-28.7285c-7.318 9.1548-18.587 15-31.2715 15s-23.9535-5.8452-31.2715-15H15.5v-2.8059l-.0937.0437-8.8727-19.0274C2.912 41.5258.5 37.5549.5 33c0-6.925 5.575-12.5 12.5-12.5S25.5 26.075 25.5 33c0 .9035-.0949 1.784-.2753 2.6321L29.8262 45.5h92.2098z'
},
data: [
{
coords: [
[110.6189462165178, 456.64349563895087],
[124.10988522879458, 450.8570048730469],
[123.9272226116071, 389.9520693708147],
[61.58708083147317, 386.87942320312504],
[61.58708083147317, 72.8954315876116],
[258.29514854771196, 72.8954315876116],
[260.75457021484374, 336.8559607533482],
[280.5277985253906, 410.2406672084263],
[275.948185765904, 528.0254369698661],
[111.06907909458701, 552.795792593471],
[118.87138231445309, 701.365737015904],
[221.36468155133926, 758.7870354617745],
[307.86195445452006, 742.164737297712],
[366.8489324762834, 560.9895157073103],
[492.8750778390066, 560.9895157073103],
[492.8750778390066, 827.9639780566406],
[294.9255269587053, 827.9639780566406],
[282.79803391043527, 868.2476088113839]
]
}
]
}
]
};
chart.setOption(option);
return chart;
}
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦！',
path: 'map/map',
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: initChart
}
},
onReady() {
setTimeout(function () {
// 获取 chart 实例的方式
// console.log(chart)
}, 2000);
}
});

5
map/map.json
Unescape View File

@ -1,5 +0,0 @@
{
"usingComponents": {
"ec-canvas": "../ec-canvas/ec-canvas"
}
}

5
map/map.wxml
Unescape View File

@ -1,5 +0,0 @@
<view class="container" style="height: 100vh;">
<image src="../map/demo.svg"></image>
<ec-canvas id="mychart-dom-map" canvas-id="mychart-map"
ec="{{ ec }}" style="height: 603px;"></ec-canvas>
</view>

0
map/map.wxss
Unescape View File

81
map/mapData.js
Unescape View File

@ -1,81 +0,0 @@
$.get(
ROOT_PATH + '/data/asset/geo/MacOdrum-LV5-floorplan-web.svg',
function (svg) {
echarts.registerMap('MacOdrum-LV5-floorplan-web', { svg: svg });
option = {
title: {
text: 'Visit Route',
left: 'center',
bottom: 10
},
tooltip: {},
geo: {
map: 'MacOdrum-LV5-floorplan-web',
roam: true,
emphasis: {
itemStyle: {
color: undefined
},
label: {
show: false
}
}
},
series: [
{
name: 'Route',
type: 'lines',
coordinateSystem: 'geo',
geoIndex: 0,
emphasis: {
label: {
show: false
}
},
polyline: true,
lineStyle: {
color: '#c46e54',
width: 5,
opacity: 1,
type: 'dotted'
},
effect: {
show: true,
period: 8,
color: '#a10000',
constantSpeed: 80,
trailLength: 0,
symbolSize: [20, 12],
symbol:
'path://M35.5 40.5c0-22.16 17.84-40 40-40s40 17.84 40 40c0 1.6939-.1042 3.3626-.3067 5H35.8067c-.2025-1.6374-.3067-3.3061-.3067-5zm90.9621-2.6663c-.62-1.4856-.9621-3.1182-.9621-4.8337 0-6.925 5.575-12.5 12.5-12.5s12.5 5.575 12.5 12.5a12.685 12.685 0 0 1-.1529 1.9691l.9537.5506-15.6454 27.0986-.1554-.0897V65.5h-28.7285c-7.318 9.1548-18.587 15-31.2715 15s-23.9535-5.8452-31.2715-15H15.5v-2.8059l-.0937.0437-8.8727-19.0274C2.912 41.5258.5 37.5549.5 33c0-6.925 5.575-12.5 12.5-12.5S25.5 26.075 25.5 33c0 .9035-.0949 1.784-.2753 2.6321L29.8262 45.5h92.2098z'
},
data: [
{
coords: [
[110.6189462165178, 456.64349563895087],
[124.10988522879458, 450.8570048730469],
[123.9272226116071, 389.9520693708147],
[61.58708083147317, 386.87942320312504],
[61.58708083147317, 72.8954315876116],
[258.29514854771196, 72.8954315876116],
[260.75457021484374, 336.8559607533482],
[280.5277985253906, 410.2406672084263],
[275.948185765904, 528.0254369698661],
[111.06907909458701, 552.795792593471],
[118.87138231445309, 701.365737015904],
[221.36468155133926, 758.7870354617745],
[307.86195445452006, 742.164737297712],
[366.8489324762834, 560.9895157073103],
[492.8750778390066, 560.9895157073103],
[492.8750778390066, 827.9639780566406],
[294.9255269587053, 827.9639780566406],
[282.79803391043527, 868.2476088113839]
]
}
]
}
]
};
myChart.setOption(option);
}
);

67
project.config.json
Unescape View File

@ -1,67 +0,0 @@
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"scopeDataCheck": false,
"coverView": true,
"es6": false,
"postcss": true,
"compileHotReLoad": false,
"lazyloadPlaceholderEnable": false,
"preloadBackgroundData": false,
"minified": true,
"autoAudits": false,
"newFeature": false,
"uglifyFileName": false,
"uploadWithSourceMap": true,
"useIsolateContext": false,
"nodeModules": false,
"enhance": true,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"showShadowRootInWxmlPanel": true,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"disableUseStrict": false,
"ignoreUploadUnusedFiles": true,
"minifyWXML": true
},
"compileType": "miniprogram",
"libVersion": "2.19.0",
"appid": "wxa823da2dd800c594",
"projectname": "touchMove",
"debugOptions": {
"hidedInDevtools": []
},
"scripts": {},
"staticServerOptions": {
"baseURL": "",
"servePath": ""
},
"isGameTourist": false,
"condition": {
"search": {
"list": []
},
"conversation": {
"list": []
},
"game": {
"list": []
},
"plugin": {
"list": []
},
"gamePlugin": {
"list": []
},
"miniprogram": {
"list": []
}
}
}

24
project.private.config.json
Unescape View File

@ -1,24 +0,0 @@
{
"condition": {
"plugin": {
"list": []
},
"game": {
"list": []
},
"gamePlugin": {
"list": []
},
"miniprogram": {
"list": [
{
"name": "",
"pathName": "map/map",
"query": "",
"scene": null,
"launchMode": "default"
}
]
}
}
}

7
sitemap.json
Unescape View File

@ -1,7 +0,0 @@
{
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}
Write Preview
Loading…
Cancel
Save