mirror of https://gitee.com/antv-l7/antv-l7
fix(component): fix marker
This commit is contained in:
parent
6fc4621f3b
commit
8dabe4c9c1
|
@ -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,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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -44,16 +44,14 @@ const scene = new Scene({
|
|||
zoom: 3.802
|
||||
})
|
||||
});
|
||||
scene.render();
|
||||
scene.on('loaded', () => {
|
||||
Promise.all([
|
||||
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 ]) {
|
||||
]).then(function onLoad([ center, population ]) {
|
||||
const popobj = {};
|
||||
population.forEach(element => {
|
||||
popobj[element.Code] =
|
||||
|
@ -101,12 +99,11 @@ scene.on('loaded', () => {
|
|||
.color('type', [ '#5CCEA1', '#5B8FF9' ])
|
||||
.opacity(1);
|
||||
chart.render();
|
||||
new Marker({ element: el })
|
||||
const marker = new Marker({ element: el })
|
||||
.setLnglat({
|
||||
lng: coord[0],
|
||||
lat: coord[1]
|
||||
})
|
||||
.addTo(scene);
|
||||
});
|
||||
scene.addMarker(marker);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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 ],
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
"inversify-logging": "^0.2.1",
|
||||
"load-styles": "^2.0.0"
|
||||
},
|
||||
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
|
||||
"gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
"@types/lodash": "^4.14.138",
|
||||
"@types/viewport-mercator-project": "^6.1.0"
|
||||
},
|
||||
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
|
||||
"gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -49,7 +49,7 @@
|
|||
"@types/gl-matrix": "^2.4.5",
|
||||
"@types/lodash": "^4.14.138"
|
||||
},
|
||||
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
|
||||
"gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
"@types/mapbox-gl": "^0.54.3",
|
||||
"@types/viewport-mercator-project": "^6.1.0"
|
||||
},
|
||||
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
|
||||
"gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
"reflect-metadata": "^0.1.13",
|
||||
"regl": "^1.3.11"
|
||||
},
|
||||
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
|
||||
"gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
"mapbox-gl": "^1.2.1",
|
||||
"reflect-metadata": "^0.1.13"
|
||||
},
|
||||
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
|
||||
"gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
@ -49,7 +49,7 @@
|
|||
"@types/lodash": "^4.14.138",
|
||||
"@types/viewport-mercator-project": "^6.1.0"
|
||||
},
|
||||
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
|
||||
"gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
"@types/gl-matrix": "^2.4.5",
|
||||
"@types/lodash": "^4.14.138"
|
||||
},
|
||||
"gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
|
||||
"gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
@ -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({
|
||||
const marker = new Marker().setLnglat({
|
||||
lng: 120.19382669582967,
|
||||
lat: 30.258134,
|
||||
})
|
||||
.addTo(scene);
|
||||
});
|
||||
|
||||
scene.addMarker(marker);
|
||||
}
|
||||
|
||||
public render() {
|
||||
|
|
|
@ -43,17 +43,16 @@ export default class PopupComponent extends React.Component {
|
|||
opacity: 0.3,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
scene.on('loaded', () => {
|
||||
new Popup({
|
||||
const popup = new Popup({
|
||||
offsets: [0, 20],
|
||||
})
|
||||
.setLnglat({
|
||||
lng: 120.19382669582967,
|
||||
lat: 30.258134,
|
||||
})
|
||||
.setText('hello')
|
||||
.addTo(scene);
|
||||
});
|
||||
.setText('hello');
|
||||
scene.addPopup(popup);
|
||||
|
||||
}
|
||||
|
||||
public render() {
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
|
|
Loading…
Reference in New Issue