|
| 1 | +import {graphicLayer} from '../../../../src/leaflet/overlay/GraphicLayer'; |
| 2 | +import {tiledMapLayer} from '../../../../src/leaflet/mapping/TiledMapLayer'; |
| 3 | +import {graphic} from '../../../../src/leaflet/overlay/graphic/Graphic'; |
| 4 | +import {cloverStyle} from '../../../../src/leaflet/overlay/graphic/CloverStyle'; |
| 5 | + |
| 6 | +var url = "http://supermapiserver:8090/iserver/services/map-world/rest/maps/World"; |
| 7 | +describe('leaflet_CloverStyle', () => { |
| 8 | + var originalTimeout; |
| 9 | + var testDiv, map; |
| 10 | + beforeAll(() => { |
| 11 | + testDiv = window.document.createElement("div"); |
| 12 | + testDiv.setAttribute("id", "map"); |
| 13 | + testDiv.style.styleFloat = "left"; |
| 14 | + testDiv.style.marginLeft = "8px"; |
| 15 | + testDiv.style.marginTop = "50px"; |
| 16 | + testDiv.style.width = "500px"; |
| 17 | + testDiv.style.height = "500px"; |
| 18 | + window.document.body.appendChild(testDiv); |
| 19 | + map = L.map('map', { |
| 20 | + preferCanvas: true, |
| 21 | + crs: L.CRS.EPSG4326, |
| 22 | + center: {lon: 0, lat: 0}, |
| 23 | + maxZoom: 18, |
| 24 | + zoom: 1 |
| 25 | + }); |
| 26 | + tiledMapLayer(url).addTo(map); |
| 27 | + }); |
| 28 | + beforeEach(() => { |
| 29 | + originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL; |
| 30 | + jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000; |
| 31 | + }); |
| 32 | + afterEach(() => { |
| 33 | + jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout; |
| 34 | + }); |
| 35 | + afterAll(() => { |
| 36 | + map.remove(); |
| 37 | + window.document.body.removeChild(testDiv); |
| 38 | + }); |
| 39 | + |
| 40 | + it('initialize, getStyle', (done) => { |
| 41 | + var count = 6; |
| 42 | + var graphics = []; |
| 43 | + var e = 45; |
| 44 | + var clovers = []; |
| 45 | + var radius = [10, 14, 18]; |
| 46 | + var styles = [{angle: 60, count: 3}, {angle: 45, count: 4}, {angle: 30, count: 6}]; |
| 47 | + const randCount = 9; |
| 48 | + for (var i = 0; i < radius.length; i++) { |
| 49 | + for (var j = 0; j < styles.length; j++) { |
| 50 | + clovers.push(cloverStyle({ |
| 51 | + radius: radius[i], |
| 52 | + angle: styles[j].angle, |
| 53 | + count: styles[j].count, |
| 54 | + color: "rgba(0,166,0,1)", |
| 55 | + fillColor: "rgba(0,200,0,0.6)", |
| 56 | + fillOpacity: 1, |
| 57 | + fill: true |
| 58 | + })); |
| 59 | + } |
| 60 | + } |
| 61 | + //设置每个点的经纬度和传入三叶草样式 |
| 62 | + for (var i = 0; i < count; ++i) { |
| 63 | + var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e]; |
| 64 | + graphics[i] = graphic({ |
| 65 | + latlng: L.latLng(coordinates[0], coordinates[1]), |
| 66 | + style: clovers[Math.floor(Math.random() * randCount)].getStyle() |
| 67 | + }); |
| 68 | + } |
| 69 | + //将三叶草要素风格画在地图上 |
| 70 | + var layer = graphicLayer(graphics).addTo(map); |
| 71 | + |
| 72 | + setTimeout(() => { |
| 73 | + expect(layer.graphics.length).toEqual(count); |
| 74 | + for (var i = 0; i < layer.graphics.length; i++) { |
| 75 | + expect(layer.graphics[i]._style).not.toBeNull(); |
| 76 | + expect(layer.graphics[i]._latlng).not.toBeNull(); |
| 77 | + expect(layer.graphics[i]._latlng.lat).not.toBeNull(); |
| 78 | + expect(layer.graphics[i]._latlng.lng).not.toBeNull(); |
| 79 | + } |
| 80 | + //map.remove()时，canvas渲染的场景下render会先移除canvas的ctx，而path的移除会有重绘操作。 |
| 81 | + //从而引起刷新延迟会报错，故在此移除重绘 |
| 82 | + layer.on('remove', () => { |
| 83 | + var requestAnimId = map.getRenderer(layer)._redrawRequest; |
| 84 | + (requestAnimId != null) && L.Util.cancelAnimFrame(requestAnimId); |
| 85 | + done(); |
| 86 | + }); |
| 87 | + layer.remove(); |
| 88 | + done(); |
| 89 | + }, 1000) |
| 90 | + }); |
| 91 | +}); |
| 92 | + |
0 commit comments