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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy