p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(component): fix marker

This commit is contained in:
thinkinggis 2019-11-28 17:25:56 +08:00
parent 6fc4621f3b
commit 8dabe4c9c1
19 changed files with 110 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/point/chart/demo/bar.js
View File

@ -11,10 +11,10 @@ const scene = new Scene({
zoom: 4.19 zoom: 4.19
}) })
}); });
addChart();
scene.render(); scene.render();
scene.on('loaded', () => {
addChart();
});
function addChart() { function addChart() {
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json' 'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
@ -67,14 +67,14 @@ function addChart() {
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ]) .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
.opacity(1); .opacity(1);
chart.render(); chart.render();
new Marker({ const marker = new Marker({
element: el element: el
}) })
.setLnglat({ .setLnglat({
lng: item.coordinates[0], lng: item.coordinates[0],
lat: item.coordinates[1] lat: item.coordinates[1]
}) });
.addTo(scene); scene.addMarker(marker);
}); });
}); });
} }

11
examples/point/chart/demo/chart.js
View File

@ -11,10 +11,9 @@ const scene = new Scene({
zoom: 4.19 zoom: 4.19
}) })
}); });
addChart();
scene.render(); scene.render();
scene.on('loaded', () => {
addChart();
});
function addChart() { function addChart() {
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json' 'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
@ -89,14 +88,14 @@ function addChart() {
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ]) .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
.shape('sliceShape'); .shape('sliceShape');
chart.render(); chart.render();
new Marker({ const marker = new Marker({
element: el element: el
}) })
.setLnglat({ .setLnglat({
lng: item.coordinates[0], lng: item.coordinates[0],
lat: item.coordinates[1] lat: item.coordinates[1]
}) });
.addTo(scene); scene.addMarker(marker);
}); });
}); });
} }

119
examples/point/chart/demo/ring.js
View File

@ -44,69 +44,66 @@ const scene = new Scene({
zoom: 3.802 zoom: 3.802
}) })
}); });
scene.render(); Promise.all([
scene.on('loaded', () => { fetch(
Promise.all([ 'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'
fetch( ).then(d => d.json()),
'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json' fetch(
).then(d => d.json()), 'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
fetch( ).then(d => d.json())
'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json' ]).then(function onLoad([ center, population ]) {
).then(d => d.json()) const popobj = {};
]).then(function onLoad([ center, population ]) { population.forEach(element => {
const popobj = {}; popobj[element.Code] =
population.forEach(element => { element['Population, female (% of total) (% of total)'];
popobj[element.Code] = });
element['Population, female (% of total) (% of total)']; // 数据绑定
});
// 数据绑定
center.features = center.features.map(fe => { center.features = center.features.map(fe => {
fe.properties.female = popobj[fe.properties.id] * 1 || 0; fe.properties.female = popobj[fe.properties.id] * 1 || 0;
return fe; return fe;
});
center.features.forEach(point => {
const el = document.createElement('div');
const coord = point.geometry.coordinates;
const v = point.properties.female * 1;
if (v < 1 || (v > 46 && v < 54)) { return; }
const size = 60;
const data = [
{
type: '男性',
value: 100.0 - v.toFixed(2)
},
{
type: '女性',
value: v.toFixed(2) * 1
}
];
const chart = new G2.Chart({
container: el,
width: size,
height: size,
render: 'svg',
padding: 0
}); });
center.features.forEach(point => { chart.source(data);
const el = document.createElement('div'); chart.legend(false);
const coord = point.geometry.coordinates; chart.tooltip(false);
const v = point.properties.female * 1; chart.coord('theta', {
if (v < 1 || (v > 46 && v < 54)) { return; } radius: 0.9,
const size = 60; innerRadius: 0.6
const data = [
{
type: '男性',
value: 100.0 - v.toFixed(2)
},
{
type: '女性',
value: v.toFixed(2) * 1
}
];
const chart = new G2.Chart({
container: el,
width: size,
height: size,
render: 'svg',
padding: 0
});
chart.source(data);
chart.legend(false);
chart.tooltip(false);
chart.coord('theta', {
radius: 0.9,
innerRadius: 0.6
});
chart
.intervalStack()
.position('value')
.color('type', [ '#5CCEA1', '#5B8FF9' ])
.opacity(1);
chart.render();
new Marker({ element: el })
.setLnglat({
lng: coord[0],
lat: coord[1]
})
.addTo(scene);
}); });
chart
.intervalStack()
.position('value')
.color('type', [ '#5CCEA1', '#5B8FF9' ])
.opacity(1);
chart.render();
const marker = new Marker({ element: el })
.setLnglat({
lng: coord[0],
lat: coord[1]
});
scene.addMarker(marker);
}); });
}); });

