Skip to content

Commit 5644732

Browse files
songyumengsongyumeng
committed
【fix】leaflet vectorTile 点要素点击获取坐标不对的问题
1 parent c4acb33 commit 5644732

File tree

2 files changed

+102
-74
lines changed

2 files changed

+102
-74
lines changed

‎src/leaflet/overlay/vectortile/PointSymbolizer.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,7 @@ export var PointSymbolizer = L.CircleMarker.extend({
3030
this._makeFeatureParts(feature, pxPerExtent);
3131
},
3232

33-
/**
34-
* @function L.supermap.PointSymbolizer.prototype.getLatLng
35-
* @description 获取点坐标。
36-
* @returns {L.LatLng} 点坐标。
37-
*/
38-
getLatLng: function(){
39-
return this._renderer._map.layerPointToLatLng(this._point);
40-
},
33+
getLatLng: undefined,
4134

4235

4336
/**

‎test/leaflet/overlay/vectortile/PointSymbolizerSpec.js‎

Lines changed: 101 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import {PointSymbolizer} from '../../../../src/leaflet/overlay/vectortile/PointSymbolizer';
2-
import {SVGRenderer} from '../../../../src/leaflet/overlay/vectortile/SVGRenderer';
1+
import { PointSymbolizer } from '../../../../src/leaflet/overlay/vectortile/PointSymbolizer';
2+
import { SVGRenderer } from '../../../../src/leaflet/overlay/vectortile/SVGRenderer';
33
import '../../../resources/img/baiduTileTest.png';
44

55
describe('leaflet_PointSymbolizer', () => {
66
var testDiv, map;
77
beforeAll(() => {
8-
testDiv = window.document.createElement("div");
9-
testDiv.setAttribute("id", "map");
10-
testDiv.style.styleFloat = "left";
11-
testDiv.style.marginLeft = "8px";
12-
testDiv.style.marginTop = "50px";
13-
testDiv.style.width = "400px";
14-
testDiv.style.height = "400px";
8+
testDiv = window.document.createElement('div');
9+
testDiv.setAttribute('id', 'map');
10+
testDiv.style.styleFloat = 'left';
11+
testDiv.style.marginLeft = '8px';
12+
testDiv.style.marginTop = '50px';
13+
testDiv.style.width = '400px';
14+
testDiv.style.height = '400px';
1515
window.document.body.appendChild(testDiv);
1616
map = L.map('map', {
1717
center: [39, 89, 116.34],
@@ -24,80 +24,79 @@ describe('leaflet_PointSymbolizer', () => {
2424

2525
it('initialize', () => {
2626
var feature1 = {
27-
geometry: [{x: 10, y: 10, type: "Point"}],
28-
id: "1",
29-
type: "Feature",
27+
geometry: [{ x: 10, y: 10, type: 'Point' }],
28+
id: '1',
29+
type: 'Feature',
3030
properties: {
31-
CAP_POP: "2207718.0",
32-
SMLIBTILEID: "1",
33-
COUNTRY_CH: "巴西",
34-
CAPITAL_EN: "Brasilia",
35-
POP: "2207718.0",
36-
CAPITAL_CH: "巴西利亚",
37-
SMID: "1",
38-
COUNTRY: "巴西",
39-
CAPITAL_LO: "Brasília",
40-
COUNTRY_EN: "Brazil",
41-
USERID: "0",
42-
SMGEOMETRYSIZE: "16",
43-
SMY: "-15.792110943058866",
44-
CAPITAL: "巴西利亚",
45-
SMX: "-47.8977476573595",
46-
SMUSERID: "0"
31+
CAP_POP: '2207718.0',
32+
SMLIBTILEID: '1',
33+
COUNTRY_CH: '巴西',
34+
CAPITAL_EN: 'Brasilia',
35+
POP: '2207718.0',
36+
CAPITAL_CH: '巴西利亚',
37+
SMID: '1',
38+
COUNTRY: '巴西',
39+
CAPITAL_LO: 'Brasília',
40+
COUNTRY_EN: 'Brazil',
41+
USERID: '0',
42+
SMGEOMETRYSIZE: '16',
43+
SMY: '-15.792110943058866',
44+
CAPITAL: '巴西利亚',
45+
SMX: '-47.8977476573595',
46+
SMUSERID: '0'
4747
}
4848
};
4949
var feature2 = {
50-
geometry: [
51-
[{x: -10, y: -15, type: "Point"}],
52-
[{x: -100, y: 50, type: "Point"}]],
53-
id: "1",
54-
type: "Feature",
50+
geometry: [[{ x: -10, y: -15, type: 'Point' }], [{ x: -100, y: 50, type: 'Point' }]],
51+
id: '1',
52+
type: 'Feature',
5553
properties: {
56-
CAP_POP: "2207718.0",
57-
SMLIBTILEID: "1",
58-
COUNTRY_CH: "巴西test",
59-
CAPITAL_EN: "Brasilia",
60-
POP: "2207718.0",
61-
CAPITAL_CH: "巴西利亚test",
62-
SMID: "1",
63-
COUNTRY: "巴西",
64-
CAPITAL_LO: "Brasília",
65-
COUNTRY_EN: "Brazil",
66-
USERID: "0",
67-
SMGEOMETRYSIZE: "16",
68-
SMY: "-15.792110943058866",
69-
CAPITAL: "巴西利亚",
70-
SMX: "-47.8977476573595",
71-
SMUSERID: "0"
54+
CAP_POP: '2207718.0',
55+
SMLIBTILEID: '1',
56+
COUNTRY_CH: '巴西test',
57+
CAPITAL_EN: 'Brasilia',
58+
POP: '2207718.0',
59+
CAPITAL_CH: '巴西利亚test',
60+
SMID: '1',
61+
COUNTRY: '巴西',
62+
CAPITAL_LO: 'Brasília',
63+
COUNTRY_EN: 'Brazil',
64+
USERID: '0',
65+
SMGEOMETRYSIZE: '16',
66+
SMY: '-15.792110943058866',
67+
CAPITAL: '巴西利亚',
68+
SMX: '-47.8977476573595',
69+
SMUSERID: '0'
7270
}
7371
};
7472
var pointSymbolizer1 = new PointSymbolizer(feature1);
7573
var pointSymbolizer2 = new PointSymbolizer(feature2);
7674
expect(pointSymbolizer1).not.toBeNull();
7775
expect(pointSymbolizer1.properties).not.toBeNull();
78-
expect(pointSymbolizer1.type).toEqual("Feature");
76+
expect(pointSymbolizer1.type).toEqual('Feature');
7977
expect(pointSymbolizer1._empty).not.toBeNull();
8078
expect(pointSymbolizer1._point.x).toEqual(10);
8179
expect(pointSymbolizer1._point.y).toEqual(10);
8280
expect(pointSymbolizer2).not.toBeNull();
8381
expect(pointSymbolizer2.properties).not.toBeNull();
84-
expect(pointSymbolizer2.type).toEqual("Feature");
82+
expect(pointSymbolizer2.type).toEqual('Feature');
8583
expect(pointSymbolizer2._empty).not.toBeNull();
8684
expect(pointSymbolizer2._point.x).toEqual(-10);
8785
expect(pointSymbolizer2._point.y).toEqual(-15);
86+
expect(pointSymbolizer2.getLatLng).toEqual(undefined);
8887
});
8988

9089
it('updateStyle_svgRenderer', () => {
91-
var svgRenderer = new SVGRenderer({x: 1686, y: 755, Z: 10}, {x: 256, y: 256});
90+
var svgRenderer = new SVGRenderer({ x: 1686, y: 755, Z: 10 }, { x: 256, y: 256 });
9291
var feature = {
93-
geometry: [{x: 10, y: 10, type: "Point"}],
94-
type: "Feature",
92+
geometry: [{ x: 10, y: 10, type: 'Point' }],
93+
type: 'Feature',
9594
properties: {
96-
texts: ["test"]
95+
texts: ['test']
9796
}
9897
};
9998
var style = {
100-
interactive: true,
99+
interactive: true
101100
};
102101
var pointSymbolizer1 = new PointSymbolizer(feature);
103102
spyOn(pointSymbolizer1, '_updateBounds').and.callThrough();
@@ -107,16 +106,16 @@ describe('leaflet_PointSymbolizer', () => {
107106
});
108107

109108
it('_getImage_Null', () => {
110-
var svgRenderer = new SVGRenderer({x: 1686, y: 755, Z: 10}, {x: 256, y: 256});
109+
var svgRenderer = new SVGRenderer({ x: 1686, y: 755, Z: 10 }, { x: 256, y: 256 });
111110
var feature = {
112-
geometry: [{x: 10, y: 10, type: "Point"}],
113-
type: "Feature",
111+
geometry: [{ x: 10, y: 10, type: 'Point' }],
112+
type: 'Feature',
114113
properties: {
115-
texts: ["test"]
114+
texts: ['test']
116115
}
117116
};
118117
var style1 = {
119-
interactive: true,
118+
interactive: true
120119
};
121120
var pointSymbolizer = new PointSymbolizer(feature);
122121
pointSymbolizer.render(svgRenderer, style1);
@@ -126,12 +125,12 @@ describe('leaflet_PointSymbolizer', () => {
126125
});
127126

128127
it('_getImage', () => {
129-
var svgRenderer = new SVGRenderer({x: 1686, y: 755, Z: 10}, {x: 256, y: 256});
128+
var svgRenderer = new SVGRenderer({ x: 1686, y: 755, Z: 10 }, { x: 256, y: 256 });
130129
var feature = {
131-
geometry: [{x: 10, y: 10, type: "Point"}],
132-
type: "Feature",
130+
geometry: [{ x: 10, y: 10, type: 'Point' }],
131+
type: 'Feature',
133132
properties: {
134-
texts: ["test"]
133+
texts: ['test']
135134
}
136135
};
137136
var style2 = {
@@ -143,6 +142,42 @@ describe('leaflet_PointSymbolizer', () => {
143142
pointSymbolizer.updateStyle(svgRenderer, style2);
144143
var image = pointSymbolizer._getImage();
145144
expect(image).not.toBeNull();
146-
expect(image.currentSrc).toContain("data:image/png");
145+
expect(image.currentSrc).toContain('data:image/png');
146+
});
147+
it('onclick', (done) => {
148+
var feature1 = {
149+
geometry: [{ x: 10, y: 10, type: 'Point' }],
150+
id: '1',
151+
type: 'Feature',
152+
properties: {
153+
CAP_POP: '2207718.0',
154+
SMLIBTILEID: '1',
155+
COUNTRY_CH: '巴西',
156+
CAPITAL_EN: 'Brasilia',
157+
POP: '2207718.0',
158+
CAPITAL_CH: '巴西利亚',
159+
SMID: '1',
160+
COUNTRY: '巴西',
161+
CAPITAL_LO: 'Brasília',
162+
COUNTRY_EN: 'Brazil',
163+
USERID: '0',
164+
SMGEOMETRYSIZE: '16',
165+
SMY: '-15.792110943058866',
166+
CAPITAL: '巴西利亚',
167+
SMX: '-47.8977476573595',
168+
SMUSERID: '0'
169+
}
170+
};
171+
172+
const pointSymbolizer1 = new PointSymbolizer(feature1);
173+
pointSymbolizer1.on('click', function (e) {
174+
expect(e).not.toBeNull();
175+
expect(e.latlng).not.toBeNull();
176+
expect(e.latlng.lat).toEqual(39.25565142103588);
177+
expect(e.latlng.lng).toEqual(88.71734619140626);
178+
done();
179+
});
180+
map._fireDOMEvent({ type: 'click' ,clientX:10,clientY:10}, 'click', [pointSymbolizer1]);
181+
147182
});
148183
});

0 commit comments

Comments
 (0)