JS插件开发 - GIS地图打点视图展示

昨天，我下班之后和三哥们儿一起喝酒，喝着喝着就喝高了，于是大家开始聊人生，谈理想，轮到我的时候我说我的理想就是和我爸一样月薪10万，当时他们都惊呆了说：“没看出来了，没想到你也是个富二代”。 误会误会大家都误会了，我爸的理想也是月薪10万。ㄟ(▔,▔)ㄏ

这个人呐，活着就得有个盼头，太早达到月薪10万对于我来说并不是一件好事儿，太容易满足了，生活就会变得索然无味，虽然我距离月薪10万还差9万9，
不逼逼了，早点水完这篇博文，向着月薪10完迈出沉重的“一小步”

Start

我们部门没有UI小美眉，本来有的，被其他部门的帅哥给挖走了，现在导致我们部门上班就跟上坟一样压抑。
咳咳，扯远了
项目经理貌似对项目的UI也看不下去了，让我重新开发
项目原本的GIS视图实在是太丑了，对我这种颜值爆表的小鲜肉来说是绝对不被允许的

先放张对比图

• 修改前 有点暗黑的感觉
  

• 修改后
  

就是这种feelstyle

上代码

ol-point.js

/**
 * 介绍:
 *  地图打点 插件封装
 *  使用方法:
 *  导入ol-point.js
 *  $.mapPoint(指定id,数据的数组,x轴字段,y轴字段)
 * example:
 *  $.mapPoint("map", point, "x", "y");
 */
;(function($){ 
    $.extend({
        "mapPoint":function(id, points, x, y){
            var pointX = 0;
            var pointY = 0;
            var length = 0;
            if(points != null){
                length = points.length;
                pointX = points[0][x];
                pointY = points[0][y];
            }
            var features = new Array(length);
            for (var i = 0; i < length; ++i) {
                features[i] = new ol.Feature({
                    'geometry': new ol.geom.Point([points[i][x], points[i][y]]),
                    'i': i,
                    'size': 10
                });
            }

            var styles = {
                    '10': new ol.style.Style({
                        image: new ol.style.Circle({
                            radius: 5,
                            fill: new ol.style.Fill({color: '#00ff00'}),
                            stroke: new ol.style.Stroke({color: '#00ff00', width: 1})
                        })
                    })
            };

            var vectorSource = new ol.source.Vector({
                features: features,
                wrapX: false
            });
            var vector = new ol.layer.Vector({
                source: vectorSource,
                style: function(feature) {
                    return styles[feature.get('size')];
                }
            });
            var tile = new ol.layer.Tile({
                source: new ol.source.OSM()
            })
            map = new ol.Map({
                layers: [tile,vector],
                target: id,
                view: new ol.View({
                    center: [pointX, pointY], //视图的中心位置
                    projection: 'EPSG:4326', //这个一定要配置，之前没配置，结果定位到国外去了
                    zoom: 10 //视图切块等级
                })
            });

            var point = null;
            var line = null;
            var displaySnap = function(coordinate) {
                var closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate);
                if (closestFeature === null) {
                    point = null;
                    line = null;
                } else {
                    var geometry = closestFeature.getGeometry();
                    var closestPoint = geometry.getClosestPoint(coordinate);
                    if (point === null) {
                        point = new ol.geom.Point(closestPoint);
                    } else {
                        point.setCoordinates(closestPoint);
                    }
                    if (line === null) {
                        line = new ol.geom.LineString([coordinate, closestPoint]);
                    } else {
                        line.setCoordinates([coordinate, closestPoint]);
                    }
                }
                map.render();
            };

            map.on('pointermove', function(evt) {
                if (evt.dragging) {
                    return;
                }
                var coordinate = map.getEventCoordinate(evt.originalEvent);
                displaySnap(coordinate);
            });

            map.on('click', function(evt) {
                displaySnap(evt.coordinate);
            });

            var stroke = new ol.style.Stroke({
                color: '#00ff00', //点的颜色
                width: 3//点的宽
            });
            var style = new ol.style.Style({
                stroke: stroke,
                image: new ol.style.Circle({
                    radius: 10,
                    stroke: stroke
                })
            });
        }
    })
})(jQuery);

• 使用方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试GIS地图打点</title>
<!-- 导入官方css文件 -->
<link rel="stylesheet" href="ol.css" />
</head>
<body>

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

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<!-- gis地图控件 -->
<!-- 导入官方插件openlayers 4 -->
<script type="text/javascript" src="ol.js"></script>
<!-- 引入自定义插件 -->
<script type="text/javascript" src="ol-point.js"></script>
<script type="text/javascript">
    //定义测试数据
    var data = '[{"x":119.307159,"y":26.107006},'+
               '{"x":119.307165,"y":26.107007},'+
               '{"x":119.30717,"y":26.107009},'+
               '{"x":119.307176,"y":26.10701},'+
               '{"x":119.307181,"y":26.107012},'+
               '{"x":119.307187,"y":26.107013},'+
               '{"x":119.307198,"y":26.107016},'+
               '{"x":119.307198,"y":26.107008},'+
               '{"x":119.307198,"y":26.107006},'+
               '{"x":119.307198,"y":26.107004},'+
               '{"x":119.307198,"y":26.106992},'+
               '{"x":119.307198,"y":26.106989},'+
               '{"x":119.307198,"y":26.106984},'+
               '{"x":119.307198,"y":26.106981},'+
               '{"x":119.307198,"y":26.106977},'+
               '{"x":119.307198,"y":26.106974},'+
               '{"x":119.307198,"y":26.106968},'+
               '{"x":119.307198,"y":26.106965},'+
               '{"x":119.307198,"y":26.106962},'+
               '{"x":119.3072,"y":26.106954},'+
               '{"x":119.307202,"y":26.10695},'+
               '{"x":119.307204,"y":26.106946},'+
               '{"x":119.307206,"y":26.106942},'+
               '{"x":119.307211,"y":26.106934},'+
               '{"x":119.307213,"y":26.10693},'+
               '{"x":119.307216,"y":26.106926},'+
               '{"x":119.307223,"y":26.106919},'+
               '{"x":119.307226,"y":26.106915},'+
               '{"x":119.30723,"y":26.106912},'+
               '{"x":119.307233,"y":26.106908},'+
               '{"x":119.30724,"y":26.106901},'+
               '{"x":119.307243,"y":26.106897},'+
               '{"x":119.307259,"y":26.106883}]';
    //json转对象
    var point = JSON.parse(data);
    //调用插件 
    $.mapPoint("map", point, "x", "y");
</script>
</body>
</html>

• 结果展示
  

是不是很好看，
本次插件就这样了
大家直接复制代码吧，下载需要2积分
下载地址：http://download.csdn.net/download/wpixel/10265389