openlayers基础使用和一些简单交互

引入文件

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

创建dom节点

<div id="map" class="map"></div>

定义样式

必须要定义好长和宽 才能正常使用

<style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>

初始化

var map = new ol.Map({
                        controls: ol.control.defaults({
                            attribution: false,
                            rotate: false,
                            zoom: false
                        }),
                        target: 'container',
                        layers: [
                            new ol.layer.Tile({
                                // source: new ol.source.OSM()  这个使用openstreemap 国内可用，但是无法将国内显示改为英文
                                source: new ol.source.TileImage({url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-EN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'}) //谷歌地图支持中国地区显示英文和中文，其他国家显示英文和当地国家语言
                            })
                        ],
                        view: new ol.View({
                            center: ol.proj.fromLonLat(centerPoint),
                            zoom: 10
                        })
                    });

地图上画一个点

 var vectorsource = new ol.source.Vector({});   //创建一个vector
var geometrypt = new ol.geom.Point(ol.proj.fromLonLat([item.lon, item.lat])); //点的坐标 
var feature = new ol.Feature({
        geometry: geometrypt,
        name: item.yy_name,
        yy_tel: item.yy_tel,
        remarkContent: item.remark,
        id: item.id,
        status: item.status
}); //创建一个feture
vectorsource.addFeature(feature); //将feture添加到 vector中

var layer = new ol.layer.Vector({
        source: vectorsource,
        style: new ol.style.Style({
                            image: new ol.style.Icon({
                                src: '../../image/icon2.png'
                            }),
                            text: new ol.style.Text({
                                font: '12px Calibri,sans-serif',
                                text: item.yy_name,
                                fill: new ol.style.Fill({
                                    color: '#DC143C'
                                }),
                                stroke: new ol.style.Stroke({
                                    color: '#fff',
                                    width: 3
                                })
                            })
                        })
}); // 创建一个layer

map.addLayer(layer); //添加layer到地图中

点击一个点

//设置点击事件
                    var selectClick = new ol.interaction.Select({
                        condition: ol.events.condition.singleClick,
                        style: function (feature) {
                            // console.log(feature);

                            var coordinate = feature.get('geometry').flatCoordinates;
                            var id = feature.get('id');
                            var yy_tel = feature.get('yy_tel');
                            var remarkContent = feature.get('remarkContent');

                            content.innerHTML = "<div>Appointment phone：" + yy_tel +
                                "</div><div>Remarks：" + (remarkContent ? remarkContent :
                                    'No remarks') +
                                "<a href=\'javascript:;\' class=\'map_box_btn\' onclick=\'app.openyuyue(" +
                                id + ")\'>details</a></div>";
                            overlay.setPosition(coordinate);
                            return pointStyle[id];
                        }
                    });
                    map.addInteraction(selectClick);//激活一个点击事件

使用openwrite发布