2021-012 格子語言：衝衝車聯網

雙腦並行: 格子語言必須同時讓人腦與電腦，都能順暢快樂閱讀。語法越接近電腦底層運作的程式語言，人類閱讀起來會很冗長細節痛苦。但語法越接近人類自然語言的描述，電腦執行起來會緩慢（需要理解翻譯的時間）。我們希望撰寫格子語言時能比 Python 更簡單秒懂，執行效能又能與 Julia RUST C 語言看齊。

我們先來建立宏觀之下，車聯網格子語言的執行指令。

open("/results/action格子語言-臺中港車聯網資料視覺化.csv","w") do 檔案
  write(檔案,"建立模板, 車聯網模板.html
變換Logo, 隨性少女英雄股份有限公司logo.png
變換多國語言, 繁體中文.csv
載入資料檔, 車聯網資料.csv
指定欄位, Lat, LAT
指定欄位, Lon, LON
指定欄位, Altitude, PM2_5_UART
選擇數值代表顏色
建立拖拉時間軸
載入資料檔, 微型感測器資料.csv
指定經度Longitude欄位
指定緯度Latitude欄位
指定數值欄位
選擇數值代表顏色
地圖中心切換到指定地點, 臺中港
地圖放大縮小, 中
播放時間序列動畫")
end
0.2s
Julia
→

建立模板, 車聯網模板

首先必須要測試最基本的 React Redux 框架是不是能夠正常運作，正確的話會顯示一些字串在頁面上

只需要把 github 上面的 kepler.gl/examples/umd-client/index.html 拿來運用即可，記得必須修改 MAPBOX_TOKEN，可以事先上網申請一個。

%%html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Kepler.gl embedded map</title>
    <!--Uber Font-->
    <link rel="stylesheet" href="https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css">
    <!--MapBox css-->
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet">
    <!-- Load React/Redux -->
    <script src="https://unpkg.com/react@16.8.4/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16.8.4/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/redux@3.7.2/dist/redux.js" crossorigin></script>
    <script src="https://unpkg.com/react-redux@7.1.3/dist/react-redux.min.js" crossorigin></script>
    <script src="https://unpkg.com/styled-components@4.1.3/dist/styled-components.min.js" crossorigin></script>
    <!-- Load Kepler.gl-->
    <script src="https://unpkg.com/kepler.gl@2.4.0/umd/keplergl.min.js"></script>
    <!--If you want to load the build from filepath -->
    <!--<script src="../../umd/keplergl.min.js"></script>-->
    <style type="text/css">
      body {margin: 0; padding: 0; overflow: hidden;}
    </style>
    <!--MapBox token-->
    <script>
      /**
       * Provide your MapBox Token
       **/
      const MAPBOX_TOKEN = 'pk.eyJ1IjoiYm93ZW5jaGl1IiwiYSI6ImNrNzh3bjA3YzAwNWszZW5zc2doZGNqZGwifQ.o_MrY1UR1GjqQO8nD5lJVQ';
      const WARNING_MESSAGE = 'Please Provide a Mapbox Token in order to use Kepler.gl. Edit this file and fill out MAPBOX_TOKEN with your access key';
    </script>
  </head>
  <body>
    <!-- We will put our React component inside this div. -->
    <div id="app">
      <!-- Kepler.gl map will be placed here-->
    </div>
    <!-- Load our React component. -->
    <script>
      /* Validate Mapbox Token */
      if ((MAPBOX_TOKEN || '') === '' || MAPBOX_TOKEN === 'PROVIDE_MAPBOX_TOKEN') {
        alert(WARNING_MESSAGE);
      }
      /** STORE **/
      const reducers = (function createReducers(redux, keplerGl) {
        return redux.combineReducers({
          // mount keplerGl reducer
          keplerGl: keplerGl.keplerGlReducer
        });
      }(Redux, KeplerGl));
      const middleWares = (function createMiddlewares(keplerGl) {
        return keplerGl.enhanceReduxMiddleware([
          // Add other middlewares here
        ]);
      }(KeplerGl));
      const enhancers = (function craeteEnhancers(redux, middles) {
        return redux.applyMiddleware(...middles);
      }(Redux, middleWares));
      const store = (function createStore(redux, enhancers) {
        const initialState = {};
        return redux.createStore(
          reducers,
          initialState,
          redux.compose(enhancers)
        );
      }(Redux, enhancers));
      /** END STORE **/
      /** COMPONENTS **/
      const KeplerElement = (function (react, keplerGl, mapboxToken) {
        return function(props) {
          return react.createElement(
            'div',
            {style: {position: 'absolute', left: 0, width: '100vw', height: '100vh'}},
            react.createElement(
              keplerGl.KeplerGl,
              {
                mapboxApiAccessToken: mapboxToken,
                id: 'map',
                width: props.width || 1200,
                height: props.height || 800
              }
            )
          )
        }
      }(React, KeplerGl, MAPBOX_TOKEN));
      const app = (function createReactReduxProvider(react, reactRedux, KeplerElement) {
        return react.createElement(
          reactRedux.Provider,
          {store},
          react.createElement(KeplerElement, null)
        )
      }(React, ReactRedux, KeplerElement));
      /** END COMPONENTS **/
      /** Render **/
      (function render(react, reactDOM, app) {
        reactDOM.render(app, document.getElementById('app'));
      }(React, ReactDOM, app));
    </script>
    <!-- The next script will show how to interact directly with Kepler map store -->
    <script>
      /**
       * Customize map.
       * Interact with map store to customize data and behavior
       */
      (function customize(keplerGl, store) {
        // store.dispatch(keplerGl.toggleSplitMap());
      }(KeplerGl, store))
    </script>
  </body>
</html>
1.0s
Python
→
Runtimes (2)