<!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. asp.net core系列 WebAPI 作者：懒懒的程序员一枚

    asp.net core系列 36 WebAPI 搭建详细示例一.概述1.1 创建web项目1.2 添加模型类1.3 添加数据库上下文1.4 注册上下文1.5 添加控制器1.6 添加Get方法1.7 ...

  2. Spring Cloud（六）：服务网关zuul

    通过前面几篇文章的介绍,Spring Cloud微服务架构可通过Eureka实现服务注册与发现,通过Ribbon或Feign来实现服务间的负载均衡调用,通过Hystrix来为服务调用提供服务降级.熔断 ...

  3. Qt使用双缓冲绘图时报错：pure virtual method called

    这个问题折磨了我将近四个小时. 起始原因是想写一个双缓冲绘图的画板,大概看了一下网上的教程,理解双缓冲绘图的思想后,没有完全参照网上的步骤,想着用自己的思路实现一下.(其实和网上的教程也没有太大差别) ...

  4. c#设计模式读书博客

    第一次在博客园撸博客,也是为了鞭策自己去学习进步,过年之后买了一本<C#设计模式>这是我一直很想去学习的一本书.然后用博客记录我的学习历程,并且分享给需要的人.这本书记录的设计模式有23种 ...

  5. Idea生成代码段

    使用快捷键(ctrl+alt+s)找到:从idea的菜单File->Settings->Editor->Live Templates 先添加Template Group,然后添加Li ...

  6. javascript中onclick(this)用法介绍

    this指触发事件的对象 代码如下: <input id="myinput" type="text" value="javascript中onc ...

  7. linux入门系列15--文件传输之vsftp服务

    前面的系列文章基本讲完了linux管理相关的基础知识,从本篇开始讲解centos7中服务程序的部署和配置,以便为外部提供各种服务. 日常工作和娱乐中,我们所需的各种资源都离不开网络以及各种服务,我们通 ...

  8. Hibernate入门之命名策略（naming strategy）详解

    前言 JPA和Hibernate都提供了默认映射策略,通过映射将每个实体类映射到具有相同名称的数据库表,它的每个属性都映射到具有相同属性的列, 但是,在实际项目开发中可能出现与默认命名约定不匹配,也就 ...

  9. Microsoft.EntityFrameworkCore.Tools 相关命令

    一.前言 Entity Framework(后面简称EF)作为微软家的ORM,自然而然从.NET Framework延续到了.NET Core. 二.程序包管理器控制台 为了能够在控制台中使用命令行来 ...

  10. Java日志介绍(3)-Logback

    Logback 继承自Log4j,它建立在有十年工业经验的日志系统之上.它比其它所有的日志系统更快并且更小,包含了许多独特并且有用的特性. 1.配置 1.1.加载配置 Logback能够在初始化期间自 ...