11
examples/point/marker/demo/marker.js
View File

@ -10,10 +10,9 @@ const scene = new Scene({
zoom: 4 zoom: 4
}) })
}); });
addMarkers();
scene.render(); scene.render();
scene.on('loaded', () => {
addMarkers();
});
function addMarkers() { function addMarkers() {
fetch( fetch(
@ -28,11 +27,11 @@ function addMarkers() {
el.textContent = nodes[i].v + '℃'; el.textContent = nodes[i].v + '℃';
el.style.background = getColor(nodes[i].v); el.style.background = getColor(nodes[i].v);
el.style.borderColor = getColor(nodes[i].v); el.style.borderColor = getColor(nodes[i].v);
new Marker({ const marker = new Marker({
element: el element: el
}) })
.setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }) .setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
.addTo(scene); scene.addMarker(marker);
} }
}); });
} }

4
examples/tutorial/marker/demo/amap.js
View File

@ -1,8 +1,8 @@
import { Scene, Marker, Popup } from '@antv/l7'; import { Scene, Marker, Popup } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps'; import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new Mapbox({
style: 'light', style: 'light',
pitch: 0, pitch: 0,
center: [ 121.4316962, 31.26082325 ], center: [ 121.4316962, 31.26082325 ],

2
packages/component/package.json
View File

@ -33,7 +33,7 @@
"inversify-logging": "^0.2.1", "inversify-logging": "^0.2.1",
"load-styles": "^2.0.0" "load-styles": "^2.0.0"
}, },
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300", "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
} }

2
packages/core/package.json
View File

@ -43,7 +43,7 @@
"@types/lodash": "^4.14.138", "@types/lodash": "^4.14.138",
"@types/viewport-mercator-project": "^6.1.0" "@types/viewport-mercator-project": "^6.1.0"
}, },
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300", "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
} }

6
packages/core/src/services/component/MarkerService.ts
View File

@ -11,11 +11,11 @@ export default class MarkerService implements IMarkerService {
private markers: IMarker[] = []; private markers: IMarker[] = [];
private unAddMarkers: IMarker[] = []; private unAddMarkers: IMarker[] = [];
public addMarker(marker: IMarker): void { public addMarker(marker: IMarker): void {
if (!this.mapsService.map) { if (!this.mapsService.map && this.mapsService.getMarkerContainer()) {
this.unAddMarkers.push(marker);
} else {
this.markers.push(marker); this.markers.push(marker);
marker.addTo(this.scene); marker.addTo(this.scene);
} else {
this.unAddMarkers.push(marker);
} }
} }
public addMarkers(): void { public addMarkers(): void {

2
packages/l7/package.json
View File

@ -29,7 +29,7 @@
"@antv/l7-maps": "^2.0.0-beta.11", "@antv/l7-maps": "^2.0.0-beta.11",
"@antv/l7-scene": "^2.0.0-beta.11" "@antv/l7-scene": "^2.0.0-beta.11"
}, },
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300", "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
} }

2
packages/layers/package.json
View File

@ -49,7 +49,7 @@
"@types/gl-matrix": "^2.4.5", "@types/gl-matrix": "^2.4.5",
"@types/lodash": "^4.14.138" "@types/lodash": "^4.14.138"
}, },
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300", "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
} }

2
packages/maps/package.json
View File

@ -36,7 +36,7 @@
"@types/mapbox-gl": "^0.54.3", "@types/mapbox-gl": "^0.54.3",
"@types/viewport-mercator-project": "^6.1.0" "@types/viewport-mercator-project": "^6.1.0"
}, },
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300", "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
} }

