Openlayers之地图标注

最新推荐文章于 2024-08-07 15:03:17 发布

桃李不言_下自成蹊

最新推荐文章于 2024-08-07 15:03:17 发布

阅读量1.1w

点赞数 3

分类专栏： OpenLayers3

本文链接：https://blog.csdn.net/SmileCoffin/article/details/55667493

版权

本文介绍了OpenLayers3中两种地图标注方法：矢量图层样式和Overlay覆盖层。通过这两种方式，可以在地图上突出显示特定信息，提供个性化地图服务。示例代码展示了如何在地图上添加标注。

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

1、标注的简介

标注简单点说就是通过图标、文字等方式将我们想展示的内容显示在地图上，着重突出人们所关注的专题内容，从而为用户提供个性化的地图服务；

2、标注方式

在Openlayers3里面，有两种对地理位置点进行标注的方法，一种是通过创建矢量图层然后设置其样式的方法，还有一种就是创建Overlay覆盖层的方法；对于第一种方式，本质上创建的还是一个矢量对象，只是将其表现形式更换了一下，用Style样式进行包装；而第二种方式则是创建的一个单独的覆盖层，然后通过设置其属性进行某些信息的展示；至于具体使用哪一种方式，还是得根据具体来看；

3、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../lib/jquery/jquery.js"></script>
    <script src="../lib/ol/ol.js"></script>
    <link href="../css/ol.css" rel="stylesheet" />
    <style type="text/css">
        body, html, div, ul, li,img
        {
            border:none;
            padding:0px;
            margin:0px;
        }
        #menu
        {
            width:100%;
            height:20px;
            padding:5px 10px;
            left:10px;
            font-size:14px;
            font-family:"微软雅黑";
        }
        .checkbox
        {
            margin:5px 15px;
        }
        .marker
        {
            width:20px;
            height:20px;
            border:1px solid #088;
            border-radius:10px;
            background-color:#0FF;
            opacity:0.5;
        }
        .address
        {
            text-decoration:none;
            color:#aa3300;
            font-size:14px;
            font-weight:bold;
            text-shadow:black 0.1em 0.1em 0.2em;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //北京地理坐标
            var beijing = ol.proj.fromLonLat([116.28, 39.54]);