WebGIS开发：常见地图框架介绍

山已几202007

于 2024-07-26 10:19:36 发布

阅读量486

点赞数 20

文章标签： arcgis javascript vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_43724098/article/details/140698694

版权

LBS类

LBS（Location-Based Services）类框架专注于提供基于位置的服务，如位置追踪、地理围栏和位置查询，这些框架通常包含了定位和位置相关的功能，例如常用的高德、百度地图等。
以高德地图为例进行介绍，高德地图API提供了位置服务、路线规划和地理编码等功能，主要具有提供详细的本地地图和位置服务、提供位置搜索、路线规划、交通信息等特点，示例如下：

<body>
    <h1>高德地图示例</h1>
    <div id="mapContainer"></div>
    <!-- 引入高德地图的JavaScript API -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=您的API_KEY"></script>
    <script>
        // 创建地图实例
        var map = new AMap.Map('mapContainer', {
            zoom: 10, // 初始地图级别
            center: [116.397428, 39.90923], // 初始地图中心点 (经度, 纬度)
        });
        // 创建标记
        var marker = new AMap.Marker({
            position: new AMap.LngLat(116.397428, 39.90923), // 标记的位置
            title: '天安门' // 标记的标题
        });
        // 将标记添加到地图
        map.add(marker);
    </script>
</body>

高德地图API是阿里巴巴旗下的商业产品，使用需要遵守其商业条款和使用限制。虽然高德地图API提供了丰富的功能，但这些功能是预定义的，开发者只能在其提供的框架内进行开发，对于需要独特功能或复杂交互的应用，高德地图API的灵活性可能不足。

商业API

商业API提供了企业级的地图服务，通常包括高性能的地图渲染、数据分析和技术支持。这些API通常需要付费，但提供了更高级的功能和支持服务。例如ESRI的ArcGIS API For JS，超图的IClient，中地数码的MapGIS Client for JS，都属于商业API。
以ArcGIS API for JavaScript为例进行介绍，支持2D和3D地图视图，丰富的地图样式和组件；提供复杂的空间分析工具和查询功能，提供详细的技术文档和企业支持服务，示例如下：

<body>
<div id="viewDiv" style="height: 100%; width: 100%;"></div>
<script src="https://js.arcgis.com/4.22/"></script>
<script>
require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {
    var map = new Map({
        basemap: "streets"
    });
    var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 12,
        center: [ -118.71511,34.09042 ] // Longitude, latitude
    });
    var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/xxxx/arcgis/rest/services/YourFeatureLayer/FeatureServer"
    });
    map.add(featureLayer);
});
</script>
</body>

虽然这些商业API提供了高性能的地图渲染、数据分析和技术支持，但是通常使用软件、库、包，通常需要购买才能使用，缺点是成本很高，除此之外，开发人员需要依赖公司发布新功能，因为源代码不共享。

开源API

开源WebGIS API提供了免费的地理信息系统服务，允许开发者根据需求进行自定义和扩展。这些开源框架具有灵活性和可定制性，适合于构建各种类型的地理信息应用。

OpenLayers

OpenLayers 是一个功能强大的开源JavaScript库，用于显示交互式地图并支持多种地理数据格式。支持canvas和webgl两种方式渲染地图，默认采用的是canvas，仅支持二维表达。支持各种地图图层类型（如WMS、WMTS、GeoJSON、KML等）和复杂的地理操作,开发者可以根据需求进行深度定制、支持多种地图投影和坐标系。

<body>
    <div id="map" class="map"></div>
    <script src="https://openlayers.org/en/latest/build/ol.js"></script>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([0, 0]),
                zoom: 2
            })
        });
    </script>
</body>

Leaflet

Leaflet 是一个轻量级的开源JavaScript库，专注于移动友好的交互式地图应用。Canvas渲染机制，仅支持二维表达，地图坐标系墨卡托投影，不支持球。API设计简洁，易于上手，核心库小，加载速度快，提供大量插件，扩展功能如绘图、测量等，对移动设备的支持良好。缺陷是不支持webgl渲染性能有瓶颈，适用于轻量级简单地理信息主题可视化。

<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        L.marker([51.5, -0.09]).addTo(map)
            .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
            .openPopup();
    </script>
</body>

Mapbox GL

Mapbox 是一个流行的开源地图平台，提供强大的地图渲染和地理数据处理功能。Mapbox是一款二三维结合的开源地图数据库，mapbox和cesium相比更美观，与openlayers相比支持三维。Mapbox是二三维一体化，墨卡托坐标系，明星数据格式是矢量切片，特点是最具美感的专题地图，适用于互联网场景复杂地理信息表达，内网追求地图可视化效果的也适用，Mapbox很多优化都是基于互联网场景的。有自己定义的地图样式、地图业务，该公司也创建开源了很多的开源工具，同时也专注于Web GL方向，比如Mapbox GL在3D GIS渲染上效果很好。

<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = '您的Mapbox Access Token';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [0, 0],
            zoom: 2
        });
        new mapboxgl.Marker()
            .setLngLat([0, 0])
            .setPopup(new mapboxgl.Popup().setHTML('<h1>Hello World!</h1>'))
            .addTo(map);
    </script>
</body>

Cesium

Cesium 是一个开源的JavaScript库，用于构建高性能的三维地球和地图应用。它在处理和可视化大规模空间数据方面表现出色。Cesium是一个三维可视化地图库，WebGL渲染机制，支持2D25D3D形式的地图展示；可以绘制各种几何图形、高亮区域，支持导入图片，甚至3D模型等多种数据可视化展示；还可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和mobile端。cesium二三维一体化，经纬度坐标系，支持球。cesium的明星数据格式是3DTiles，特点是唯一开源的WebGIS三维引擎，缺陷是卡，体验差，地图丑。可能是为了支持球，所有的平面瓦片都要进行纹理转换贴球，计算量偏大，最新的矢量切片也是变成图片再纹理转换到球上，栅格化严重一点都不精美，可以说为了球，牺牲了太多性能和地图美观度，适用于Web强三维应用场景

<body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider: Cesium.createWorldTerrain()
        });
        viewer.scene.globe.enableLighting = true;
        var entity = viewer.entities.add({
            name : 'Cesium Marker',
            position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
            point : {
                pixelSize : 10,
                color : Cesium.Color.RED
            }
        });
        viewer.flyTo(entity);
    </script>
</body>

Mapbox与Cesium的比较

Mapbox：
适用场景：适用于需要高效2D和3D地图渲染、交互和自定义样式的应用。
优势：强大的样式定制功能、丰富的API、良好的生态系统和社区支持，追求最漂亮的地图。
限制：三维渲染能力较Cesium弱，主要侧重于2D地图和轻量级3D效果。
Cesium：
适用场景：适用于需要高性能三维地球渲染、大规模地理数据可视化和时间动态数据的应用。
优势：卓越的三维渲染能力、时间动态数据支持、强大的数据可视化功能。
限制：较为复杂，学习曲线较陡，适合需要三维可视化的专业应用。
总结：Mapbox和Cesium都是强大的开源WebGIS框架，各自有其优势和适用场景。Mapbox在2D和轻量级3D地图应用中表现优异，提供丰富的自定义和交互功能，最重要的目的就是追求最漂亮的地图。Cesium则在三维地球和大规模地理数据可视化方面具备强大的能力，适合需要高性能三维渲染的应用。