webGIS实践（geoserver+openlayer+django）3_1_openlayer展绘点线面注记

最新推荐文章于 2024-02-01 16:55:31 发布

才华横溢吴道简

最新推荐文章于 2024-02-01 16:55:31 发布

阅读量430

点赞数

分类专栏： WEBGIS

本文链接：https://blog.csdn.net/sinat_41310868/article/details/106167589

版权

WEBGIS 专栏收录该内容

93 篇文章 68 订阅

订阅专栏

上一篇已经讲了，怎么加载瓦片地图。

这篇就看看怎么简单的渲染矢量点线面数据。

最简单的，绘制点线面注记。

效果长这样：

新建一个文件FeatureOL.HTML。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>openlayer渲染矢量要素</title>
    <link rel="stylesheet" href="ol/ol.css">
    <script src="ol/ol.js"></script>
    <script src="jquery-1.7.2.js"></script>
    <style type="text/css">
        #map,
        html,
        body {
            height: 100%;
            width: 100%;
        }
        .content {
            width: 100px;
        }

    </style>
</head>

<body>
<div id="map"></div>
</body>
<script type="text/javascript">
    //页面
    var view = new ol.View({
        // 设置中心点坐标，因为加载的腾讯瓦片地图的坐标系是墨卡托投影坐标系（'EPSG:3857'），所以要对经纬度坐标点进行投影，ol.proj.transform既是openlayer自带的坐标系转换函数，支持WGS84和墨卡托投影的互换。
        center: ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'),
        // 比例尺级数为9
        zoom: 9
    });

    var layers = [
        // 加载腾讯瓦片底图
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: "http://rt{0-3}.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0"
            })
        })       
    ];
    //地图
    var map = new ol.Map({

        target: 'map',//指向div
        layers: layers,
        view: view
    });
    //设置风格，点线面注记
    var style=new ol.style.Style({
        image: new ol.style.Circle({
            fill: new ol.style.Fill({
                color: 'rgba(192, 192, 192, 0.5)'
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(192, 0, 0, 1)',
                width: 2
            }),
            radius: 10,
        }),
        stroke: new ol.style.Stroke({
            color: 'rgba(192, 0, 0, 1)',
            width: 2
        }),
        fill: new ol.style.Fill({
            color: 'rgba(192, 192, 192, 0.5)'
        }),
        text: new ol.style.Text({
            font: '20px Microsoft YaHei',
            text:  '测试注记',
            offsetX: 20,
            offsetY: 20,
            fill: new ol.style.Fill({
                color: 'rgba(192, 0, 0, 1)'
            }),
            stroke: new ol.style.Stroke({color: 'rgba(255, 255, 255, 1)', width: 1}),
        })
    })
    // 新建点
    var point = new ol.Feature(new ol.geom.Point(ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857')));
    // 新建线
    var line = new ol.Feature(new ol.geom.LineString([ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([117.400146,41.250184], 'EPSG:4326', 'EPSG:3857')]));
    // 新建面
    var polygon = new ol.Feature(new ol.geom.Polygon([[ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([116.400146,41.250184], 'EPSG:4326', 'EPSG:3857'),ol.proj.transform([117.400146,41.250184], 'EPSG:4326', 'EPSG:3857'),ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857')]]));
    // 创建矢量资源
    var source=new ol.source.Vector({
        features: [point,line,polygon]
    });
    // 创建矢量图层
    var layer=new ol.layer.Vector({
        source:source,
        style:style
    });
    // 将图层添加至地图
    map.addLayer(layer);

</script>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }

    #map {
        width: 100%;
        height: 100%;
    }
</style>
</html>

一般来说，地图要素的注记与几何属性是不分离的，所以注记需要提取要素中的属性字段。

本文只是简单示例渲染矢量要素，注记的动态展示，会在后面渲染查询geojson要素的时候介绍。