OpenLayers6 VScode 搭建 webgis 平台

MajorTom99

已于 2022-04-20 12:22:34 修改

阅读量1.3k

点赞数 1

分类专栏： webgis 文章标签：前端

于 2022-04-20 12:09:00 首次发布

本文链接：https://blog.csdn.net/jujue111/article/details/124293191

版权

webgis 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

OpenLayers6 VScode 搭建

API+APP download
- VScode 设置(环境配置，插件安装)
- 创建MAP

API+APP download

官网下载最新版本的OpenLayers6 和 VScode
vscode
OpenLayers6

VScode 设置(环境配置，插件安装)

live server 插件安装（to run HTML file）html 使用ajax时需要使用服务器，也可以选择geoserver
新建工作文件夹 and 打开
基础组件 html 、 JavaScript、css (文件/文件夹创建)
新建libs文件夹，加载openlayers api

创建MAP

html文件中加载OpenLayers组件

<html lang ="en">
<head>
    <meta charset = "UTF_8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>OpenLayers Web Map</title>
    <link rel="stylesheet" href="./libs/v6.9.0-dist/ol.css">
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id ='popup-container'>
    <P id ='popup-coordinates'></p>
</div>
<div id ='js-map' class = 'map'></div>

<script src='./main.js'></script>
<script src='./libs/v6.9.0-dist/ol.js'></script> 

</body>
</html>

创建Map，作为容器
view for display
layers for map image
target container for attach map
js文件创建map并初始化

window.onload = init;
function init(){
    const map = new ol.Map({

        view: new ol.View({
            center:[1786078.4757681806,3134109.9038758557],
            zoom: 3,
            minZoom:2,
            maxZoom:8,
            rotation:0.5
        }),
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target:'js-map',
        KeyboardEventTarget: document
    })


    map.on('click',function(e){
        console.log(e);
    })

    const popupContainerElement = document.getElementById('popup-coordinates');
    const popup = new ol.Overlay({
        element: popupContainerElement,
        positioning:'center-left'
    })
    map.addOverlay(popup);

    // define clickListener
    map.on('click',function(e){
        //console.log(e);
        const clickedCoordinate = e.coordinate;
        popup.setPosition(undefined);
        popup.setPosition(clickedCoordinate);
        popupContainerElement.innerHTML = clickedCoordinate;

    })
    // 按住旋转 alt Only
    const dragRotateInteraction = new ol.interaction.DragRotate({
        condition: ol.events.condition.altKeyOnly
    })
    map.addInteraction(dragRotateInteraction);
}

css 文件设置

* {
    box-sizing: border-box
}
body{
    margin: 0;
    padding: auto;
}

.map{
    height: 100vh;
    width: 100vw;
}

MajorTom99

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
OpenLayers6 VScode 搭建 webgis 平台

OpenLayers6 VScode 搭建API+APP downloadVScode 设置(环境配置，插件安装)创建MAPAPI+APP download官网下载最新版本的OpenLayers6 和 VScodevscodeOpenLayers6VScode 设置(环境配置，插件安装)live server 插件安装（to run HTML file）新建工作文件夹 and 打开基础组件 html 、 JavaScript、css (文件/文件夹创建)新建libs文件夹，加载open
复制链接

扫一扫