feat: 调试栅格瓦片图层颜色渲染失效问题

This commit is contained in:
Dreammy23 2022-11-26 22:42:33 +08:00
parent 8c95cdcee2
commit fe11e402cd
4 changed files with 186 additions and 6 deletions

View File

@ -1,6 +1,7 @@
import { Scene, RasterLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { encodeParams, sign } from './signGenerator';
export default () => {
useEffect(() => {
@ -8,13 +9,38 @@ export default () => {
id: 'map',
pickBufferScale: 1.0,
map: new GaodeMap({
center: [121.268, 30.3628],
center: [127.471855, 46.509622], // 绥化市-北林区
pitch: 0,
style: 'blank',
zoom: 10,
}),
});
const Base64toArrayBuffer = (base64Data) => {
const padding = '='.repeat((4 - (base64Data.length % 4)) % 4);
const base64 = (base64Data + padding).replace(/-/g, '+').replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
const getUrlQueryParams = (url = location.search): any => {
const params = {};
const keys = url.match(/([^?&]+)(?==)/g);
const values = url.match(/(?<==)([^&]*)/g);
for (const index in keys) {
// @ts-ignore
params[keys[index]] = values?.[index];
}
return params;
};
const layerTile = new RasterLayer({
zIndex: 1,
});
@ -33,14 +59,53 @@ export default () => {
zIndex: 0,
});
layerTile2.source(
'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
// 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
`https://openapi.alipay.com/gateway.do?x={x}&y={y}&z={z}&index=1001&crow_type=101`,
{
parser: {
type: 'rasterTile',
tileSize: 256,
requestParameters: {
type: 'json'
},
getURLFromTemplate: (url, {x,y,z}) => {
const { index, crow_type } = getUrlQueryParams(url);
const biz_content = { x, y, z, index, crow_type };
const newUrl = sign('anttech.ai.cv.rs.xytile.get', biz_content, {
charset: 'utf-8',
version: '1.0',
});
const signStr = Object.keys(encodeParams(newUrl))
.sort()
.map((key) => {
let data = encodeParams(newUrl)[key];
if (Array.prototype.toString.call(data) !== '[object String]') {
data = JSON.stringify(data);
}
return `${key}=${data}`;
})
.join('&');
return `https://openapi.alipay.com/gateway.do?${signStr}`;
},
transformResponse: (response) => Base64toArrayBuffer(response?.anttech_ai_cv_rs_xytile_get_response?.image || '')},
},
);
layerTile2.style({
opacity: 1,
clampLow: false,
clampHigh: false,
domain: [0, 150],
rampColors: {
colors: [ 'rgba(0, 0, 0, 0)','#EAC300' ],
weights: [0.5, 0.5],
},
pixelConstant: 0.0,
pixelConstantR: 256,
pixelConstantG: 0,
pixelConstantB: 0,
pixelConstantRGB: 1,
});
scene.on('loaded', () => {
scene.addLayer(layerTile);

View File

@ -0,0 +1,114 @@
import moment from 'moment';
import JSEncrypt from 'jsencrypt';
import CryptoJS from 'crypto-js';
// const key =
// 遥感地图网页应用 2021003154649392 私钥
// 'MIIEpQIBAAKCAQEAmGPwXSi1MjuIvEh0Gl75d62tTQF/vzMkFDuLjx5RJ/DiSntXbmVV3ZJjICNOKLaWCemHvBerJfXtDQUAJWVo8FwJJQrla3oGHQp38vUNtRLGQQkozzWeSslaXZc/cEDLBfjogzk4jojEXuFpgbzY0BJZg+KHh6k7TK/Tf6Zrn19fxVojeAx8njguIjlDbZAtnaNYlq3fYIVzPX3nd/xTQmLwHKjeuJ626i+zdo57oNKHOOStX/0Isf6y4rj8cdPrmxfWDw86vV1Pd378sKL0vejOrS6TLoYG8sMGk8Fi//ecXnY1068vYl2tQOIqHiZb8XGCFIYoNWefvHPsufqkQwIDAQABAoIBAQCAnfDTn7T2tZqdVwVu8HPbF6Gp2bcJF8++p9cNLwhODpffRySuzyZegNva1xFzeU8/BHQEQ3G2805ka7EI3wNnwjYRppWlVXLtddVxIHS2PCdJ4sInyNhVxIXZcfsf8f+ohcEwZ84dNr+OWO+kiU/wpVwZ3MqIrEOZYNi/5yT0d8jdNNMsDGeGwGzULN/eIqgiF9l3vbn4w79WoUTOll6yxC/8ZYa9TX8yFWGKjElmr6K/c2x2NuRpToQgYv5iqN6m1biUNmkoqQ3cbysGAKP2Vb7S9GEjI6Kcp3TwfyrE65s7pS0aU6lNfuqzjNuulRDnxAXP2+fHSOcZBFQSu7TpAoGBAOPO+9jbezq6eQ9seruN8UMriTiFRU02E+HNihCbM2Vvwbb4wet25dJYL4TqRT+CawQA7XQ85/8QCl0mpUOFDJa6agYSby2Eai2IDZ5KxvdDNXDuQv+R4Wh2TV3xjK4tyrUZhYGZZ8g1MrxuilvR7/gG41pl0X28aDHxzjWgV4JtAoGBAKs/sccl4QbINq2AUB/rWKFv2SNVMTpq13/PtRCeVe49Gin9SpEuYm5XD/0n9hNRDiYul8Hwcq1ff5O+bEi+UJyqyVDjJs82onhCJOY+hWkTcluQCkjKNqKyTciys0gsZorY8/oxzkZ7aBQSkhZ4+ReR8tf2Ti46QTB1ft/55xNvAoGBAKINb6JIH1UbqVqLdJNO2b1Kjwah5zaRrXsHV5uQi/MwmMCsHGZ/4eTLzqHidPhEshPbBQ+W9AHBS14QS6fIUbg3S4yeOHBMratOCUH9N6RVLwLyur5K6+n/nfGiDs0ozfYd/Za/pdAJ59mbWNkQcoAhhkGcBHZJPGWq+WG0egvRAoGBAJnLPTS17w7xNjHBf7P634E0etTBiNGG7HyLpHgFSvUHiPzWzmXuO1YO+HwJrHSSodtmksII2GSd1GxyYrs9uBXLR7tOFSeZUHYiKRNiaNwCK/zRMntGp6Sb70FkQ6B4x6rAxvQWUMN5xvHn760g/cvONkL/oBziEnObwdMSkxUfAoGAQ2zEYHRAas8lichIbcrmfvtBUSfAKIEJO+rXeNoxjEKPHRERlCVnAs/O5OmxbB+oZzyrK16+LGM+3jnDEf0kdT49cqkMK1n8CJR2W9MrbK8jMFZOR0XW7vQ0J0vnc5R6vobf3U4jFq8nVK3ehOUicVIqre6LEiHKVQUqC3y+Vl4=';
// 遥感地图网页应用 2021003154694648 私钥
// 'MIIEpQIBAAKCAQEA1N165ud87194oMhMT4oCsoF+DenzjhRMEo4WxlSbWsyGRExQh7MSZ+aZZS8RWDLSfy3VNpUhpYllDiGg/Ng2q6SE4inU2O5IBghBKWJoznld+0CiUCKFEFukRYtUszedHiN5rlfE4E/PsUF0RiV8VRCPMdsHsfQvwYJ54CAuFKKcD4FLHrBmHb7X7D569gGJYEyf4L5iBxLoFgoiMnUwoY2SZr4ge+kW94RvNuUCWHDDA8o5/Z8SMztotrwRE1utHgqbPSV1wIn1vppQs8tH2qp8m0s5lT11iEqoJ6NPNlglU6s/4p7CV4genTvXOPyGqVKxz1i29m2LebU0khSwzwIDAQABAoIBAQCyEOBp3kXV3HCFV2j2tIWTG93997JFLVeBwhjtKgOXjjXXVlubWMJR5kZ1rUz+Ee2idA3DDjfKSUge7STFvnzlUsfShZnHKnVXjnosC2WPK1nh/2yISogzaeXeQzLEhQZLGvQEUumfl0QvjIie0WbTpfmThB1I0PNOFj6rrV++482DNdOfIGPAjWb+Id32vbQxgzUtFNsSno85l4EFRZQ9hfXsljxRuDeA4VLUWo7ZpOztNVO95emhAWgWQ2S0/YNgVO04UVVfiCQSqa80HpNz4l+4WnCQEDKrOA4kY64h988g7MG1bN9uaV9zQ6u6wh/Ijb4vvIL/ShwaQHvWtE5RAoGBAPJFgPcyv7Eatg6WMM+bW5ihf6Q2x3KUvocAtnhjLb0DNGsewJGknCU0dE5BQN0TdbV3H1mncLaBOl7XFT2Rvgs0KdUzCBi60uyMtFSRnty/UarE5vdUH8pKWX+OniRcMr9nYD1k/CxWrBKfhOwi8rxgaIJkbIjzHWzwKbZoeEvXAoGBAODtZSKmBc83v5fRR4eSr0QPDzjvzEOZc/g5AOzKhJx+2d496t25bULuxWEsHonvZweLNZraM2wV/lM6wLbmEj1FYHvcuU9TvInceqCbKcXSCkZOpqyuUKJGQVHIAswno07cekp2SFB+1OABYSvEWqVeYg3rqzVjGqVrvuBae2PJAoGBAMTzJbVPhzAVk9zl0cZj+KFq4JYBhkAqlXywYqYZkkwut8VBWbDMjbddHhOjznQqZq1fqpe6m9Fx2p7Q4M6NlV4MSNmtw64+6kss00hQnUG9MknOCikUNUfBC2K78OmEHiklg8JFPw9YYkg9b9R7ULM8+JjPxL/MS6aM0owb/3c/AoGBAKXir2okY7h19xmywTxdlGFvcdyeDln0vLDe6a25lqAMdgYQSD2KWei5TFzkOwmjxKqtorU4JCCc/9rGRAcgG2eQ2R3ApfK5YR2Tu+TjSqWYyPcdXpOQY+uqQNZd2qJSwYCR3qc4IREs2Tb0DYRH5kp8F3kIzFYtZyOFGVtBoCrxAoGAdZnOWrUyXx6OJg98+TtV5HMkNIVbdGjjoJvmvxgXnABHKbyRjnP4WxARQiiBga/qh07+Ovo4EkbyWf5oqkogzY+F969A5zeSQCuJ7Gu6HzBdjcAIRzq8hDqBiFSskYBFz/Ohn8JL8Y757JXYgjur6AppOk4KElC0o/ZOXkPjg7k=';
// RSA 签名
const encrypt = new JSEncrypt();
// encrypt.setPrivateKey(key);
const AK = {
appId: '2021003154694648', // 遥感地图网页应用
key:
'MIIEpQIBAAKCAQEA1N165ud87194oMhMT4oCsoF+DenzjhRMEo4WxlSbWsyGRExQh7MSZ+aZZS8RWDLSfy3VNpUhpYllDiGg/Ng2q6SE4inU2O5IBghBKWJoznld+0CiUCKFEFukRYtUszedHiN5rlfE4E/PsUF0RiV8VRCPMdsHsfQvwYJ54CAuFKKcD4FLHrBmHb7X7D569gGJYEyf4L5iBxLoFgoiMnUwoY2SZr4ge+kW94RvNuUCWHDDA8o5/Z8SMztotrwRE1utHgqbPSV1wIn1vppQs8tH2qp8m0s5lT11iEqoJ6NPNlglU6s/4p7CV4genTvXOPyGqVKxz1i29m2LebU0khSwzwIDAQABAoIBAQCyEOBp3kXV3HCFV2j2tIWTG93997JFLVeBwhjtKgOXjjXXVlubWMJR5kZ1rUz+Ee2idA3DDjfKSUge7STFvnzlUsfShZnHKnVXjnosC2WPK1nh/2yISogzaeXeQzLEhQZLGvQEUumfl0QvjIie0WbTpfmThB1I0PNOFj6rrV++482DNdOfIGPAjWb+Id32vbQxgzUtFNsSno85l4EFRZQ9hfXsljxRuDeA4VLUWo7ZpOztNVO95emhAWgWQ2S0/YNgVO04UVVfiCQSqa80HpNz4l+4WnCQEDKrOA4kY64h988g7MG1bN9uaV9zQ6u6wh/Ijb4vvIL/ShwaQHvWtE5RAoGBAPJFgPcyv7Eatg6WMM+bW5ihf6Q2x3KUvocAtnhjLb0DNGsewJGknCU0dE5BQN0TdbV3H1mncLaBOl7XFT2Rvgs0KdUzCBi60uyMtFSRnty/UarE5vdUH8pKWX+OniRcMr9nYD1k/CxWrBKfhOwi8rxgaIJkbIjzHWzwKbZoeEvXAoGBAODtZSKmBc83v5fRR4eSr0QPDzjvzEOZc/g5AOzKhJx+2d496t25bULuxWEsHonvZweLNZraM2wV/lM6wLbmEj1FYHvcuU9TvInceqCbKcXSCkZOpqyuUKJGQVHIAswno07cekp2SFB+1OABYSvEWqVeYg3rqzVjGqVrvuBae2PJAoGBAMTzJbVPhzAVk9zl0cZj+KFq4JYBhkAqlXywYqYZkkwut8VBWbDMjbddHhOjznQqZq1fqpe6m9Fx2p7Q4M6NlV4MSNmtw64+6kss00hQnUG9MknOCikUNUfBC2K78OmEHiklg8JFPw9YYkg9b9R7ULM8+JjPxL/MS6aM0owb/3c/AoGBAKXir2okY7h19xmywTxdlGFvcdyeDln0vLDe6a25lqAMdgYQSD2KWei5TFzkOwmjxKqtorU4JCCc/9rGRAcgG2eQ2R3ApfK5YR2Tu+TjSqWYyPcdXpOQY+uqQNZd2qJSwYCR3qc4IREs2Tb0DYRH5kp8F3kIzFYtZyOFGVtBoCrxAoGAdZnOWrUyXx6OJg98+TtV5HMkNIVbdGjjoJvmvxgXnABHKbyRjnP4WxARQiiBga/qh07+Ovo4EkbyWf5oqkogzY+F969A5zeSQCuJ7Gu6HzBdjcAIRzq8hDqBiFSskYBFz/Ohn8JL8Y757JXYgjur6AppOk4KElC0o/ZOXkPjg7k=',
};
const openAPIConfig: any = {
gateway: 'http://openapi.stable.dl.alipaydev.com/gateway.do',
timeout: 5000,
charset: 'utf-8',
version: '1.0',
appId: '2021003154694648',
camelcase: false,
};
export async function callByOpenAPI(
method: string,
// modelId: string,
// version: string,
// appId: string = '',
bizContent: Object,
) {
const params = sign(method, bizContent, openAPIConfig);
const encodedParams = encodeParams(params);
// console.log('encodedParams :>> ', encodedParams);
return encodedParams;
}
/**
*
* @description https://opendocs.alipay.com/common/02kf5q
* @param {string} method alipay.ebpp.bill.add
* @param {object} bizContent
* @param {object} config sdk
*/
export function sign(method: string, bizContent: any = {}, config: any): any {
const signParams = Object.assign({
method,
appId: config.appId || AK.appId,
charset: config.charset,
version: config.version,
signType: 'RSA2',
timestamp: moment().format('YYYY-MM-DD HH:mm:ss'),
// appAuthToken: '202210BB64237396751c42aa9c225985256e2D92',
// ws_service_url: 'mysearchgw-36.gz00b.dev.alipay.net:12200', // 可选,开发环境需要传,预发环境不需要传
});
encrypt.setPrivateKey(config.key || AK.key);
if (bizContent) {
signParams.bizContent = JSON.stringify(toSnakeCases(bizContent));
}
// params key 驼峰转下划线
const deCamelizeParams = toSnakeCases(signParams);
// 排序
const signStr = Object.keys(deCamelizeParams)
.sort()
.map((key) => {
let data = deCamelizeParams[key];
if (Array.prototype.toString.call(data) !== '[object String]') {
data = JSON.stringify(data);
}
return `${key}=${data}`;
})
.join('&');
// console.log('signStr :>> ', signStr);
// 计算签名
const sign = RSAEncrypt(signStr);
return Object.assign(deCamelizeParams, { sign });
}
function RSAEncrypt(signStr: string) {
const start = Date.now();
const encrypted = encrypt.sign(signStr, CryptoJS.SHA256, 'sha256');
// console.log('encrypted :>> ', encrypted, Date.now() - start);
return encrypted;
}
function toSnakeCases(params: any) {
const out: { [key in string]: any } = {};
Object.keys(params).forEach((key) => {
const newKey = key.replace(
/([A-Z])/g,
(match) => '_' + match.toLowerCase(),
);
out[newKey] = params[key];
});
return out;
}
export function encodeParams(params: any) {
const out: { [key in string]: any } = {};
Object.keys(params).forEach((key) => {
out[key] = encodeURIComponent(params[key]);
});
return out;
}

View File

@ -155,7 +155,9 @@
"webpack-merge": "^4.1.4",
"wellknown": "^0.5.0",
"worker-loader": "^2.0.0",
"yorkie": "^2.0.0"
"yorkie": "^2.0.0",
"crypto-js": "^4.1.1",
"jsencrypt": "^3.2.1"
},
"scripts": {
"dev": "npm run worker && dumi dev",

View File

@ -16,8 +16,7 @@ export default class Logo extends Control<ILogoControlOption> {
position: PositionType.BOTTOMLEFT,
name: 'logo',
href: 'https://l7.antv.antgroup.com/',
img:
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GRb1TKp4HcMAAAAAAAAAAAAAARQnAQ',
img: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GRb1TKp4HcMAAAAAAAAAAAAAARQnAQ',
};
}