Skip to content

Commit 4588af7

Browse files
deyihudeyihu
authored
add UIMarker bind mvvm component example (#169)
1 parent e8a54d3 commit 4588af7

7 files changed

Lines changed: 270 additions & 0 deletions

File tree

‎config/examples.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -795,6 +795,13 @@ const examples = [
795795
en: "VectorLayer: Set geomtries' z-index"
796796
}
797797
},
798+
{
799+
name: "collision",
800+
title: {
801+
cn: "碰撞",
802+
en: "layer collision"
803+
}
804+
},
798805
{
799806
name: "canvaslayer",
800807
title: {
@@ -1104,6 +1111,13 @@ const examples = [
11041111
en: "InfoWindow bind MVVM component"
11051112
}
11061113
},
1114+
{
1115+
name: "uimarker-mvvm-dynamic",
1116+
title: {
1117+
cn: "UIMarker绑定MVVM组件",
1118+
en: "UIMarker bind MVVM component"
1119+
}
1120+
},
11071121
{
11081122
name: "control-toolbar",
11091123
title: {

‎public/codes/basic/layer/collision/index.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
html,
3+
body {
4+
margin: 0px;
5+
height: 100%;
6+
width: 100%;
7+
}
8+
9+
.container {
10+
11+
width: 100%;
12+
height: 100%;
13+
}
14+
15+
.pane {
16+
background: #34495e;
17+
line-height: 28px;
18+
color: #fff;
19+
z-index : 10;
20+
position: absolute;
21+
top : 20px;
22+
right : 20px;
23+
}
24+
25+
.pane a {
26+
display : block;
27+
color: #fff;
28+
text-align: left;
29+
padding: 0 10px;
30+
min-width: 28px;
31+
min-height: 28px;
32+
float: left;
33+
}

‎public/codes/basic/layer/collision/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
<script type="text/javascript" src="/lib/mt.gui.min.js"></script>
3+
<div id="map" class="container"></div>

‎public/codes/basic/layer/collision/index.js‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
2+
var map = new maptalks.Map('map', {
3+
center: [-0.113049, 51.498568],
4+
zoom: 8,
5+
baseLayer: new maptalks.TileLayer('base', {
6+
urlTemplate: "{urlTemplate}",
7+
subdomains: ["a", "b", "c", "d"],
8+
attribution: "{attribution}",
9+
})
10+
});
11+
12+
var layer = new maptalks.VectorLayer('layer', {
13+
'collision': true,
14+
'collisionDelay': 250,
15+
'collisionScope': 'map',
16+
'forceRenderOnMoving': true,
17+
'forceRenderOnZooming': true,
18+
'forceRenderOnRotating': true,
19+
// debug:true
20+
}).addTo(map);
21+
var layer1 = new maptalks.VectorLayer('layer1', {
22+
'collision': true,
23+
'collisionDelay': 250,
24+
'collisionScope': 'map',
25+
'forceRenderOnMoving': true,
26+
'forceRenderOnZooming': true,
27+
'forceRenderOnRotating': true,
28+
// debug:true
29+
}).addTo(map);
30+
// layer.on('layerload', () => {
31+
// console.log('layerload')
32+
// });
33+
34+
function randomCoordinates() {
35+
var coordinates = [];
36+
var center = map.getCenter();
37+
var x = center.x, y = center.y;
38+
while (coordinates.length < 500) {
39+
var lng = x + Math.random() - 0.5, lat = y + Math.random() * 0.6 - 0.3;
40+
coordinates.push([lng, lat]);
41+
}
42+
return coordinates;
43+
}
44+
45+
function createPoints(url, layer) {
46+
var points = randomCoordinates().map(function (c, index) {
47+
var point = new maptalks.Marker(c, {
48+
zIndex: 2000 - index,
49+
symbol: {
50+
markerFile: url,
51+
markerWidth: 40,
52+
markerHeight: 40,
53+
textName: index,
54+
textSize: 12,
55+
textDy: -26,
56+
textFill: '#fff'
57+
}
58+
});
59+
return point;
60+
});
61+
62+
layer.addGeometry(points);
63+
}
64+
65+
var url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABUpJREFUaEPVWFtslEUU/s70X9rupSxlKb2AQC+BVtQGG2y9RHgyETEGXnxAfDEa1CaWhEh88BJJDCRqooga30xIow8aE33yAWIi7iYNRYVlSy+2odWk7Hbb/t1td7c7v5l212xLtzP/ZROZt/Y/5/vON+ecmbNDcGgZ3d3lyVDoBaTTjzPOm7KG0UyaFgBj00YqFad0Ogagz9C0EAuHL7mBCSeoyS5Isq3tkaymHWcu1zMA7lPCSyaBVOpCcmTkzBbgHyWfIka2BCTa28/A5eoB524rQVAmM86z2fPeGzfOWvEXPpYEzO3a9RD5/V+AsU6rxIV+RNRb2dd3nIBFs3imBSQPH+7E1NRFY2Gh0SzZuvbT0+nM8HCXH7hqBteUAB1oA/At1dffT3V1ZnjUbONxZEdGAlWAaHilZVbA9wCeE8isqQnw+5VITBnNz/d7wuF9qj7KAmaANxjwcR6YPB5QYyOwYYMql7KdEYud9Y6OnlZxUBIwB7QbwCUAK7acAgHQjh0qPKZsjERiRotEOiqAIZmjkoBZ4EMCTq4FRtu3g2pqZDzmv0ejX3nGxl6WOUoFzADVDPgTQP2aYERgLS2AzyfjMvc9kUAyEqmXXXRSAQngBAcurMdOPt9yP2iauSAl1hSNHnGPjYmDo+iSCtCBLwHIU1lTA1FOTi6anT3nHhx8064A0bwHVAJjO3cCmzermKrZJBJBTyTSZVfAJIAtSoyMge3eDbgtjUZ3UbBsdqDy2rU9dgUkAVQqCRDDVVUVqLkZIGl1SiHJ5Zp0B4Nb7QoYB9AgZSswEGMG1a99aJnBQSqV8ly/XmFLwBzwuwE8aIpYjBriVNq0yazbCntD16e8t26t21TSPOvLN7BSE69gLysDa20Fysuti5ie/s0zPPyorQzowDsA3rUSBW3cuNwPVlcs9rVndPRFWwISwNMc+MlqDKIXrI7eFIuddI+O/jdArhWDtITuAHUVwN9WBQi/pVGjqsocxPz85GI43LoRmLKVAeGsA58A6DYXQYG1poG1tQEulzIEj8c/942MvCpzkGZAACwAzRkgBKBaBljsu5l+oHRaNyKRJz2ZTL+MT0lALguWmzkfBDU0gGprZTEBnL/t6e9/X25o8lVCB64AWHc2kZEujRpeb3Ezzn92X736FBEZMizxXTkDwngW2ExAVAW4qI3LBbZ3L8DYXSaUSg3yiYmj3nhc/P5QWqYECMRpYF/ZciYs31Dk94PEo0DBomx2iEejR73j438oRZ4zMi1A+BmANgecB/CKGbIVAW/bBtqam9MymRAWF094wmFp067msyQgD2LnlhYYbM/SpHyFGcaxyoGBv6xshi0Bub44TcAHVsjhdn/mSyZft+Rrp4RWE+rLw54Y+sysgz7gshmHtWxtZyAPOgMcYsCPigE97wO+UbRd18wxAYJFB05A8oIhJlsf8J4TwQsMRwXkRIjT6bUiAV72AQedCr4kAuLATg34tchDmCN1v+I4dnI38lhzQI8BfLQK29HSyWM7XkIFd8QvAJ7I/e146ZRcQAJ4lgM/5Or0mBe4WIpslywDuUvuDgFsAKjtADL3nAAd6DWARBXwUimCd/QU6uvrC3DOj+QewcSvlsC2U6cemzlwIKYfOhTB8hh+G8AkY+y7jo4Oe2N5bkccKaFgMNhCRJ8SUaBwp6t7ewPJ/fv1haamVOH/DcOIcs57urq6btrNjJMCzhHRivf18qGhilRz88LqIA3DuM05f+t/IyAfYCgUEj83HyaiB4rsbJBzfrOzszNod+dLfow6FaAMx5ESkpGU8vs9L+BfDBB3QM16CagAAAAASUVORK5CYII=';
66+
var url1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA1pJREFUaEPVmr9v01AQx+/sxikwMLC0aZDaAXAYqQRiQGoXFmYkNlqJXwsDgr3tDhIDYi0SSAjEBBJrOyKkshE7MFBU8px/AAFG9qFnmspN07yzfXbVTJH83r3v5929e3dOEAQ/zbB1g4DcmPCSBdAkhAYSqGQJxG5M8B3t6Lka67yVWhaLGmr+bp0ii24T4H2uLQ0VU/zaBuvpj3HvK3fesHGFAKZC92EW4YMCEu8gvew6/oO8ELkA9K5HCC8Q4XzehdPzNAgSzOXxRmaAiV/utGXjNwnhEhCZAMoS3wfJ44lMAJNhaw0B5qR3f9AT3bo3xV2DDdD44y4B4jLXcKFxFrxSY941jg0+QNgijkGJMTqUIsDLvXr7s8keC6ARnl0FoAWTMcnnRPgmqLevmmwyAVo660ybjEk+117gnAUjwFToLhDgqqQ4rq3Yiq70xr68HzXeCHAQ4dMXTHH8OBjv3Du8AAQfg7p3oSBA9fGfvthM54ARQtWlzz07jaBUbfSlxgGoPAPtgBx6AABQjjdyk40eqKL+2e+Qci4zI0ClNdAAiUganfjrzlmEa9zLR3Yc3VWO/6RQGi27BxglzhT/eq4xhPSgg7iNOfHPBjgIL1gxnOb0yCwPaNIqizoEesR9U8EG0F5AG1fLbimJUf/sakGzZI3tUNIZqZTeoPSmXsOWBZG0kXZ001T/D244O4TSE6UhtPjjDs60sR1miQh2FhpmNIGw4LrAm4oPyvEuZhW+U3LnndifV6jUIFpWdX+liIZcITS4YJ4UGyPN92r+ehHxhUKoCISUeFGApORgvL1DoMWu4z8ruvNiZ2BQyKi6iQDWA8eblxIv7gHDPbGpHG9GUnwpAAnEkB5CMu5zlxJZdi/dipYROqWdgb7htBekD24lHkj3EJzOKot3KwFI0mryWl6/Gmkv5hVomidyE/cXmQzdW/q7BdYsIUwS0AkkOAqIW0gQEMYKIvikxv13JmHc5yIAJ3+eaUQ1a8+v7wTgbKe63VUmoiKKVwLH3+AK3W+cGEBcs5cIaDa9kAZAgL0lMqKyw+jO1rHO/78hFPiIAPTXTzxh4yzYcA7JauyCwVgRQQAAGxI7X3oaLbCpmaaKemDYyjqd9o74m5lUZRhcOkAGLbmG/gMghmJA/4n1AQAAAABJRU5ErkJggg==';
67+
68+
createPoints(url, layer);
69+
createPoints(url1, layer1);
70+
const layers = [layer, layer1];
71+
72+
function updateCollision(value) {
73+
layers.forEach(layer => {
74+
layer.getGeometries().forEach(function (marker) {
75+
marker.options.collision = value;
76+
});
77+
layer.getRenderer().draw();
78+
});
79+
}
80+
81+
function updatecollisionScope(value) {
82+
console.log(value);
83+
layers.forEach(layer => {
84+
layer.config({ collisionScope: value });
85+
});
86+
}
87+
88+
89+
const gui = new mt.GUI();
90+
91+
gui
92+
.add({
93+
type: "checkbox",
94+
label: "collision",
95+
value: true
96+
})
97+
.onChange((value) => {
98+
updateCollision(value);
99+
});
100+
101+
gui
102+
.add({
103+
type: "checkbox",
104+
label: "collisionScope=map",
105+
value: true
106+
})
107+
.onChange((value) => {
108+
updatecollisionScope(value ? 'map' : 'layer');
109+
});
110+
111+
gui
112+
.add({
113+
type: "checkbox",
114+
label: "sortlayer",
115+
value: false
116+
})
117+
.onChange((value) => {
118+
if (value) {
119+
layer1.setZIndex(1);
120+
layer.setZIndex(2);
121+
} else {
122+
layer1.setZIndex(2);
123+
layer.setZIndex(1);
124+
}
125+
});

‎public/codes/basic/ui-control/uimarker-mvvm-dynamic/index.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
html,
2+
body {
3+
margin: 0px;
4+
height: 100%;
5+
width: 100%;
6+
}
7+
8+
#app,
9+
.container {
10+
width: 100%;
11+
height: 100%;
12+
}
13+
.profile {
14+
background-color: white;
15+
border: 1px solid #a3a3a3;
16+
padding: 6px;
17+
min-width: 120px;
18+
border-radius: 4px;
19+
}

‎public/codes/basic/ui-control/uimarker-mvvm-dynamic/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
2+
<div id="app">
3+
<div ref="map" class="container"></div>
4+
</div>

‎public/codes/basic/ui-control/uimarker-mvvm-dynamic/index.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
2+
function randomCoordinates(map) {
3+
var coordinates = [];
4+
var center = map.getCenter();
5+
var x = center.x, y = center.y;
6+
while (coordinates.length < 5) {
7+
var lng = x + Math.random() - 0.5, lat = y + Math.random() * 0.6 - 0.3;
8+
coordinates.push([lng, lat]);
9+
}
10+
return coordinates;
11+
}
12+
13+
const vm = new window.Vue({
14+
el: "#app",
15+
data: {
16+
17+
},
18+
watch: {},
19+
methods: {
20+
21+
},
22+
mounted: function () {
23+
const map = (this.map = new maptalks.Map(this.$refs.map, {
24+
center: [-0.113049, 51.498568],
25+
zoom: 10,
26+
doubleClickZoom: false,
27+
baseLayer: new maptalks.TileLayer("base", {
28+
urlTemplate: "{urlTemplate}",
29+
subdomains: ["a", "b", "c", "d"],
30+
attribution: "{attribution}",
31+
}),
32+
}));
33+
34+
35+
36+
randomCoordinates(map).map((c, index) => {
37+
var Profile = Vue.extend({
38+
template: `<div class="profile">
39+
<input type="checkbox" v-model='checked'/><label>show btns</label><br>
40+
<button @click="add">++1</button><br>
41+
count:{{btns.length}}<br>
42+
<button v-if="checked" v-for="item in btns">{{item}}</button>
43+
44+
</div>`,
45+
data: function () {
46+
return {
47+
count: 1,
48+
checked: true,
49+
btns: new Array(Math.ceil(Math.random() * 5)).fill(0)
50+
}
51+
},
52+
methods: {
53+
add() {
54+
// this.count++;
55+
this.btns.push(1);
56+
}
57+
}
58+
});
59+
const profile = new Profile().$mount();
60+
console.log(profile);
61+
var uiMarker = new maptalks.ui.UIMarker(c, {
62+
content: profile.$el,
63+
verticalAlignment: 'top',
64+
collision: true,
65+
collisionFadeIn: true
66+
// eventsPropagation: false
67+
});
68+
uiMarker.addTo(map);
69+
70+
});
71+
},
72+
});

0 commit comments

Comments
 (0)