开源WebGIS开发2——开发环境（IntelliJ IDEA）

最新推荐文章于 2024-05-03 22:37:42 发布

YUANXLLL

最新推荐文章于 2024-05-03 22:37:42 发布

阅读量404

点赞数 1

文章标签： idea html

本文链接：https://blog.csdn.net/yl14774636230/article/details/120507242

版权

1、下载网址：Other Versions - IntelliJ IDEA

选择对应版本下载，推荐.exe下载

2、安装过程和配置参考博客：IntelliJ IDEA 下载安装配置教程（完整版）_爱思考的小伙-CSDN博客_idea安装教程

3、初步使用IDEA来验证环境是否配置成功

（1）新建web工程

（2）新建文件夹lib后将该文件（openlayers开发包）复制进去，然后新建html文件“map.html”，将下面的代码拷贝进去，用浏览器打开，出现下方所示地图，则证明环境配置成功。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map demo</title>\
    <link rel="stylesheet" href="http://localhost:8086/geoserver/openlayers3/ol.css" type="text/css">
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script src="lib/ol4.8.1/ol.js"></script>
<script>
    var untiled = new ol.layer.Image({
        source: new ol.source.ImageWMS({
            ratio: 1,
            url: 'http://localhost:8086/geoserver/sf/wms',
            params: {'FORMAT': "image/png",
                'VERSION': '1.1.1',
                "LAYERS": 'sf:roads',
                "exceptions": 'application/vnd.ogc.se_inimage',
            }
        })
    });
    var projection = new ol.proj.Projection({
        code: 'EPSG:26713',
        units: 'm',
        global: false
    });
    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: 'map',
        layers: [
            untiled
        ],
        view: new ol.View({
            projection: projection,
        })
    });
var bounds = [589434.8564686741, 4914006.337837095,
        609527.2102150217, 4928063.398014731]
    map.getView().fit(bounds, map.getSize());
</script>
</body>
</html>

YUANXLLL

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
开源WebGIS开发2——开发环境（IntelliJ IDEA）

1、下载网址：Other Versions - IntelliJ IDEA选择对应版本下载，推荐.exe下载2、安装过程和配置参考博客：IntelliJ IDEA 下载安装配置教程（完整版）_爱思考的小伙-CSDN博客_idea安装教程3、初步使用IDEA来验证环境是否配置成功（1）新建web工程（2）新建文件夹lib后将该文件（openlayers开发包）复制进去，然后新建html文件“map.html”，将下面的代码拷贝进去，用浏览器打开，出现下方所示地图，则证明环境配置..
复制链接

扫一扫