相关Web GIS实战信息：
上一篇博客： WebGIS实战：前端开发环境搭建(nvm、node、vue cli)
下一篇博客： WebGIS实战：Openlayers实现网络地图的加载与切换

上一节已经搭建好了基于Vue.js的前端开发环境，但是对于里面的配置我们还没完善，所以，这一节主要对开发环境进行具体配置，以满足Web GIS开发。

博主选择的配置是： Vue2.*+IView+Openlayers+Ol-ext+Proj4+JQuery+Axios

• Vue2.*：虽然现在Vue已经更新到3.0了，但流行使用的仍是Vue2，所以博主采用Vue2全家桶；
• IView：IView是基于Vue框架的UI库，里面几乎能满足我们前端的UI需求，如按钮、菜单栏、图标等等；
• Openlayers：Openlayers是一个高性能、功能丰富的地图库，用于在 Web 上创建交互式地图，如地图加载、显示与关闭、查询交互等。目前已经更新到Openlayers6.4.3版本；
• Ol-ext：Ol-ext是对于Openlayers库的一个扩展库，在Openlayers的基础上实现了许多的UI交互操作，如图层控制切换等。目前已经更新到Ol-ext3.1.7；
• proj4：proj4是开源GIS最著名的地图投影库，在前端交互中加载的地图不可能都是同一个坐标系的，因此也需要通过坐标系转换或投影转换后再进行加载；
• JQuery：JQuery是JavaScript最重要的一个库之一，虽然Vue能够实现DOM操作，但是有些场景仍需要JQuery来辅助；
• Axios：Axios是一个基于 promise 的 HTTP 库，能够向后台发送请求。相比其他HTTP库，其操作更简洁与方便。

对于其他需要的库，可能会在后面更新增加。当前的配置基本满足了Web GIS的开发需求。另外，以下的配置文件都是可以复制粘贴到你的项目中的

在添加这些配置前，先修改修改有Vue CLI提供的基础配置吧！

1、修改Webpack配置

const path = require('path')
const UglifyPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    publicPath: './', // 基本路径
    outputDir: 'dist', // 输出文件目录
    lintOnSave: false, // eslint-loader 是否在保存的时候检查
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: config => {
        config.resolve.symlinks(true);//热更新
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            // 将每个依赖包打包成单独的js文件
            let optimization = {
                runtimeChunk: 'single',
                splitChunks: {
                    chunks: 'all',
                    maxInitialRequests: Infinity,
                    minSize: 20000,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name (module) {
                                // get the name. E.g. node_modules/packageName/not/this/part.js
                                // or node_modules/packageName
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                // npm package names are URL-safe, but some servers don't like @ symbols
                                return `npm.${packageName.replace('@', '')}`
                minimizer: [new UglifyPlugin({
                    uglifyOptions: {
                        compress: {
                            warnings: false,
                            drop_console: true, // console
                            drop_debugger: false,
                            pure_funcs: ['console.log'] // 移除console
                })]
            Object.assign(config, {
                optimization
        } else {
            // 为开发环境修改配置...
            config.mode = 'development'
        Object.assign(config, {
            // 开发生产共同配置
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    '@c': path.resolve(__dirname, './src/components'),
                    '@v': path.resolve(__dirname, './src/views')
                } // 别名配置
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
    parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
    pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0', // 允许外部ip访问
        port: 8022, // 端口
        https: false, // 启用https
        overlay: {
            warnings: true,
            errors: true
        }, // 错误、警告在页面弹出
        proxy: {
            '/api': {
                target: 'http://www.baidu.com/api',
                changeOrigin: true, // 允许websockets跨域
                // ws: true,
                pathRewrite: {
                    '^/api': ''
        } // 代理转发配置，用于调试环境
    // 第三方插件配置
    pluginOptions: {}
2、添加库管理配置
 
步骤1：将上述的相关库通过package.json添加
 
  "name": "webgis",
  "version": "0.1.0",
  "author": "Oruizn",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "vue-select": "^3.10.8",
    "axios": "^0.21.0",
    "vue-axios": "^3.2.0",
    "vue-lazy-render": "^1.0.20",
    "jquery": "^3.2.1",
    "ol": "^6.4.3",
    "ol-ext": "^3.1.17",
    "ol-contextmenu": "^4.1.0",
    "proj4": "^2.6.3",
    "view-design": "^4.4.0",
    "izitoast": "^1.4.0"
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-mocha": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^1.0.3",
    "babel-eslint": "^10.1.0",
    "chai": "^4.1.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11",
    "uglifyjs-webpack-plugin": "^2.2.0"
步骤2：在terminal终端中输入npm install，将上述的相关库通过npm导入本地；
 
 
3、修改Vue CLI初始化的文件
 
删除掉view文件夹中的Home.vue、About.vue，component文件夹中的HelloWorld.vue；
删除App.vue文件中对于Home、About的引用；
 
删除router文件夹下Index.js中对于Home和About的索引；
 
 
4、下一步计划
 
至此，关于Web GIS开发环境配置及初始化就完成了。
 
接下来，就需要使用这些库来创建相关的地图应用，下一节的的内容是：如何通过Openlayers实现网络地图的加载与切换。
 
请关注博主，以获得最新的Web GIS实战信息！谢谢大家。
 
上一篇博客：WebGIS实战：前端开发环境搭建(nvm、node、vue cli)
 下一篇博客：WebGIS实战：Openlayers实现网络地图的加载与切换
				
在开源WebGIS实施方案（一）：开篇中给出了Java环境下实现WebGIS的开源软件组合：uDig + PostgreSQL/PostGIS + Tomcat + GeoServer + Openlayers，本文讲述环境部署的具体步骤与相关注意事项。
安装/配置Java JDK、Tomcat
因为后面要用到的uDig、GeoServer等是用Java开发的，所以Java JDK是...
（1）Java安装与环境配置参考：java的安装环境配置详细步骤 - 高软玩家 - 博客园
（2）环境配置完成后输入javac显示错误，按照如下方法解决：java环境变量配置不成功，已经解决_m0_38116154的博客-CSDN博客_java环境变量配置不成功
2、点击链接下载GeoServer点击链接下载，我的账号密码都为初始值 admin geoserver，端口号为5432.
   安装完成后，点击 ...
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';
export default fun
				2024Mysql And Redis基础与进阶操作系列（5）作者——LJS[含MySQL DQL基本查询:select；简单、排序、分组、聚合、分组、分页等详解步骤及常见报错问题所对应的解决方法]