Openlayers加载点线面

最新推荐文章于 2024-05-31 23:01:38 发布

xyz_002

最新推荐文章于 2024-05-31 23:01:38 发布

阅读量1.2k

点赞数

文章标签：坐标要素图层

本文链接：https://blog.csdn.net/u012534727/article/details/103384769

版权

这个示例展示了如何使用OpenLayers库加载地图，并添加点、线和面的交互功能。用户可以通过点击按钮来绘制不同类型的地理要素，包括点、线和面。地图使用了天地图的数据源。

摘要由CSDN通过智能技术生成

<!doctype html>
<html lang="en">
<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="../libweb/openlayer-dist/ol.css" type="text/css">
    <style>
        .map {height: 600px;width: 100%;}
    </style>
    <script src="../libweb/openlayer-dist/ol.js"></script>
    <title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<div id="map_box">
    <button type="button" οnclick="clear()">清除</button>
    <button type="button" οnclick="interaction('Point')">点</button>
    <button type="button" οnclick="interaction('LineString')">线</button>
    <button type="button" οnclick="interaction('Polygon')">面</button>
</div>
<script type="text/javascript">

    // 地图
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://t7.tianditu.gov.cn/DataServer?T=vec_c&tk=b976a2cd81f5fab373ced07d17b9aa81&x={x}&y={y}&l={z}'
                    // url: 'https://t0.tianditu.gov.cn/DataServer?tk=979370626f38396281484293eb175e2e&T=img_c&x={x}&y={y}&l={z}'
                })
            }),
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://t7.tianditu.gov.cn/DataServer?T=cva_c&tk=b976a2cd81f5fab373ced07d17b9aa81&x={x}&y={y}&l={z}'
                    // url: 'https://t5.tianditu.gov.cn/DataServer?tk=979370626f38396281484293eb175e2e&T=ibo_c&x={x}&y={y}&l={z}'
                })
            }),
            // new ol.layer.Tile({
            //     source: new ol.source.XYZ({
            //         // url: 'http://t7.tianditu.gov.cn/DataServer?T=cva_c&tk=b976a2cd81f5fab373ced07d17b9aa81&x={x}&y={y}&l={z}'
            //         url: 'https://t2.tianditu.gov.cn/DataServer?tk=979370626f38396281484293eb175e2e&T=cia_c&x={x}&y={y}&l={z}'
            //     })
            // }),
            // vectorLayer_Point,

最低0.47元/天解锁文章

xyz_002

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Openlayers加载点线面

<!doctype html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link rel="stylesheet" href="../libweb/openlayer-dist/ol...
复制链接

扫一扫