webpack玩转arcgis

最新推荐文章于 2023-02-24 11:42:10 发布

Doniet

最新推荐文章于 2023-02-24 11:42:10 发布

阅读量407

点赞数

分类专栏： web前端文章标签： arcgis webpack es6

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

版权

web前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

webpack玩转arcgis

前言

最近公司开发一个项目,用到arcgis.之前接触过openlayers和cesium,觉着arcgis应该也很简单.于是就到官网逛了一圈,结果傻眼了. 官网的教程基本都是直接引入js或者基于AMD引用(早些版本依赖dojo,dojo这玩意不支持ES模块的语法),而基于ES模块的就只是简单的介绍,完全不具备用于项目的实例.研究了很久,才做了这个简单demo.

项目要求

arcgis版本4.17及以上
webpack版本4.0以上

package.json

{
    "name": "map",
    "version": "1.0.0",
    "description": "an arcgis map",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --color --env development --mode development"
    },
    "keywords": [
        "arcgis"
    ],
    "author": "niyang",
    "license": "MIT",
    "dependencies": {
        "@arcgis/core": "^4.20.2",
        "copy-webpack-plugin": "^9.0.1",
        "core-js": "^3.16.2"
    },
    "devDependencies": {
        "@babel/core": "^7.15.0",
        "@babel/preset-env": "^7.15.0",
        "babel-loader": "^8.2.2",
        "css-loader": "^6.2.0",
        "html-webpack-plugin": "^5.3.2",
        "postcss-loader": "^6.1.1",
        "sass": "^1.38.0",
        "sass-loader": "^12.1.0",
        "style-loader": "^3.2.1",
        "webpack": "^5.51.1",
        "webpack-chain": "^6.5.1",
        "webpack-cli": "^4.8.0",
        "webpack-dev-server": "^4.0.0"
    }
}

webpack配置

//webpack.config.js
const Config = require("webpack-chain");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require('webpack');
const path = require('path');
module.exports = (env, args) => {
    const resolve = dir => path.resolve(__dirname, dir)
    let Cfg = new Config();
    Cfg.mode(args.mode).stats({
            errorDetails: true
        })
        .entry('main')
        .add(resolve("src/main.js"))
        .end()
        .output.path(resolve('dist'))
        .filename('[name].[contenthash].chunk.js')
        .end()
        .module.rule('compile')
        .test(/\.js$/)
        .include
        .add(resolve("src"))
        .end()
        .use('babel')
        .loader('babel-loader')
        .end()
        .end()
        .rule('css')
        .test(/\.css$/)
        .use('style')
        .loader('style-loader')
        .end()
        .use('css')
        .loader('css-loader')
        .end()
        .use('postcss')
        .loader('postcss-loader')
        .end()
        .end()
        .rule('sass')
        .test(/\.scss$/)
        .use('style')
        .loader('style-loader')
        .end()
        .use('css')
        .loader('css-loader')
        .end()
        .use('postcss')
        .loader('postcss-loader')
        .end()
        .use('scss')
        .loader('sass-loader')
        .end()
        .end()
        .end()
        .resolve.alias
        .set('@', 'src').end()
        .extensions.add('.js').add('.json')
        .end()
        .end()
        .plugin('html')
        .use(HtmlWebpackPlugin, [{
            title: 'Map Demo',
            template: resolve('public/index.html')
        }])
        .end()
        .plugin("copy")
        .use(CopyPlugin, [{
            patterns: [{
                from: "node_modules/@arcgis/core/assets",
                to: "assets"
            }]
        }])
        .end();
    return Cfg.toConfig()
}

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 Demo</title>
</head>

<body>
    <div class="map" id="map"></div>
</body>

</html>

main.js文件

import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';
import WebTileLayer from "@arcgis/core/layers/WebTileLayer";
import "@arcgis/core/geometry/projection"
import "./sass/index.scss"

import esriConfig from "@arcgis/core/config.js";
esriConfig.assetsPath = "./assets";

const map = new Map({
    basemap: "topo-vector"
})

const view = new MapView({
    container: 'map',
    map: map
})


const layers = [
    new WebTileLayer({
        title: "天地图A",
        urlTemplate: "http://{subDomain}.tianditu.com/DataServer?T=img_w&x={col}&y={row}&l={level}&tk=123333",
        subDomains: ["a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7"]
    }),
    new WebTileLayer({
        title: "天地图B",
        urlTemplate: "http://{subDomain}.tianditu.com/DataServer?T=cia_w&x={col}&y={row}&l={level}&tk=123333",
        subDomains: ["a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7"]
    })
];
view.map.addMany(layers);

样式

@import "@arcgis/core/assets/esri/themes/dark/main.css";
html,
body,
.map {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

效果

在这里插入图片描述

Doniet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webpack玩转arcgis

webpack玩转arcgis前言最近公司开发一个项目,用到arcgis.之前接触过openlayers和cesium,觉着arcgs应该也很简单.于是就到官网逛了一圈,结果傻眼了. 官网的教程基本都是直接引入js或者基于AMD引用(早些版本依赖dojo,dojo这玩意不支持ES模块的语法),而基于ES模块的就只是简单的介绍,完全不具备用于项目的实例.研究了很久,才做了这个简单demo.项目要求arcgis版本4.17及以上webpack版本4.0以上package.json{
复制链接

扫一扫