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

来源：互联网发布：淘宝互相收藏编辑：程序博客网时间：2024/06/07 01:54

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>

最后上图

这里写图片描述

阅读全文

1 0