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

Merge pull request #103 from antvis/fix_stories 

Fix(component): marker
This commit is contained in:
@thinkinggis 2019-11-28 17:52:14 +08:00 committed by GitHub
parent cf6b1b4cf6 d10048593f
commit d6517ee62f
24 changed files with 219 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/api/layer/layer.en.md
View File

@ -40,7 +40,7 @@ new Layer(option)
## 鼠标事件
beta版当前不支持，正式版会支持
⚠️ beta版当前不支持，正式版会支持
```javascript
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件
@ -319,4 +319,4 @@ layer.hide();
```javascript
layer.fitBounds()
```
```

4
docs/api/layer/layer.zh.md
View File

@ -40,7 +40,7 @@ new Layer(option)
## 鼠标事件
beta版当前不支持，正式版会支持
⚠️ beta版当前不支持，正式版会支持
```javascript
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件
@ -319,4 +319,4 @@ layer.hide();
```javascript
layer.fitBounds()
```
```

30
docs/tutorial/map/mapbox.zh.md
View File

@ -39,18 +39,21 @@ order: 0
### 初始化 L7 Scene
``` javascript
``` javascript
const scene = new L7.Scene({
id: 'map',
style: 'dark', // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 12,
type:'mapbox',
token: 'mapbox token'
map: new L7.Mapbox({
style: 'dark', // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 12,
token: 'mapbox token',
}),
});
```
这样我们就完成了通过L7 实例化mapbox地图
@ -116,12 +119,13 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
<script>
const scene = new L7.Scene({
id: 'map',
style: 'dark', // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 12,
type:'amap',
map: new L7.Mapbox({
style: 'dark', // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 12,
token: 'mapbox token',
}),
});
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')

48
docs/tutorial/quickstart.en.md
View File

@ -11,7 +11,8 @@ Current version: 2.0.0-beta.10
# 使用方法
## 通过 L7 CDN 使用
## 通过L7 CDN 使用
Include the L7 JS JavaScript <head> of your HTML file.
@ -33,9 +34,50 @@ Install the npm package.
```bash
// L7 依赖
npm install --save @antv/l7@beta
// 或者
yarn add --save @antv/l7@beta
// 第三方底图依赖
npm install --save @antv/l7-maps;
```
### 初始化地图
#### 使用 Mapbox 底图
```javascript
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 35.210526315789465,
style: 'dark',
center: [ 104.288144, 31.239692 ],
zoom: 4.4
})
});
```
#### 使用Mapbox 底图
```javascript
import { Scene, HeatmapLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'dark',
pitch: 0,
center: [ 127.5671666579043, 7.445038892195569 ],
zoom: 2.632456779444394
})
});
```

45
docs/tutorial/quickstart.zh.md
View File

@ -33,9 +33,50 @@ Install the npm package.
```bash
// L7 依赖
npm install --save @antv/l7@beta
// 或者
yarn add --save @antv/l7@beta
// 第三方底图依赖
npm install --save @antv/l7-maps;
```
### 初始化地图
#### 使用 Mapbox 底图
```javascript
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 35.210526315789465,
style: 'dark',
center: [ 104.288144, 31.239692 ],
zoom: 4.4
})
});
```
#### 使用Mapbox 底图
```javascript
import { Scene, HeatmapLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'dark',
pitch: 0,
center: [ 127.5671666579043, 7.445038892195569 ],
zoom: 2.632456779444394
})
});
```

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": "0563f357f3a07c099bf1ffa9350e6fa3c88353ae",
"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": "0563f357f3a07c099bf1ffa9350e6fa3c88353ae",
"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": "0563f357f3a07c099bf1ffa9350e6fa3c88353ae",
"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": "0563f357f3a07c099bf1ffa9350e6fa3c88353ae",
"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": "0563f357f3a07c099bf1ffa9350e6fa3c88353ae",
"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": "0563f357f3a07c099bf1ffa9350e6fa3c88353ae",
"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": "0563f357f3a07c099bf1ffa9350e6fa3c88353ae",
"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": "0563f357f3a07c099bf1ffa9350e6fa3c88353ae",
"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": "0563f357f3a07c099bf1ffa9350e6fa3c88353ae",
"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() {