OpenLayers初体验0x1：使用Node创建OpenLayers应用

cellinlab

于 2019-01-26 23:18:52 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript NodeJS WebGIS OpenLayers 在Vue中使用OpenLayers 文章标签： parcel-bundler Node Webgis OpenLayers Parcel

本文链接：https://blog.youkuaiyun.com/funkstill/article/details/86662264

本文介绍了如何利用Node.js环境，通过Parcel bundler快速初始化并创建一个OpenLayers地图应用。从项目设置、编写JS和HTML，到打包成bundle，详细展示了WebGIS应用的开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目初始化

mkdir new-project
cd new-project

npm init

npm install ol
npm install --save-dev parcel-bundler

JS和HTML

//index.js
import 'ol/ol.css';
import {Map ,View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
    target:'map',
    layers:[
        new TileLayer({
            source:new OSM()
        })
    ],
    view:new View({
        center:[0,0],
        zoom:0
    })
});

<!--index.html-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Using Parcel with OpenLayers</title>
        <style>
            #map{