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

原创

于 2019-01-26 23:18:52 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#parcel-bundler #Node #Webgis #OpenLayers #Parcel

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

项目初始化

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{

最低0.47元/天解锁文章