使用web地图API访问地图服务

Geocken

已于 2024-03-22 16:05:46 修改

阅读量900

点赞数 2

分类专栏： WebGIS学习文章标签：前端

于 2024-03-22 16:02:13 首次发布

本文链接：https://blog.csdn.net/m0_73992303/article/details/136920099

版权

WebGIS学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、Web地图API的选择

（一）FOSS(Free and Open Source Software)类型的Web地图API

OpenLayers：一种Javascript API，使用较多但复杂
Leftlet：更适用于移动设备，强调使用切片，可绘制GeoJSON，缺少代码实例
D3：常用于绘制图表，可将数据绑定到页面的DOM（文档对象模型）上，对将图表和地图结合有优势

//D3地球仪实例：http://mbostock.github.io/d3/talk/20111018/azimuthal.html

（二）商业Web地图API

谷歌地图API：可将数据叠加到谷歌切片上，叠加数据多为KML文件
必应地图API：不注重KML使用，但源代码较多
ArcGIS的API：最常用的为ArcGIS API for Javascript

二、使用Web地图API的基本步骤

1.在HTML的<head>引用Javascript和样式表css文件

2.在<body>设置地图div与对象

3.在<script>设置相关layer对象

4.进行图层样式化

5.为了进行交互，设置事件与交互元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引用内容分发网站CDN站点Javascript与样式表css文件 -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/theme/default/style.css">
    <script>
        var mymap=new OpenLayers.Map('map');//在API的Map类通过构造函数链接div的id，并实例化负值给变量mymap
        var toProjection=new OpenLayers.Projection("EPSG:900913");//通过投影类的EPSG属性，实例化赋值给变量toProjection
        var map=new OpenLayers.Map("map",{projection:toProjection});//再次用Map类，链接div并赋予div投影信息，赋值给新变量map
        layer=new OpenLayers.Layer.WMS("WMS","https://restapi.amap.com/v3/staticmap?location=116.481485,39.990464&zoom=10&size=980*700&markers=mid,,A:116.461485,39.840464&key=你的key",
            {LAYERS:'',transparent:true},{singleTile:true,isBaseLayer:false});
        var osm=new OpenLayers.Layer.OSM("Simple OSM Map");
        map.addLayer([layer,osm]);

        var fromProjection=new OpenLayers.Projection('EPSG:4326');
        var groceryLayer=new OpenLayers.Layer.Vector('Grocery',{
            projection:fromProjection,
            strategies:[new OpenLayers.Strategy.Fiexd()],
            protocol:new OpenLayers.Protocol.HTTP({
                url:"https://restapi.amap.com/v3/bus/stopid?key=你的key&id=BV10006672&output=json",
                format:new OpenLayers.Format.GeoJSON()
            }),
            style:{
                externalGraphic:'./Learn/6Web的API访问地图服务/green-pin.png',
                praghicWidth:25,
                graphicHeight:25,
                graphicYOffset:0
            }
        });
        map.addLayer(groceryLayer);

        //事件与交互元素（图层显隐）
        function toggleLayerViz(layername){
            var layerToToggle=map.getLayersByName(layername)[0];
            if(layerToToggle.visibility){
                layerToToggle.setVisibility(false);
            }
            else{
                layerToToggle.setVisibility(true);
            }
        }
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>