用户投稿在学习openlayers时首先要理解openlayers中的结构，想当初我自己也是模模糊糊地就撞了进去，搞了老半天也看不懂到底在干嘛，最后才发现原来openlayers架构是如此的清晰……，如果当初有人愿意这样简单的告诉我，我想我在学习会更轻省
创建HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="map"></div> <script type="module" src="./main.js"></script> </body></html>css
创建style.css档案，在index.html中引入
其中将地图预设的margin和padding设定为0，如此一来当#map设定宽高的时候就不会显示出xy轴
html,body{ margin: 0; padding: 0;}#map{ width: 100vw; height: 100vh;}js
下图可以看到openlayers中几个重要的元件，你可以从openlayers API中看到https://openlayers.org/en/latest/apidoc/
我不知道大家看到的感觉，反正我只记得我当初看到的时候等于没看，于是我现在做了一张图帮助大家可以快速理解架构，当我们后续建立地图的元素时，这张架构图就很重要了，可以帮助你快速进入openlayers的世界
还有其他的元件我们没有介绍到，但后续会慢慢的将菜色端上来喔，现在大家可以开始试着将HTML、CSS、JS放到自己的程式中啰，看看是有没有显示出地图！
var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', view: new ol.View({ projection: "EPSG:3857", center: ol.proj.fromLonLat([120.846642, 23.488793]), zoom: 7.5, maxZoom: 20, minZoom: 5, enableRotation: false, }), controls: []});如果你成功了，应该会看到以下的成果
参考连结
https://github.com/weijung0923/learning-openlayers-micromastery/tree/day01
微信扫一扫打赏
支付宝扫一扫打赏
