openlayers是一个按照面向对象原则设计的一个开发库，里面的一切都是对象。

（JAVA C++ PHP C# JS等 特点：封装、继承、多态）

核心组件：ol.Map （WebGIS前端 一切皆地图，ol中几乎所有的类都与Map之间有着直接或者间接的关系）

①controls：一个Map中可以包含很多个控件，map类中有个属性controls（控件数组）。

②interactions：交互行为，一个map中只能有一个交互行为数组（[]），但这个数组中可以包含多个交互行为，或者没有交互行为。

③layers：一个map可能没有或者有多个图层，由图层的集合类管理（图层数组），多个图层逗号分开存储，ol.layer.Base即为基类图层。

④overlays：查看某个要素的属性，弹出属性框即为overlay；在地图上放置div图标，通过创建overlay，把html元素绑定给ol.overlay，再放到overlays的集合里面。 

上面四个都通过ol.collection集合展示

⑤view：一个view只能绑定在一个view上（中心、投影、缩放等）

        以下为使用上述类来构建map组件的示例代码，包括地图视图（view）、地图图层（layers）、地图控件（controls）、地图悬浮物（overlays）、交互控件（interactions）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="ol.css">
    <style>
         html,body{
            width: 100%;    
            height: 100%;
        } 
        .map{
            width: 80%;
            height: 80%;
            margin: auto;
            margin-top: 50px;
            border: red;
            border-style: double;
        }
        .beijing{
            width: 50px;
            height: 30px;
            background: url("timg.jpg") center center no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <div class="map" id="map"></div>
    <div class="beijing" id="beijing"></div>

    <script src="ol.js"></script>
    <script>
        //创建一个地图图层
        var osmLayer =  new ol.layer.Tile({
            source:new ol.source.OSM()
        });

        //创建一个地图控件 全屏展示
        var control = new ol.control.FullScreen();

        //创建一个地图视图，再创建地图视图之前需要确定中心点
        var beijing = ol.proj.transform([116.399669,39.921354],"EPSG:4326","EPSG:3857"); //经纬度投影代码为4326，转为墨卡托投影坐标系，代码为3857（坐标，源，目标）
        var view = new ol.View({
            center:beijing,
            zoom:5,
            maxZomm:10,
            minZoom:3
        });

        //创建一个交互控件
        var interaction = new ol.interaction.DragRotateAndZoom();
        var interactions = new ol.interaction.defaults().extend([interaction]);

        //创建一个悬浮控件 需要设置参数 用大括号
        var overlay = new ol.Overlay({
            position:beijing,
            element:document.getElementById("beijing")
        });

        //创建地图
        var map = new ol.Map({
            target:"map",
            view:view,
            layers:[osmLayer],
            interactions:interactions,
            controls:[control],
            overlays:[overlay]
        });
    </script>
</body>
</html>

# php # java # html
Logo
AtomGit 开源协作平台测评赛

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐

白盒测试体系的探索 [ 光影人像 东海陈光剑 的博客 ]

什么是白盒测试？很多人都听说过白盒测试。通常的说法是，白盒测试是能看到全部产品源代码的测试。常常，白盒测试都是和牛人绑在一起的。个人认为这是一种比较狭隘的说法。然而究竟什么是白盒测试呢？可能有很多的人在做了很长时间的白盒测试以后发现，自己其实不是在做白盒测试，而是在做灰盒测试，原因是不够“白”，因为他没有看到全部的产品代码。其实，我个人认为，这是做白盒测试的误区。从广义来说，个人认为，白...

avatar 开放原子开发者工作坊

现代程序设计 homework-01

搞了6个小时individual project...看看博客做一做第一次现代程序设计作业1) 建立 GitHub 账户, 把课上做的 “最大子数组之和” 程序签入我的github地址是https://github.com/oldoldb,以前没有用过各种不熟练啊....代码我放到<现代程序设计课后作业>这个repository里了,是昨天完成的在hdu和poj上找的5道关于一...

avatar 开放原子开发者工作坊

精心收集的 48 个 JavaScript 代码片段，仅需 30 秒就可理解

原文：Chalarangelo 译文：IT168https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates该项目来自于 Github 用户 Chalarangelo，目前已在 Github 上获得了 5000 多Star，精心收集了多达 48 个有用的 JavaS...

avatar 开放原子开发者工作坊