地图可视化开发技术选型

Posted 2021-05-14 游侠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了地图可视化开发技术选型相关的知识，希望对你有一定的参考价值。

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）架构图