前端地图学习
前言
过完年,迎来一波离职潮。我自己也面试了几家公司,结果都不是很理想,待在公司也不想做事,想要学习点什么,于是就玩了一下地图。
正文
使用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"
运行后效果: