&‘米粒

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::
OpenLayers 的入门

http://www.jianshu.com/p/6785e755fa0d

上面的地址是一位大叔写的openlayers 入门简述

官网http://openlayers.org/

http://weilin.me/ol3-primer/ch05/05-03.html  万能瓦片地图秘籍

 

下面是自己写的在线地图上加一个点

<!DOCTYPE html>
<html>
<head>
    <title>Tiled ArcGIS MapServer--argis 瓦片地图</title>

    <link href="v3.16.0/css/ol.css" rel="stylesheet" />
    <script src="v3.16.0/build/ol.js"></script>
</head>
<body>
    <div id="map" class="map"></div>
    <script>
        
        var lonlat = { x: 121.467014, y: 31.263472 };
        
        //经纬度转墨卡托
        function lonlat2mercator(lonlat) {
            var mercator = { x: 0, y: 0 };
            var x = lonlat.x * 20037508.34 / 180;
            var y = Math.log(Math.tan((90 + lonlat.y) * Math.PI / 360)) / (Math.PI / 180);
            y = y * 20037508.34 / 180;
            mercator.x = x;
            mercator.y = y;
            return mercator;
        }

       //  var url = 'http://31.16.1.101/arcgis/rest/services/shsw_JCDXT/MapServer';
        var url = 'http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer';

         
        //矢量数据
        var vectorLayer = new ol.layer.Vector({//矢量数据,客户端呈现。
            source: new ol.source.Vector({//矢量数据源
            features: [new ol.Feature(new ol.geom.Point([lonlat2mercator(lonlat).x,lonlat2mercator(lonlat).y]))]
            }),
            style: new ol.style.Style({//样式
                image: new ol.style.Circle({//画圆
                    radius: 7,
                    fill: new ol.style.Fill({//几何图形的填充样式
                        color: 'black'
                    }),
                    stroke: new ol.style.Stroke({//几何图形的边框样式
                        color: 'white', width: 2
                        
                    })
                    
                })
            })
        });
        //图层
        var layers = [
          //瓦片资源
          new ol.layer.Tile({
              
              source: new ol.source.TileArcGISRest({
                  url: url
              })
          }),
          vectorLayer
        ];
        var map = new ol.Map({
            layers: layers,
            target: 'map',
            //View是地图显示的必要组件，通过view可以设置地图的中心点，分辨率，缩放级别和旋转角度。
            view: new ol.View({
                //center: ol.proj.fromLonLat([120, 30]),//中国范围
                center:ol.proj.transform([120, 30],'EPSG:4326','EPSG:3857'),
                zoom: 6
            })
        });
    </script>
</body>
</html>

　　

 

posted on 2016-11-23 10:00  youchim  阅读(437)  评论(0)    收藏  举报