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

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);
});
});
}

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);
});
});
}

View File

@ -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);
});
});

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);
}
});
}

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 ],

View File

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

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"
}

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 {

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"
}

View File

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

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"
}

View File

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

View File

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

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"
}

View File

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

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({
const marker = new Marker().setLnglat({
lng: 120.19382669582967,
lat: 30.258134,
})
.addTo(scene);
});
scene.addMarker(marker);
}
public render() {

View File

@ -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() {

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);
});
}
public render() {

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);
});
}
public render() {