zoukankan      html  css  js  c++  java
  • arcgis 4 与deckgl 整合 (二)

    针对deckgl TripsLayer

    我们构建采集器,目的是支持多种数据类型到 TripsLayer, 并且支持arcgis 服务

    • const axios = require('axios')
    •  
    • export default class TripsLayerParser {
    • static getDataFromUrl(url: string) {
    • return new Promise((resolve => {
    • const queryUrl = `${url}/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=%5B%5D&returnGeometry=true&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&resultOffset=&resultRecordCount=&queryByDistance=&returnExtentsOnly=false&datumTransformation=&parameterValues=&rangeValues=&f=geojson`;
    • axios.get(queryUrl).then((r: any) => {
    • let data = this.getTimestampFromGeoJson(r.data);
    • resolve(data);
    • });
    • }));
    • }
    •  
    • static getDataFromJsonUrl(url: string) {
    • return new Promise((resolve => {
    • axios.get(url).then((r: any) => {
    • let data = this.getTimestampFromGeoJson(r.data);
    • resolve(data);
    • });
    • }));
    • }
    •  
    • static getDataFromArray(array: any) {
    • return this.getTimestampFromArray(array);
    • }
    •  
    • private static getTimestampFromArray(lines: any) {
    • let data: any = [];
    • lines.forEach((line: any) => {
    • data.push({
    • path: line.geometry,
    • timestamps: this.getRandomTimestamp(line.geometry.length)
    • });
    • });
    • return data;
    • }
    •  
    • private static getTimestampFromGeoJson(dataArray: any) {
    • let lines = dataArray.features;
    •  
    • let data: any = [];
    • lines.forEach((line: any) => {
    • if (line.geometry.type === "MultiLineString") {
    • for (let item of line.geometry.coordinates) {
    • data.push({
    • path: item,
    • timestamps: this.getRandomTimestamp(item.length)
    • });
    • }
    • } else {
    • data.push({
    • path: line.geometry.coordinates,
    • timestamps: this.getRandomTimestamp(line.geometry.coordinates.length)
    • });
    • }
    • });
    • return data;
    • }
    •  
    • private static getRandomTimestamp(length: number) {
    • let timestamps: any = [];
    • for (let i = 0; i < length; i++) {
    • timestamps.push(i * 100);
    • }
    • return timestamps;
    • }
    • }

    封装的
    ```javascript
    import BaseLayer from "./BaseLayer";
    import TripsLayerParser from "./TripsLayerParser";
    import ColorManager from "./ColorManager";
    const {TripsLayer} = require("@deck.gl/geo-layers");

    export default class DeckTripsLayer extends BaseLayer {

    view: any;
    options: any;

  • 相关阅读:
    jQuery报 SyntaxError: expected expression, got '<'错误
    【转】JSP使用上传文件,并生产高清缩略图示例
    [转]Oracle中使用Rownum分页详细例子
    [转]oracle设计数据库应选择正确的数据类型
    [转]oracle数据类型和对应的java类型
    [转]如何判断js中的数据类型
    [转]理解JavaScript中的事件处理
    [转]关于jquery中html()、text()、val()的区别
    [转]jquery 点击表格变为input可以修改无刷新更新数据
    招聘网站需求分析
  • 原文地址:https://www.cnblogs.com/haibalai/p/15828980.html
Copyright © 2011-2022 走看看