<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="lib/OpenLayers/ol.js"></script>

    <script src="olStyle/Light.js"></script>

    <script src="point.js"></script>

    <style>

        html,

        body {

            width: 100%;

            height: 100%;

            margin: 0;

        }

        .map {

            width: 100%;

            height: 100%;

            background: #f6f6f4;

        }

    </style>

</head>

<body>

    <div id="map" class="map" data-id="11"></div>

    <script type="text/javascript">  

        $(function () {

            InitMap();

            AddPolygon();

        })

        var map;

        var layer = new ol.layer.Vector({

            source: new ol.source.Vector(),

            style: new ol.style.Style({

                fill: new ol.style.Fill({

                    color: 'rgba(0, 0, 0, 0.3)'

                }),

                stroke: new ol.style.Stroke({

                    color: 'blue',

                    width: 2

                }),

                image: new ol.style.Circle({

                    radius: 10,

                    fill: new ol.style.Fill({

                        color: '#ffcc33'

                    })

                })

            })

        });

        //地图初始化

        function InitMap() {

            map = new ol.Map({

                layers: [new ol.layer.Vector({

                    source: new ol.source.Vector(),

                    style: function (feature, resolution) {

                        switch (feature.get('layer')) {

                            case 'poi':

                                poiStyle.getText().setText(feature.get('name'));

                                return poiStyle;

                            case 'boundary': return boundaryStyle;

                            case 'lawn': return lawnStyle;

                            case 'road':

                                roadStyle.getText().setText(feature.get('name'));

                                return (resolution < 2) ? roadStyle : null;

                            case 'building':

                                return buildingStyle(feature, resolution);

                            case 'other':

                                otherStyle.getText().setText(feature.get('name'));

                                return otherStyle;

                            default: return null;

                        }

                    }

                }), layer],

                target: 'map',

                view: new ol.View({

                    center: ol.proj.fromLonLat([120.277, 36.330]),

                    minZoom: 1,

                    zoom: 16

                })

            });

        }

        /*显示并编辑区域**********************************************************************************/

        function AddPolygon() {

            var coordinates = [[

                ol.proj.fromLonLat([120.26829957962033, 36.32791869064661]),

                ol.proj.fromLonLat([120.27445793151853, 36.330650012922234]),

                ol.proj.fromLonLat([120.2671408653259, 36.33063272637348]),

                ol.proj.fromLonLat([120.26829957962033, 36.32791869064661])

            ]]

            var plygon = new ol.geom.Polygon(coordinates)

            //多边形要素类

            var feature = new ol.Feature({

                geometry: plygon

            });

            layer.getSource().addFeature(feature);

            //标注，当使用多边形时，自动计算中心坐标？

            //标注，如果使用文字标注，图形将会被文字覆盖

            var featureText = new ol.Feature({

                geometry: plygon,

                name: "标注1"

            });

            featureText.setStyle(new ol.style.Style({

                //文本样式

                text: new ol.style.Text({

                    //对齐方式

                    textAlign: 'center',

                    //文本基线

                    textBaseline: 'middle',

                    //字体样式

                    font: 'normal 14px 微软雅黑',

                    //文本内容

                    text: featureText.get('name')

                })

            }))

            layer.getSource().addFeature(featureText);

            //清除

            //layer.getSource().clear();

            var points = [[

                ol.proj.fromLonLat([120.27681827545163, 36.33236136226455]),

                ol.proj.fromLonLat([120.28038024902342, 36.33141061727086]),

                ol.proj.fromLonLat([120.27681827545163, 36.33001040806349]),

                ol.proj.fromLonLat([120.27681827545163, 36.33236136226455])

            ]]

            var plygon2 = new ol.geom.Polygon(points)

            //多边形要素类

            var feature2 = new ol.Feature({

                geometry: plygon2

            });

            layer.getSource().addFeature(feature2);

            //标注，当使用多边形时，自动计算中心坐标？

            //标注，如果使用文字标注，图形将会被文字覆盖

            var featureText2 = new ol.Feature({

                geometry: plygon2,

                name: "标注2"

            });

            featureText2.setStyle(new ol.style.Style({

                //文本样式

                text: new ol.style.Text({

                    //对齐方式

                    textAlign: 'center',

                    //文本基线

                    textBaseline: 'middle',

                    //字体样式

                    font: 'normal 14px 微软雅黑',

                    //文本内容

                    text: featureText2.get('name')

                })

            }))

            layer.getSource().addFeature(featureText2);

        }

    </script>

</body>

</html>

　　

