antvis / LarkMap

A React toolkit for geospatial visualization based on L7.

Home Page:https://larkmap.antv.antgroup.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

🤔 [QUESTION] 似乎没有完全支持L7Plot的raster部分

Euraxluo opened this issue · comments

🐛 Question description [Please make everyone to understand it]

感谢LarkMap,但是看起来似乎没有完全支持L7的raster部分。
请告诉我怎么做才能实现呢,这个很重要,可以使用L7内部的转换代码将各种数据转换为栅格后传给LarkMap吗

💻 Link to minimal reproduction

source code:

import AMapLoader from '@amap/amap-jsapi-loader';
import { LarkMap, RasterLayer, RasterLayerProps } from '@antv/larkmap';
import React, { useState } from 'react';
import { GaodeMap } from '@antv/l7';

const rasterLayerOptions: Omit<RasterLayerProps, 'source'> = {
    autoFit: true,
    style: {
        opacity: 0.8,
        domain: [0, 2000],
        rampColors: {
            colors: ['#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C'].reverse(),
            positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
        },
    },
};
const getMapInstance = () => {
    return AMapLoader.load({
        key: '089b120ae9421928984329b9ecec8eba', // 申请好的 Web 端开发者Key,首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
    }).then((AMap) => {
        return new GaodeMap({
            mapInstance: new AMap.Map('container', {
                zoom: 12, //初始化地图层级
                center: [116.397428, 39.90923], //初始化地图中心点
            }),
        });
    });
};
export default function Map() {
    const [rasterOptions, setRasterOptions] = useState(rasterLayerOptions);
    const [rasterSource, setRasterSource] = useState({
        data: {
            type: "FeatureCollection",
            features: [
                {
                    type: "Feature",
                    geometry: { type: "Point", coordinates: [104.101, 30.649] },
                    properties: { name: "chengdu" },
                },
            ],
        },
        parser: { type: 'geojson' },
        raster: {
            cellSize: 0.002, // 20cm对应的经纬度大小,这个值会因地区和投影方式而略有差异
        },
        transforms: [
            {
                type: 'grid',
                size: 15000,
                field: 't',
                method: 'sum',
            }
        ]
    });
    return (
        <LarkMap
            id="container"
            map={getMapInstance}
            className="h-9/10"
        >
            <RasterLayer {...rasterOptions} source={rasterSource} />
        </LarkMap>
    );
}

image
image

Please provide a link by forking these links LarkMap or GitHub repo. What is a minimal reproduction, and why is it required?

🏞 Expected result

预期:正常运行

🚑 Any additional [like screenshots]

  • LarkMap Version:
    "@antv/l7": "^2.15.2",
    "@antv/l7-draw": "^3.0.20",
    "@antv/larkmap": "^1.3.5",
  • Platform:
    windows

https://larkmap.antv.antgroup.com/components/layers/base-layers/raster-layer
larkMap官网示例是跑通的,我现在想要实现L7的一些别的功能:https://l7plot.antv.antgroup.com/api/source
主要需求是看能不能直接渲染geojson到栅格

栅格图层只支栅格数据

所以不支持吗

那么L7plot的source和LarkMap的RasterLayer的source其实不是一样的嘛

Raste图层r只支持 Raster 数据,这个肯定不一样的。L7也不行

我以为可以支持L7plot的那种使用方式

可以写啊,但是也是按照raster 去写

{
...prevState,
data: tiffData.data,
parser: {
type: 'raster',
width: tiffData.width,
height: tiffData.height,
min: 0,
max: 80,
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
},
}