<!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. oracle的网络连接

    NAMES.DIRECTORY_PATH常用的值有tnsnames,hostname,onames和ezconnect和 ldap,cds,nis不常用的值,默认值是(tnsnames,onames, ...

  2. Go语言实现：【剑指offer】字符串的排列

    该题目来源于牛客网<剑指offer>专题. 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,b ...

  3. Python Special Methods - 特殊方法

    特殊方法 特殊方法的存在是为了给 Python 解释器调用的,通常自己并不需要直接调用它们.也就是说不应该使用 my_object.__len__() 这种写法,而应该使用 len(my_object ...

  4. Hapi+MySql项目实战路由初始化（二）

    配置路由规则 将路由文件放在routes文件夹里,修改‘Server.js’文件,增加如下代码: 我们这里指明了require('./routes') routes文件夹,require可以文件但是不 ...

  5. 20200104--python学习第六天

    今日学习 集合 内存相关知识 深浅拷贝 内容回顾与补充 (1)列表: (a)reverse 反转 v1=[1,2,3111,32,13] print(v1) v1.reverse() print(v1 ...

  6. Ansible 学习目录

    1. Ansible 安装 2. Ansible hosts 文件配置 3. Ansible 常用模块 4. Ansible playbook使用

  7. Nginx安装（yum源）

    CentOS7 $ vi /etc/yum.repos.d/nginx.repo [nginx] name=nginx repo baseurl=http://nginx.org/packages/c ...

  8. Ream--(objc)写事务精简方案

    Ream--(objc)写事务精简方案 地址: REALM-- Realm官方提供的的写事务有两种方式: A[realm beginWriteTransaction]; // ... [realm c ...

  9. WebStorm新建JS文件、CSS文件时自动生成文件注释

    WebStorm 是jetbrains公司旗下一款优秀的前端开发工具.随着现在大型项目模块越来越多,参与人员也越来越多,实际项目中经常需要明确文件用途和文件的归属,所以创建文件时添加文件注释是一种必要 ...

  10. Centos8（Liunx） 中安装PHP7.4 的三种方法和删除它的三种方法

    编译安装 Centos8下PHP源码编译和通过yum安装的区别和以后的选择 其实这两种方法各有千秋: yum安装: 从yum安装来说吧,yum相当于是自动化帮你安装,你不用管软件的依赖关系,在yum安 ...