openlayers图层加标注的更多相关文章

  1. Openlayers Overlay加载gif图片

    说明: 项目中使用vector图层做图片撒点功能,发现加载gif没有效果.网上查找资料发现,openlayers不支持gif图片样式. 后面采用overlay的方式,gif图片赋值给DOM元素 解决方 ...

  2. Android GIS开发系列-- 入门季（15） 网络图层加载

    一.首先我们来看一个网络图层: http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer,这是全 ...

  3. OpenLayers 3加载本地Google切片地图

    OpenLayers  提供了ol.source.XYZ 接口用以加载切片地图. 本地切片地图是用地图切片下载器下载的Google道路图层,由于软件未激活,所以每张切片地图上都有软件作者的联系方式,请 ...

  4. openlayers 3加载GeoServer发布的wfs类型服务

    转:https://blog.csdn.net/u013323965/article/details/52449502 问题产生:      openlayer3加载WFS存在跨域问题,需要用json ...

  5. OpenLayers图层

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  6. 使用openlayers 3 在线加载天地图及GeoServer发布的地图

    使用openlayers3来加载天地图卫星图和标注图层,GeoServer发布地图,一并用openlayers测试加载出来,顺便实现了7种地图控件.下面直接贴代码: <!DOCTYPE html ...

  7. （转）Openlayers 2.X加载天地图

    http://blog.csdn.net/gisshixisheng/article/details/44621923 概述: 在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何 ...

  8. 通过openlayers加载dwg格式的CAD图并与互联网地图叠加

    Openlayers介绍 ​ Openlayers是一个基于Javacript开发,免费.开源的前端地图开发库,使用它,可以很容易的开发出WebGIS系统.目前Openlayers支持地图瓦片.矢量数 ...

  9. MeteoInfoLab脚本示例：加载地图图层

    应用最广泛的的地图数据应该是shape格式,网络上有很多免费下载资源.MeteoInfoLab中读取shape文件的函数是shaperead,参数即文件名,返回数据包含图形和属性信息的图层对象.矢量图 ...

随机推荐

  1. Dubbo 服务 IP 注册错误踩坑经历

    个人博客地址 studyidea.cn,点击查看更多原创文章 踩坑 公司最近新建一个机房,需要将现有系统同步部署到新机房,部署完成之后,两地机房同时对提供服务.系统架构如下图: 这个系统当前对外采用 ...

  2. bootstrap 按钮组件

    按钮组件主要的类名: .btn-toolbar     把几个  .btn-group 组合在一起,更复杂的组件 .btn-group .btn-group-vertical   垂直堆叠显示    ...

  3. 《古剑奇谭3》千秋戏辅助工具（前端React制作）

    前言 一直身在武汉,基于众所周知的疫情原因,这个春节只能宅着. 不过其实这个春节是这些年来过得最爽的一个了. 没有鞭炮,不用四处跑,安安心心呆在家里玩玩游戏看看书写写代码,其实日子过得还是挺悠闲的. ...

  4. Spring Cloud第十四篇 | Api网关Zuul

    ​ 本文是Spring Cloud专栏的第十四篇文章,了解前十三篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring C ...

  5. js发展历史与基础

    最早的浏览器是WWW浏览器 Mosaic浏览器是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器,于1993年问世 浏览器组成部分: 1)shell部分(外壳) 2)内核部分 ① 渲染引擎(语法 ...

  6. 题解P1104生日

    \(\color{blue}{P1104 生日(题目传送门)}\) 这道题的大意是:给出n个人的出生日期,让我们按年龄(就是先比年份,再比月份和日期,这是常识好吧)大小来排序,如果相同则按输入顺序排序 ...

  7. 珠峰-6-koa-express

    ####  这里写await和return 的区别是, await后边还可以写代码,而return 不会. ##### koa这里需要注意 这样子方法1比起方法2,少写n个url类似这样的key.

  8. JavaScript 箭头函数（Lambda表达式）

    Lambda表达式(箭头函数)用于表示一个函数,所以它和函数一样,也拥有参数.返回值.函数体,但它没有函数名,所以Lambda表达式相当于一个匿名函数. 使用方法: ()=>{} 小括号里放参数 ...

  9. 论文翻译：2015_DNN-Based Speech Bandwidth Expansion and Its Application to Adding High-Frequency Missing Features for Automatic Speech Recognition of Narrowband Speech

    论文地址:基于DNN的语音带宽扩展及其在窄带语音自动识别中加入高频缺失特征的应用 论文代码:github 博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never ...

  10. JVM类加载器是否可以加载自定义的String

    前言 曾经有一次,面试官问到类加载机制,相信大多数小伙伴都可以答上来双亲委派机制,也都知道JVM出于安全性的考虑,全限定类名相同的String是不能被加载的.但是如果加载了,会出现什么样的结果呢?异常 ...