Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 67df14b

Browse files
huangliihuanglii
authored
feat: polygon-morpher (naivemap#19)
1 parent 56ef8d9 commit 67df14b

File tree

7 files changed

+124
-3
lines changed

7 files changed

+124
-3
lines changed

‎docs/.vuepress/components/map/plugins/polygon-morpher.vue‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<template>
2+
<base-map :map-options="mapOptions" @load="handleMapLoaded">
3+
<div class="control">
4+
<div class="control-item" @click="morph(-1)">prev</div>
5+
<div class="control-item" @click="morph(1)">next</div>
6+
</div>
7+
</base-map>
8+
</template>
9+
10+
<script setup lang="ts">
11+
import BaseMap from '../base-map.vue'
12+
import PolygonMorpher from '@naivemap/mapbox-gl-polygon-morpher'
13+
14+
const mapOptions: Omit<mapboxgl.MapboxOptions, 'container'> = {
15+
center: [-73.950543, 40.76110],
16+
zoom: 11,
17+
}
18+
19+
const buildGeoJSONDistricts = (results): GeoJSON.Feature<GeoJSON.Polygon | GeoJSON.MultiPolygon>[] => {
20+
return results.map((row, i) => {
21+
return {
22+
type: 'Feature',
23+
geometry: JSON.parse(row.boundary_simple),
24+
properties: row
25+
}
26+
})
27+
}
28+
29+
let features: GeoJSON.Feature<GeoJSON.Polygon | GeoJSON.MultiPolygon>[]
30+
let polygonMorpher: PolygonMorpher
31+
let index = 0
32+
33+
const morph = (step: number) => {
34+
index += step
35+
if (index < 0) {
36+
index = features.length + index
37+
}
38+
if (polygonMorpher && features.length > 0) {
39+
polygonMorpher.morph(features[index % features.length])
40+
}
41+
}
42+
43+
const handleMapLoaded = (map: mapboxgl.Map) => {
44+
map.addSource('geojson-source', {
45+
type: 'geojson',
46+
data: {
47+
type: 'FeatureCollection',
48+
features: [],
49+
},
50+
})
51+
map.addLayer(
52+
{
53+
id: 'poly-layer',
54+
type: 'fill',
55+
source: 'geojson-source',
56+
paint: {
57+
'fill-color': 'rgba(152, 224, 173, 0.5)',
58+
},
59+
},
60+
'aeroway-line'
61+
)
62+
map.addLayer({
63+
id: 'line-layer',
64+
type: 'line',
65+
source: 'geojson-source',
66+
paint: {
67+
'line-width': 2,
68+
'line-color': 'rgba(255, 178, 125, 1)',
69+
},
70+
})
71+
72+
const geojsonSource = map.getSource('geojson-source') as mapboxgl.GeoJSONSource
73+
polygonMorpher = new PolygonMorpher(geojsonSource)
74+
75+
fetch('https://us-congress-districts.api.aclu.org/pip?min_session=86&lat=40.7306&lng=-73.9866')
76+
.then((res) => res.json())
77+
.then((data) => {
78+
features = buildGeoJSONDistricts(data.results)
79+
polygonMorpher.morph(features[index])
80+
})
81+
}
82+
</script>
83+
84+
<style lang="scss">
85+
.control {
86+
position: absolute;
87+
right: 10px;
88+
bottom: 38px;
89+
border-radius: 4px;
90+
background-color: rgba(255, 255, 255, 0.8);
91+
font-size: 12px;
92+
font-weight: bold;
93+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
94+
95+
&-item {
96+
padding: 4px 6px;
97+
cursor: pointer;
98+
99+
&:not(:last-child) {
100+
border-bottom: 1.5px solid #ccc;
101+
}
102+
103+
&:hover {
104+
background-color: rgba(0, 0, 0, 0.1);
105+
}
106+
}
107+
}
108+
</style>

‎docs/.vuepress/config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ export default defineUserConfig({
119119
// },
120120
{
121121
text: '插件',
122-
children: ['/plugins/image-layer', '/plugins/echarts-layer'],
122+
children: ['/plugins/image-layer', '/plugins/echarts-layer', '/plugins/polygon-morpher'],
123123
},
124124
],
125125
'/advance/': [

‎docs/example/plugins-polygon-morpher.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<ClientOnly>
2+
<common-code-view name="plugins-polygon-morpher" :is-code-view="false"/>
3+
</ClientOnly>
4+
5+
@[code vue](../.vuepress/components/map/plugins/polygon-morpher.vue)

‎docs/plugins/echarts-layer.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# EChartsLayer
22

3-
借助插件 [@naivemap/mapbox-gl-echarts-layer](https://www.npmjs.com/package/@naivemap/mapbox-gl-echarts-layer) 可直接在 Mapbox GL JS 中使用 Apache ECharts 的 [scatter](https://echarts.apache.org/zh/option.html#series-scatter)、[effectScatter](https://echarts.apache.org/zh/option.html#series-effectScatter) 和 [lines](https://echarts.apache.org/zh/option.html#series-lines)。
3+
借助 [@naivemap/mapbox-gl-echarts-layer](https://www.npmjs.com/package/@naivemap/mapbox-gl-echarts-layer) 插件可直接在 Mapbox GL JS 中使用 Apache ECharts 的 [scatter](https://echarts.apache.org/zh/option.html#series-scatter)、[effectScatter](https://echarts.apache.org/zh/option.html#series-effectScatter) 和 [lines](https://echarts.apache.org/zh/option.html#series-lines)。
44

55
```bash
66
# yarn

‎docs/plugins/image-layer.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# ImageLayer
22

3-
借助 [ImageLayer](https://www.npmjs.com/package/@naivemap/mapbox-gl-image-layer) 插件可以加载任意投影的图片，该插件使用了 [Arrugator](https://gitlab.com/IvanSanchez/arrugator) 和 [Proj4js](https://github.com/proj4js/proj4js) 工具对图片重新投影，使其正确叠加到地图。
3+
借助 [@naivemap/mapbox-gl-image-layer](https://www.npmjs.com/package/@naivemap/mapbox-gl-image-layer) 插件可以加载任意投影的图片，该插件使用了 [Arrugator](https://gitlab.com/IvanSanchez/arrugator) 和 [Proj4js](https://github.com/proj4js/proj4js) 工具对图片重新投影，使其正确叠加到地图。
44

55
```bash
66
# yarn

‎docs/plugins/polygon-morpher.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# PolygonMorpher
2+
3+
借助 [@naivemap/mapbox-gl-polygon-morpher](https://www.npmjs.com/package/@naivemap/mapbox-gl-polygon-morpher) 插件实现多边形平滑变化效果。
4+
5+
<ClientOnly>
6+
<common-code-view name="plugins-polygon-morpher"/>
7+
</ClientOnly>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@deck.gl/mesh-layers": "^8.8.23",
3535
"@naivemap/mapbox-gl-echarts-layer": "^0.3.2",
3636
"@naivemap/mapbox-gl-image-layer": "^0.4.2",
37+
"@naivemap/mapbox-gl-polygon-morpher": "^0.1.0",
3738
"@turf/bearing": "^7.0.0-alpha.0",
3839
"@turf/distance": "^7.0.0-alpha.0",
3940
"@turf/helpers": "^7.0.0-alpha.0",

0 commit comments

Comments
 (0)