matlab 国外镜像 压制组装机 html 后端面试 postgresql fonts Modernizr vue框架 vue前端开发 npm安装vue vue教学视频 网校直播系统 jquery遍历子元素 bootstrap中文api文档 cmd查看mysql版本 chrome发送post请求 android自定义控件 spring源码下载 kubernetes视频教程 kubernetes入门 mysql查询 python对象 python等待10秒 python入门例子 python文件读取 python教程推荐 java时间 java日期 java的substring java开发接口 java安装 java运行 linux命令行 linux远程 linux文档 linuxshell编程 java分布式开发 fireworks8 mac地址修改
当前位置: 首页 > 学习教程  > 编程语言

批量动态加载矢量图层

2020/12/5 10:59:44 文章标签:

批量动态加载矢量图层 下载依赖 npm i axiosnpm install ol因为没有后台接口&#xff0c;所以值是写死的 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthde…

批量动态加载矢量图层

下载依赖

	npm i axios
	npm install ol

因为没有后台接口,所以值是写死的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/ol.css" type="text/css">
    <style>
        /* * {
            margin: 0;
            padding: 0;
        } */
        ol,
        ul {
            list-style: none;
        }
        #map{
            height: 96%;
        }
    </style>
</head>

<body>
    <div style="width:70%;height: 800px;background: rgb(95, 126, 134);position: relative;">
        <div id="map"></div>
        <div id="wrapper">
            <div id="location"></div>
        </div>
    </div>
    <div style="width: 30%;height:800px;position: absolute;top: 0;right: 0;">
        <h2 style="width: 100%;height: 40px;background: rgb(112, 118, 119);text-align: center;line-height: 40px;">识别结果
        </h2>
        <ul id="table" style="overflow-y: auto;height: 730px;">
            <!-- <li style="font-size: 18px;margin: 10px;">导弹阵地</li>
            <li style="font-size: 18px;margin: 10px;">导弹阵地</li>
            <li style="font-size: 18px;margin: 10px;">导弹阵地</li>
            <li style="font-size: 18px;margin: 10px;">导弹阵地</li>
            <li style="font-size: 18px;margin: 10px;">导弹阵地</li> -->
        </ul>
    </div>
</body>
<script src="./js/ol.js" type="text/javascript"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
    var format = 'image/png';
    var bounds;
    // setTimeout(() => {
        let Missile = ["导弹阵地", "导弹阵地", "导弹阵地", "导弹阵地", "导弹阵地", "导弹阵地"];
        let table = document.getElementById("table");
        Missile.forEach((item) => {
            console.log(item)
            let aa = `<li style="font-size: 18px;margin: 10px;" class="dianji">${item}</li>`
            table.innerHTML += aa
        })
        let dianji = document.getElementsByClassName("dianji");

        Array.from(dianji).forEach(item => {
            item.onclick = function () {
                console.log(132);
                //发请求获取对应的bounds
                bounds = [124.53851127749562, 43.26202200177205, 127.08635431984413,
                    45.24985478827901
                ];
                map.getView().fit(bounds, map.getSize());
            }
        })
    // }, 200)

    //经纬度显示
    var mousePositionControl = new ol.control.MousePosition({
        className: 'custom-mouse-position',
        target: document.getElementById('location'),
        // coordinateFormat: ol.coordinate.createStringXY(5),
        undefinedHTML: '&nbsp;'
    })

    //加载谷歌地图图层
    var tiled = new ol.layer.Tile({
        opacity: 1,
        source: new ol.source.XYZ({
            url: "http://mt2.google.cn/vt/lyrs=y&src=app&x={x}&y={y}&z={z}&s=G", //地图路径也可用ol官网上自带的地图图层,如上:
        }),
    });

    var aaa = [tiled];

    //请求获取图层名称
    let ary = ["shp:4444", "shp:1111"];
    //默认显示第一个图层的定位
    bounds = [124.53851127749562, 43.26202200177205, 127.08635431984413,
        45.24985478827901
    ];
    for (var i = 0; i < 2; i++) {
        var shp = 'shp' + i;
        shp = new ol.layer.Image({
            opacity: 1,
            source: new ol.source.ImageWMS({
                ratio: 1,
                url: 'http://192.168.1.159:8080/geoserver/shp/wms', //接口返回的地址
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.1',
                    "LAYERS": ary[i], //图层名称,用户可以根据需求而改变
                    "exceptions": 'application/vnd.ogc.se_inimage',
                }
            })
        });
        aaa.push(shp)
    }

    var projection = new ol.proj.Projection({
        code: 'EPSG:4326',
        units: 'degrees',
        axisOrientation: 'neu',
        global: true
    });

    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([mousePositionControl]),
        target: 'map',
        layers: aaa,
        view: new ol.View({
            projection: projection
        })
    });
    map.getView().fit(bounds, map.getSize());
</script>

</html>

本文链接: http://www.dtmao.cc/news_show_450360.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?