Openlayers和Cesium本地webpack搭建

最新推荐文章于 2024-03-05 20:47:54 发布

Doniet

最新推荐文章于 2024-03-05 20:47:54 发布

阅读量615

点赞数

分类专栏： web前端文章标签： openlayers.js cesium.js webpack node

本文链接：https://blog.csdn.net/doniet/article/details/114709713

版权

web前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

前端地图学习

前言

过完年，迎来一波离职潮。我自己也面试了几家公司，结果都不是很理想，待在公司也不想做事，想要学习点什么，于是就玩了一下地图。

正文

使用npm安装，

"devDependencies": {
    "copy-webpack-plugin": "^6.4.1",
    "css-loader": "^5.1.2",
    "html-webpack-plugin": "^4.5.2",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.46.0",
    "webpack-chain": "^6.5.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "cesium": "^1.79.1",
    "ol": "^6.5.0"
  }

注意：请使用webpack4,不要升级到webpack5,因为webpack5中node的配置项只保留global,__filename,__dirname。

webpack配置

const path = require("path")
const webpack = require("webpack")
const Config = require("webpack-chain")
const CopyPlugin = require("copy-webpack-plugin")
const HtmlPlugin = require("html-webpack-plugin")

module.exports = (env, args) => {
    const join = (dir) => path.join(__dirname, dir)
    const cfg = new Config()

    cfg.mode(args.mode)
        .context(__dirname)
        .devtool("eval")
        .node.set('fs', 'empty')
        .set('Buffer', false)
        .set('http', 'empty')
        .set('https', 'empty')
        .set('zlib', 'empty')
        .end()
        .entry('app').add(join('src/main'))
        .end()
        .output.filename('[name].[contenthash:16].js')
        .path(join('dist'))
        .end()
        .resolve.extensions
        .add('.js')
        .end()
        .end()
        .devServer
        .contentBase(join('dist'))
        .end()
        .plugin('html')
        .use(HtmlPlugin, [{
            inject: true,
            template: join('public/index.html')
        }])
        .end()
        .plugin('copy')
        .use(CopyPlugin, [{
            patterns: [
                { from: 'node_modules/cesium/Build/Cesium/Workers', to: 'Workers' },
                { from: 'node_modules/cesium/Build/Cesium/ThirdParty', to: 'ThirdParty' },
                { from: 'node_modules/cesium/Build/Cesium/Assets', to: 'Assets' },
                { from: 'node_modules/cesium/Build/Cesium/Widgets', to: 'Widgets' }
            ]
        }])
        .end()
        .plugin('define')
        .use(webpack.DefinePlugin, [{
            CESIUM_BASE_URL: JSON.stringify('')
        }])
        .end()
        .module.rule('style')
        .test(RegExp(/\.css$/))
        .use('style')
        .loader('style-loader')
        .end()
        .use('css')
        .loader('css-loader')
        .end()
        .end()
        .rule('soure')
        .test(RegExp(/\.(png|gif|jpg|jpeg|svg|xml|json)$/))
        .use('url')
        .loader('url-loader')
        .end()
    return cfg.toConfig()
}

在package.json中配置脚本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development"
  },

demo目录

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MAP</title>
</head>
<body>
    <div class="map" id="map"></div>
</body>
</html>

css样式:

html,
body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.78);
}

.map {
  height: 100vh;
  width: 100vw;
}

main.js:

import "./style/index.css"

import { createMap } from "./libs/ol"

createMap()

openlayers的demo:

import "ol/ol.css"
import Map from "ol/Map"
import OSM from "ol/source/OSM"
import TileLayer from "ol/layer/Tile"
import View from "ol/View"

export function createMap() {
  new Map({
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    target: "map",
    view: new View({
      center: [0, 0],
      zoom: 2,
    }),
  })
}

运行后效果：

cesium的demo:

import {
  Cesium3DTileset,
  createWorldTerrain,
  IonResource,
  Viewer,
} from "cesium"
import "cesium/Build/Cesium/Widgets/widgets.css"

export function createMap() {
  const viewer = new Viewer("map", {
    terrainProvider: createWorldTerrain(),
  })

  const tileset = new Cesium3DTileset({
    url: IonResource.fromAssetId(40866),
  })

  viewer.scene.primitives.add(tileset)
  viewer.zoomTo(tileset)
}

修改main.js

import { createMap } from "./libs/cesium"

运行后效果：
cesium

Doniet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Openlayers和Cesium本地webpack搭建

前端地图学习前言过完年，迎来一波离职潮。我自己也面试了几家公司，结果都不是很理想，待在公司也不想做事，想要学习点什么，于是就玩了一下地图。正文使用npm安装，"devDependencies": { "copy-webpack-plugin": "^6.4.1", "css-loader": "^5.1.2", "html-webpack-plugin": "^4.5.2", "style-loader": "^2.0.0", "url-loader": "
复制链接

扫一扫