Skip to content

Commit

Permalink
update：add docs playgrounds
Browse files Browse the repository at this point in the history
  • Loading branch information
@sakitam-fdd
sakitam-fdd committed Mar 30, 2024
1 parent 9b3d842 commit 142f926
Show file tree
Hide file tree
Showing 7 changed files with 487 additions and 134 deletions.
84 changes: 84 additions & 0 deletions docs/playgrounds/amap/amap.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<template>
<div class="playground-content" id="amap" ref="mapRef"></div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
const emits = defineEmits(['mount']);
const initMap = async () => {
const AMapLoader = await import('@amap/amap-jsapi-loader');
AMapLoader.load({
key: '6cb85da518029607d421917b7ddeb94a', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then(() => {
const map = new globalThis.AMap.Map('amap', {
// viewMode: '3D',
resizeEnable: true,
zoom: 0,
center: [113.53450137499999, 34.44104525],
// mapStyle: 'amap://styles/dark',
zooms: [0, 18],
});
import('amap-wind').then(({ WindLayer }) => {
fetch('https://sakitam.oss-cn-beijing.aliyuncs.com/codepen/wind-layer/json/wind.json')
.then((res) => res.json())
.then((res) => {
const windLayer = new WindLayer(res, {
windOptions: {
// colorScale: scale,
velocityScale: 1 / 20,
paths: 5000,
// eslint-disable-next-line no-unused-vars
colorScale: [
'rgb(36,104, 180)',
'rgb(60,157, 194)',
'rgb(128,205,193 )',
'rgb(151,218,168 )',
'rgb(198,231,181)',
'rgb(238,247,217)',
'rgb(255,238,159)',
'rgb(252,217,125)',
'rgb(255,182,100)',
'rgb(252,150,75)',
'rgb(250,112,52)',
'rgb(245,64,32)',
'rgb(237,45,28)',
'rgb(220,24,32)',
'rgb(180,0,35)',
],
lineWidth: 2,
// colorScale: scale,
generateParticleOption: false,
},
zIndex: 20,
// map: map,
// projection: 'EPSG:4326'
});
windLayer.appendTo(map);
emits('mount');
});
});
});
};
onMounted(() => {
initMap();
});
defineExpose({
pause: () => {},
resume: () => {},
});
</script>

<style>
.playground-content {
width: 100%;
height: 450px;
}
</style>
186 changes: 129 additions & 57 deletions docs/playgrounds/mapbox-gl/colorize-image.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
<template>
<div class="playground-content" ref="mapRef"></div>
<div class="playground-content">
<div class="map" ref="mapRef"></div>
<div ref="tpRef" class="tp-panel"></div>
</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { onMounted, onUnmounted, ref } from 'vue';
import mapboxgl from 'mapbox-gl';
import { Pane } from 'tweakpane';
import { Layer, ImageSource, RenderType, DecodeType, RenderFrom } from '@sakitam-gis/mapbox-wind';
defineOptions({
name: 'ColorizeImage',
name: 'MapboxColorizeImage',
});
const mapRef = ref<HTMLDivElement>();
const tpRef = ref<HTMLDivElement>();
const emits = defineEmits(['mount']);
let map;
Expand Down Expand Up @@ -62,67 +67,122 @@
},
});
map.on('load', () => {
const source = new ImageSource('wind', {
url: 'https://blog.sakitam.com/wind-layer/data/tiles/2023111700/2023111703/0/0/0/wind-surface.jpeg',
coordinates: [
[-180, 85.051129],
[180, 85.051129],
[180, -85.051129],
[-180, -85.051129],
],
decodeType: DecodeType.imageWithExif,
wrapX: true,
});
if (!import.meta.env.SSR) {
map.on('load', () => {
const source = new ImageSource('wind', {
url: 'https://blog.sakitam.com/wind-layer/data/tiles/2023111700/2023111703/0/0/0/wind-surface.jpeg',
coordinates: [
[-180, 85.051129],
[180, 85.051129],
[180, -85.051129],
[-180, -85.051129],
],
decodeType: DecodeType.imageWithExif,
wrapX: true,
});
const windColor = [
[0, [98, 113, 183, 255]],
[1, [57, 97, 159, 255]],
[3, [74, 148, 169, 255]],
[5, [77, 141, 123, 255]],
[7, [83, 165, 83, 255]],
[9, [53, 159, 53, 255]],
[11, [167, 157, 81, 255]],
[13, [159, 127, 58, 255]],
[15, [161, 108, 92, 255]],
[17, [129, 58, 78, 255]],
[19, [175, 80, 136, 255]],
[21, [117, 74, 147, 255]],
[24, [109, 97, 163, 255]],
[27, [68, 105, 141, 255]],
[29, [92, 144, 152, 255]],
[36, [125, 68, 165, 255]],
[46, [231, 215, 215, 256]],
[51, [219, 212, 135, 256]],
[77, [205, 202, 112, 256]],
[104, [128, 128, 128, 255]],
];
const interpolateColor = windColor.reduce(
(result: any[], item: any[], key) => result.concat(item[0], `rgba(${item[1].join(',')})`),
[],
);
const layer = new Layer('wind', source, {
styleSpec: {
'fill-color': ['interpolate', ['linear'], ['get', 'value'], ...interpolateColor],
opacity: 1,
},
renderFrom: RenderFrom.rg,
widthSegments: 1,
heightSegments: 1,
displayRange: [0, 104],
renderType: RenderType.colorize,
});
const windColor = [
[0, [98, 113, 183, 255]],
[1, [57, 97, 159, 255]],
[3, [74, 148, 169, 255]],
[5, [77, 141, 123, 255]],
[7, [83, 165, 83, 255]],
[9, [53, 159, 53, 255]],
[11, [167, 157, 81, 255]],
[13, [159, 127, 58, 255]],
[15, [161, 108, 92, 255]],
[17, [129, 58, 78, 255]],
[19, [175, 80, 136, 255]],
[21, [117, 74, 147, 255]],
[24, [109, 97, 163, 255]],
[27, [68, 105, 141, 255]],
[29, [92, 144, 152, 255]],
[36, [125, 68, 165, 255]],
[46, [231, 215, 215, 256]],
[51, [219, 212, 135, 256]],
[77, [205, 202, 112, 256]],
[104, [128, 128, 128, 255]],
];
map.addLayer(layer);
});
const interpolateColor = windColor.reduce(
(result: any[], item: any[], key) => result.concat(item[0], `rgba(${item[1].join(',')})`),
[],
);
const layer = new Layer('wind', source, {
styleSpec: {
'fill-color': ['interpolate', ['linear'], ['get', 'value'], ...interpolateColor],
opacity: 1,
},
renderFrom: RenderFrom.rg,
widthSegments: 1,
heightSegments: 1,
displayRange: [0, 104],
renderType: RenderType.colorize,
});
const f = new Pane({
container: tpRef.value,
});
const panel = f.addFolder({
title: 'mapbox-gl-colorize',
expanded: true,
});
panel.addBinding({ add: true }, 'add').on('change', (ev) => {
if (!ev.value) {
map.removeLayer(layer.id);
} else {
map.addLayer(layer);
}
});
panel.addBinding({ rasterize: true }, 'rasterize').on('change', (ev) => {
if (ev.value) {
layer.updateOptions({
styleSpec: {
'fill-color': ['rasterize', ['linear'], ['get', 'value'], ...interpolateColor],
},
});
} else {
layer.updateOptions({
styleSpec: {
'fill-color': ['interpolate', ['linear'], ['get', 'value'], ...interpolateColor],
},
});
}
});
panel
.addBinding({ opacity: 1 }, 'opacity', {
min: 0,
max: 1,
step: 0.1,
})
.on('change', (ev) => {
layer.updateOptions({
styleSpec: {
opacity: ev.value,
},
});
});
map.addLayer(layer);
});
}
emits('mount');
}
onMounted(() => {
// initMap();
initMap();
});
onUnmounted(() => {
if (map) {
map.remove();
}
});
defineExpose({
Expand All @@ -137,5 +197,17 @@
.playground-content {
width: 100%;
height: 450px;
position: relative;
}
.map {
width: 100%;
height: 100%;
}
.tp-panel {
position: absolute;
top: 10px;
right: 10px;
}
</style>
Loading

0 comments on commit 142f926

Please sign in to comment.