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

作者：weixin_40725706 | 2024-05-02 00:40:49

踩

openlayers标注点

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

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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

示例代码

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/521336