2
packages/renderer/package.json
View File

@ -30,7 +30,7 @@
"reflect-metadata": "^0.1.13", "reflect-metadata": "^0.1.13",
"regl": "^1.3.11" "regl": "^1.3.11"
}, },
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300", "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
} }

2
packages/scene/package.json
View File

@ -32,7 +32,7 @@
"mapbox-gl": "^1.2.1", "mapbox-gl": "^1.2.1",
"reflect-metadata": "^0.1.13" "reflect-metadata": "^0.1.13"
}, },
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300", "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
} }

2
packages/source/package.json
View File

@ -49,7 +49,7 @@
"@types/lodash": "^4.14.138", "@types/lodash": "^4.14.138",
"@types/viewport-mercator-project": "^6.1.0" "@types/viewport-mercator-project": "^6.1.0"
}, },
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300", "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
} }

2
packages/utils/package.json
View File

@ -36,7 +36,7 @@
"@types/gl-matrix": "^2.4.5", "@types/gl-matrix": "^2.4.5",
"@types/lodash": "^4.14.138" "@types/lodash": "^4.14.138"
}, },
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300", "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
} }

16
stories/Components/components/Marker.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore // @ts-ignore
import { Marker, PolygonLayer, Scene } from '@antv/l7'; import { Marker, PolygonLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps'; import { Mapbox, GaodeMap } from '@antv/l7-maps';
import * as React from 'react'; import * as React from 'react';
export default class MarkerComponent extends React.Component { export default class MarkerComponent extends React.Component {
@ -18,7 +18,7 @@ export default class MarkerComponent extends React.Component {
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new Mapbox({ map: new Mapbox({
style: 'mapbox://styles/mapbox/streets-v9', style: 'dark',
center: [110.19382669582967, 30.258134], center: [110.19382669582967, 30.258134],
pitch: 0, pitch: 0,
zoom: 3, zoom: 3,
@ -43,14 +43,12 @@ export default class MarkerComponent extends React.Component {
opacity: 0.3, opacity: 0.3,
}); });
scene.addLayer(layer); scene.addLayer(layer);
scene.on('loaded', () => { const marker = new Marker().setLnglat({
new Marker() lng: 120.19382669582967,
.setLnglat({ lat: 30.258134,
lng: 120.19382669582967,
lat: 30.258134,
})
.addTo(scene);
}); });
scene.addMarker(marker);
} }
public render() { public render() {

19
stories/Components/components/Popup.tsx
View File

@ -43,17 +43,16 @@ export default class PopupComponent extends React.Component {
opacity: 0.3, opacity: 0.3,
}); });
scene.addLayer(layer); scene.addLayer(layer);
scene.on('loaded', () => { const popup = new Popup({
new Popup({ offsets: [0, 20],
offsets: [0, 20], })
.setLnglat({
lng: 120.19382669582967,
lat: 30.258134,
}) })
.setLnglat({ .setText('hello');
lng: 120.19382669582967, scene.addPopup(popup);
lat: 30.258134,
})
.setText('hello')
.addTo(scene);
});
} }
public render() { public render() {

7
stories/Components/components/Scale.tsx
View File

@ -43,10 +43,9 @@ export default class ScaleComponent extends React.Component {
opacity: 0.3, opacity: 0.3,
}); });
scene.addLayer(layer); scene.addLayer(layer);
scene.on('loaded', () => {
const scaleControl = new Scale(); const scaleControl = new Scale();
scene.addControl(scaleControl); scene.addControl(scaleControl);
});
} }
public render() { public render() {

8
stories/Components/components/Zoom.tsx
View File

@ -44,12 +44,10 @@ export default class ZoomComponent extends React.Component {
opacity: 0.3, opacity: 0.3,
}); });
scene.addLayer(layer); scene.addLayer(layer);
scene.on('loaded', () => { const zoomControl = new Zoom({
const zoomControl = new Zoom({ position: 'bottomright',
position: 'bottomright',
});
scene.addControl(zoomControl);
}); });
scene.addControl(zoomControl);
} }
public render() { public render() {