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發佈