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
})
});
addChart();
scene.render();
scene.on('loaded', () => {
addChart();
});
function addChart() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
@ -67,14 +67,14 @@ function addChart() {
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
.opacity(1);
chart.render();
new Marker({
const marker = new Marker({
element: el
})
.setLnglat({
lng: item.coordinates[0],
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
})
});
addChart();
scene.render();
scene.on('loaded', () => {
addChart();
});
function addChart() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
@ -89,14 +88,14 @@ function addChart() {
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
.shape('sliceShape');
chart.render();
new Marker({
const marker = new Marker({
element: el
})
.setLnglat({
lng: item.coordinates[0],
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
})
});
scene.render();
scene.on('loaded', () => {
Promise.all([
fetch(
'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'
).then(d => d.json()),
fetch(
'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
).then(d => d.json())
]).then(function onLoad([ center, population ]) {
const popobj = {};
population.forEach(element => {
popobj[element.Code] =
element['Population, female (% of total) (% of total)'];
});
// 数据绑定
Promise.all([
fetch(
'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'
).then(d => d.json()),
fetch(
'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
).then(d => d.json())
]).then(function onLoad([ center, population ]) {
const popobj = {};
population.forEach(element => {
popobj[element.Code] =
element['Population, female (% of total) (% of total)'];
});
// 数据绑定
center.features = center.features.map(fe => {
fe.properties.female = popobj[fe.properties.id] * 1 || 0;
return fe;
center.features = center.features.map(fe => {
fe.properties.female = popobj[fe.properties.id] * 1 || 0;
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 => {
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
});
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.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();
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
})
});
addMarkers();
scene.render();
scene.on('loaded', () => {
addMarkers();
});
function addMarkers() {
fetch(
@ -28,11 +27,11 @@ function addMarkers() {
el.textContent = nodes[i].v + '℃';
el.style.background = getColor(nodes[i].v);
el.style.borderColor = getColor(nodes[i].v);
new Marker({
const marker = new Marker({
element: el
})
.setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })
.addTo(scene);
.setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
scene.addMarker(marker);
}
});
}

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

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

2
packages/component/package.json
View File

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

2
packages/core/package.json
View File

@ -43,7 +43,7 @@
"@types/lodash": "^4.14.138",
"@types/viewport-mercator-project": "^6.1.0"
},
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
"gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
"publishConfig": {
"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 unAddMarkers: IMarker[] = [];
public addMarker(marker: IMarker): void {
if (!this.mapsService.map) {
this.unAddMarkers.push(marker);
} else {
if (!this.mapsService.map && this.mapsService.getMarkerContainer()) {
this.markers.push(marker);
marker.addTo(this.scene);
} else {
this.unAddMarkers.push(marker);
}
}
public addMarkers(): void {

2
packages/l7/package.json
View File

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

2
packages/layers/package.json
View File

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

2
packages/maps/package.json
View File

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

2
packages/renderer/package.json
View File

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

2
packages/scene/package.json
View File

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

2
packages/source/package.json
View File

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

2
packages/utils/package.json
View File

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

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

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

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

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

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

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

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

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