openlayers-09-添加标注（文字+图片）

阿发博客

已于 2023-05-22 23:16:59 修改

阅读量4.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： OpenLayers入门与实践文章标签： webgis openlayers

于 2023-05-16 00:00:33 首次发布

本文链接：https://blog.csdn.net/chuanren1991/article/details/130695267

OpenLayers入门与实践专栏收录该内容

19 篇文章

订阅专栏

文章介绍了如何在天地图上添加标注，主要步骤包括实例化Map对象，创建矢量图层和图层源，以及实例化和添加矢量标注对象。示例代码展示了如何创建和配置图层、标注样式以及图层的添加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在地图上添加标注，大概分为三步

1.实例化map对象。
2.创建用于放置标注的矢量图层以及图层源。
3.实例化矢量标注对象并添加到矢量图层源。

以上顺序也可以进行调整，可以先实例化标注对象，在实例化矢量图层时直接将标注对象放在矢量图层源的features属性中，而不是调用addFeature()方法，后期进行添加。同理，在实例化map对象时，直接将矢量图层添加到map对象的layers属性中，而不是在后面调用map的addLayer()方法添加图层。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载天地图</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 地图容器 -->
    <div id="mapCon"></div>

    <script type="text/javascript">
        var key = "4689fc6b9bc0fdc8c48298f751ebfb41";//天地图密钥
        var center = [116.3913,39.9071];//北京经纬度
        //ol.layer.Tile：是一个瓦片图层类，用于显示瓦片资源。
        //source是必填项，用于为图层设置来源。

        //ol.source.XYZ: 
        //创建天地图矢量图层
        var TiandiMap_vec = new ol.layer.Tile({
            title: "天地图矢量图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,
                wrapX: false
            })
        });
        //创建天地图矢量注记图层
        var TiandiMap_cva = new ol.layer.Tile({
            title: "天地图矢量注记图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key,
            })
        });
        //1. 实例化Map对象加载地图
        var map = new ol.Map({
            //地图容器div的ID
            target: 'mapCon',
            //地图容器中加载的图层
            layers: [TiandiMap_vec, TiandiMap_cva],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点（经纬度）
                center: center,
                //地图初始显示级别
                zoom: 8,
                projection: "EPSG:4326"
            })
        });
        //2.创建用于放置标注的矢量图层以及图层源
        //矢量标注的数据源
        var vectorSource = new ol.source.Vector();
        //矢量标注图层
        var vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            zIndex:1000,
        });
        map.addLayer(vectorLayer);

        //3.实例化矢量标注对象并添加到矢量图层源
        var markerFeature = new ol.Feature({
            geometry: new ol.geom.Point(center),
            name:'北京',
        });
        markerFeature.setStyle(createMarkerStyle(markerFeature));
        //将新要素添加到数据源中
        vectorSource.addFeature(markerFeature);
        //创建矢量标注样式
        function createMarkerStyle(feature) {
            return new ol.style.Style({
                /**{olx.style.IconOptions}类型*/
                image: new ol.style.Icon(
                    ({
                        // anchor: [0.5, 0.5],//图标的锚点,经纬度点所对应的图标的位置，默认是[0.5, 0.5]，即为标注图标的中心点位置
                        anchorOrigin: 'top-right',//锚点的偏移位置，默认是top-left，
                        anchorXUnits: 'fraction',//锚点X的单位，默认为百分比，也可以使用px
                        anchorYUnits: 'pixels',//锚点Y的单位，默认为百分比，也可以使用px
                        offsetOrigin: 'top-right',//原点偏移bottom-left, bottom-right, top-left, top-right,默认 top-left
                        // offset:[0,10],
                        //图标缩放比例
                        // scale:0.5,//可以设置该比例实现，图标跟随地图层级缩放
                        //透明度
                        opacity: 0.75,//如果想隐藏某个图标，可以单独设置该值，透明度为0时，即可隐藏，此为隐藏元素的方法之一。
                        //图标的url
                        src: 'static/img/hq.png'
                    })
                ),
                text: new ol.style.Text({
                    //位置
                    textAlign: 'center',
                    //基准线
                    textBaseline: 'middle',
                    //文字样式
                    font: '20px 宋体',
                    //文本内容
                    text: feature.get('name'),//通过设置的fature的name属性获取，也可以通过参数获取设置，此处接收 字符串 对象
                    //文本填充样式（即文字颜色），红色
                    fill: new ol.style.Fill({ color: '#ff002f' }),
                    //描边颜色，蓝色
                    stroke: new ol.style.Stroke({ color: '#0022ff', width: 1 })
                })
            });
        }
    </script>
</body>
</html>

示例代码