地圖可視化開發技術選型

本文轉載自查看原文 2021-05-14 02:34 191 webGIS/ 日常

1. 二維地圖開發

可供選擇的sdk有Openlayers，leafLet，高德sdk，百度sdk等。
本着開源，性能強大的特點，選擇Openlayers。
API地址：https://openlayers.org/en/latest/apidoc/

Vue項目中安裝使用
1） npm install ol
2）代碼文件中按需引入相應包即可。
3） API參考文檔https://openlayers.org/en/latest/apidoc/module-ol_extent.html#.extend
4） Ol3架構圖如下：

摘自網絡

選擇面交互

選擇點交互

點信息展示

等溫圖

2. 三維地圖開發

本着開源，性能強大的特點，選擇Cesium。
API參考地址：https://cesium.com/docs/cesiumjs-ref-doc/

Vue項目中安裝使用
1） npm install cesium
2） npm install copy-webpack-plugin
3） vue.config.js配置

const CopyWebpackPlugin = require('copy-webpack-plugin');
let cesiumSource = './node_modules/cesium/Source';let cesiumWorkers = '../Build/Cesium/Workers';
const path = require('path');

module.exports = {
publicPath: '/aio/',
configureWebpack: {
resolve: {  alias: {    'cesium': path.resolve(__dirname, cesiumSource)  }},
plugins: [//拷貝文件  new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),  new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),  new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),  new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),  new webpack.DefinePlugin({    CESIUM_BASE_URL: JSON.stringify('/aio/')  })
]
}
}

main.ts引入

let widgets = require('cesium/Widgets/widgets.css');let Cesium = require('cesium/Cesium');Vue.prototype.widgets = widgets;Vue.prototype.Cesium = Cesium;

vue文件調用

let Cesium = this.Cesium;let viewer = new Cesium.Viewer("cesiumContainer", {  geocoder: false, // 隱藏搜索  homeButton: false, // 隱藏主頁  sceneMode: Cesium.SceneMode.COLUMBUS_VIEW, // 設置場景模式為2D，默認為3D  sceneModePicker: false, // 隱藏二三維轉換  scene3DOnly: false,  navigationHelpButton: false, // 隱藏幫助按鈕  animation: false, // 隱藏時鍾  timeline: false, // 隱藏時間軸  fullscreenButton: false, // 隱藏全屏  vrButton: false, // 隱藏雙屏模式  infoBox: false, // 隱藏點擊 entity 信息框  selectionIndicator: false, // 隱藏點擊 entity 綠框  baseLayerPicker: false,  orderIndependentTranslucency: false,  contextOptions: {    webgl: {      alpha: true    }  }});

6）架構圖