<!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>

    <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;

        //地图初始化

        function InitMap() {

            //初始化地图

            layer = new ol.layer.Vector({

                source: new ol.source.Vector(),

                    overlaps: false,

                    wrapX: false

                }),

                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;

                    }

                }

            });

            map = new ol.Map({

                layers: [layer],

                target: 'map',

                view: new ol.View({

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

                    minZoom: 1,

                    zoom: 16

                })

            });

        }

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

        function createLabelStyle(feature) {

            //返回一个样式

            return new ol.style.Style({

                //把点的样式换成ICON图标

                fill: new ol.style.Fill({

                    //填充颜色

                    color: 'rgba(37,241,239,0.2)'

                }),

                //图形样式，主要适用于点样式

                image: new ol.style.Circle({

                    //半径大小

                    radius: 7,

                    //填充

                    fill: new ol.style.Fill({

                        //填充颜色

                        color: '#e81818'

                    })

                }),

                //层

                zIndex: 20

            });

        };

        function AddPolygon() {

            var coordinate = ol.proj.fromLonLat([120.277, 36.330]);

            var newFeature = new ol.Feature({

                geometry: new ol.geom.Point(coordinate)

            });

            //设置点的样式

            newFeature.setStyle(createLabelStyle(newFeature));

            //清楚坐标点

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

            //将当前要素添加到矢量数据源中

            layer.getSource().addFeature(newFeature);

        }

    </script>

</body>

</html>

　　

openlayers地图显示点的更多相关文章

  1. OpenLayers 3 中Layers的相关知识

    昨天自己一遍又一遍的把API里Accessible map那个例子写下来,终于好像有熟悉一点点.找到一篇博文详细讲Layers的.整理一下贴出来(本来想在网上做笔记可以重新排版,比写在本子上要容易有结 ...

  2. OpenLayers中的Layer概念和实践--Openlayers调用WMS服务

    整理转自:http://hi.baidu.com/lixuweiok/item/c406a4e6a6d390e7fa42ba4b 本章我认为是这本书的真正开端,终于开始讲一些有意思的东西了.. 在这一 ...

  3. WebGIS前端瓦片地图显示原理及实现

    目前,有很多WebGIS开发包,ArcGIS API for JS.OpenLayers.LeafLetjs等为我们从事WebGIS开发的人封装了很多强大的功能.我们很方便的使用这些库的时候,也让我们 ...

  4. openlayers调用瓦片地图分析

    网上有诸多资料介绍openlayers如何调用百度地图或者是天地图等常见互联网地图,本文作者使用的是不是常见的互联网瓦片,现将调用过程进行整理与大家分享. 首先,openlayers就不赘述了(官网: ...

  5. OpenLayers学习笔记（九）— 限制地图显示范围

    openlayers 3 地图上限制地图显示及拖动范围,坐标系是4326转3857,中心经纬度精确到小数点后六位,减少误差 GitHub:八至 作者:狐狸家的鱼 本文链接:ol3-限制地图显示及拖动范 ...

  6. OpenLayers 3 入门教程

    OpenLayers 3 入门教程摘要OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计.版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它 ...

  7. 使用OpenLayers 勾画地图

    <!DOCTYPE html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta charset= ...

  8. openlayers基础用例

    http://weilin.me/ol3-primer/ch03/03-01.html#http://weilin.me/ol3-primer/ //地址http://openlayers.org/ ...

  9. 【01】openLayers 第一个地图

    效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

随机推荐

  1. jquery deferred 转载

    阮一峰的网络日志 » 首页 » 档案 JavaScript http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquer ...

  2. 1.3创建你的第一个Android项目——Android第一行代码（第二版）笔记

    创建HelloWorld项目 如果是第一次,会经过漫长的等待. 启动模拟器 可以用第三方模拟器,也可以用官方集成的 点击后出现如下界面,可创建多个模拟器,如图,我已经创建好了一个,如果你没有,就点击下 ...

  3. idea快速创建一个类 实现一个接口

    一 创建一个接口类 二  点击接口名称 按alt + ent 三 选择implement interface 选项 完美!!!!!!!

  4. Iptables netstat 防御简单dos攻击

    DoS攻击或者DDoS攻击是试图让机器或者网络资源不可用的攻击.这种攻击的攻击目标网站或者服务通常是托管在高防服务器比如银行,信用卡支付网管,甚至根域名服务器,DOS攻击的实施通常迫使目标重启计算机或 ...

  5. Apache 安装 静态编译 动态编译

    2014-09-19 09:53 (分类:Linux) 排名第一的web服务器. (linux环境:CentOS release 6.5 (Final)) 安装出错:如下 configure: err ...

  6. centos6.5和centos7.5统一字符集为zh_CN.UTF-8解决系统和MySQL数据库乱码问题

    linux的服务器需要做的操作 centos6.5下: 修改默认字符集为 zh_CN.UTF-8,如果没有中文语言包可能需要安装中文语言包支持 [root@meinv01 ~]# yum groupi ...

  7. OpenCV4系列之图像梯度和边缘检测

    在图像处理中,求解图像梯度是常用操作. Sobel算子 Calculates the first, second, third, or mixed image derivatives using an ...

  8. 带输入提示的搜索框ajax请求

    先放图 首先要引用的文件有: base.css  https://www.cnblogs.com/chenyingying0/p/12363689.html jquery.js transition. ...

  9. 在qt5中使用qtmqtt库

    qtmqtt库源码下载链接 链接:https://pan.baidu.com/s/1TyqbLX5x17mwhAX-OJiorw 提取码:i6ww perl安装下载链接 链接:https://pan. ...

  10. Lucene之分析器

    什么是分析器? 分析(Analysis)在Lucene中指的是将域(Field)文本转换为最基本的索引表示单元—项(Term)的过程. 分析器(Analyzer)对分析操作进行了封装,通过执行一系列操 ...