OpenLayer4實現自定義地圖聚類圖層
阿新 • • 發佈：2019-02-14
前言：一直感覺不論OL還是arcgis 這個地圖聚類是真的醜，實在讓人看不下去，反觀leaflet外掛的的聚合效果那叫一個好看，個人感覺好看多了去了，那麼把這個聚合效果用到OL上面去啊，這個是一個很好玩的事，本篇文章用到了自定義的聚類的擴充套件圖層，感謝@牛老師原始碼啟發，在此基礎上進行進一步的封裝。
先來張效果圖：
這張照片整的感覺都變形很多。其實一點沒變形
一、自定義擴充套件圖層下載（github）
下載地址：點我下載
二、demo示例
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>cluster</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css"> <style type="text/css"> body, #map { border: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; font-size: 13px; overflow: hidden; } </style> <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script> <script src="../../Scripts/jquery/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="js/ClusterLayer-ol.js"></script> <script type="text/javascript"> var map; function init() { var projection = new ol.proj.Projection({ code: 'EPSG:4326', units: 'degrees' }); function getNavmapLayer() { return new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'//7,8 }), projection: projection }); } var navlayer = getNavmapLayer(); map = new ol.Map({ controls: ol.control.defaults({ attribution: false }), target: 'map', layers: [navlayer], view: new ol.View({ projection: projection, center: [116.456, 40.251], zoom: 4 }) }); $.get("data/data.json", function (result) { var mycluster = new ol.layer.myClusterLayer({ map: map, clusterField: "", zooms: [12], distance: 100, data: result, style:null }); map.addLayer(mycluster); }) } </script> </head> <body onLoad="init()"> <div id="map"> </div> </body> </html>