openlayer4入门系列一(地图描绘经纬度点)

openlayer结合天地图描绘点

其他地图描点也是一样的.请去参考官网.

下面是四川天地图的结合openlayer 开发的API ,里面有案例:
http://www.scgis.net/scgcmap/help/mapAPIdown.aspx
案列写的是十分的复杂.我在我的项目中简化了下.

引入js.css

<head>
    <title>天地图四川要素查询title>
    <link rel="stylesheet" href="../../static/css/ol.css" type="text/css">
    <script src="../../static/js/jquery-2.1.1.min.js" type="text/javascript">script>
    <script src="../../static/js/ol4.1.1_scgis.js" type="text/javascript">script>
head>

下面是代码

<body>
<div id="map" class="map">div>
<script>
    var map;

    var styleCache = {};

    window.onload = function () {




        //定义地图
        map = new ol.scgcMap("map", "", {
            token: "",
            //天地图四川服务访问令牌,目前不需要
            zoom: 6,
            //初始化地图级别
            center: [104.16, 30.36] //初始化地图中心点
        });
        //定义图层
        var layer = new ol.scgisTileLayer("http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/", //地图服务地址
                {
                    token: "" //天地图四川服务访问令牌,目前不需要
                });
        //添加图层
        map.addLayer(layer);


/* 
下面是我后台拿的经纬度,和地名格式如下
[{"lat":"32.54","lng":"101.42","name":"阿坝"},{"lat":"31.12","lng":"98.49","name":"白玉"},{"lat":"31.37","lng":"104.27","name":"北川"}]
*/


        $.ajax({
            type: "post",
            cache: false,
            async: true,
            url: "/findDataToMap",
            success: function (data) {


                datasearchcallback(data);
            },
            error: function (err) {

            }
        });


        //返回处理


        function datasearchcallback(json) {
            json = eval(json);

            var vectorsource = new ol.source.Vector({});

            for (var i in json) {

                var fea = json[i];


                var geometrypt = new ol.geom.Point([fea.lng, fea.lat]);
                feature = new ol.Feature({geometry: geometrypt, name: fea.name});

                vectorsource.addFeature(feature);
//                    }
            }


            var datasearchVectorLayer = new ol.layer.Vector({
                source: vectorsource,
                style: getStyle
            });
            map.addLayer(datasearchVectorLayer);

        }

        //样式
        function getStyle(feature, resolution) {
            // var text = resolution < 0.0054931640625 ? feature.get('name') : '';    //根据分辨率控制文字显示级别
            var text = feature.get('name');
            if (!styleCache[text]) {
                styleCache[text] = [
                    new ol.style.Style({
                        image: new ol.style.Icon({
                            src: '../../static/img/marker.png'
                        }),
                        text: new ol.style.Text({
                            font: '12px Calibri,sans-serif',
                            text: text,
                            fill: new ol.style.Fill({
                                color: '#DC143C'
                            }),
                            stroke: new ol.style.Stroke({
                                color: '#fff',
                                width: 3
                            })
                        })

                    })];
            }
            return styleCache[text];
        }
    }

script>
body>
html>

最后上图

openlayer4入门系列一(地图描绘经纬度点)_第1张图片

你可能感兴趣的:(实战记录)