GIS开发之如何使用OpenLayers,Leaflet,Mapbox,Cesium,ArcGIS, Turf.js 与 D3.js

秋沐2024-09-25 13:35

1、OpenLayers：

  • 描述：OpenLayers是一个高性能、开源的JavaScript库，用于在Web上创建富有的地图应用。它支持多种地图数据源，包括从瓦片服务到矢量数据，并提供了大量的交互功能。
  • 特点：功能强大、灵活易用，支持多种地图投影、矢量数据和图层样式，具有强大的地图控件和交互功能。
  • 适用场景：适用于创建复杂的地图应用，如地理信息系统平台、环境监测与灾害管理、房地产与城市规划等。

2、Leaflet：

  • 描述：Leaflet是一个轻量级、易于使用的开源JavaScript库，为开发者提供了创建交互式地图的强大工具。
  • 特点：简洁灵活，具有丰富的地图功能和插件生态系统，支持触控操作，非常适合快速开发项目。
  • 适用场景：适用于需要快速部署且对性能有一定要求的地图应用，如导航与路线规划应用、旅游与户外活动应用等。

3、Mapbox GL JS：

  • 描述：Mapbox GL JS是基于WebGL的开源JavaScript库，专注于提供高性能的交互式地图渲染。
  • 特点：高性能、流畅的地图动画和快速的渲染速度，支持自定义地图风格和数据源，提供了丰富的地图样式和效果。
  • 适用场景：适用于需要高性能地图渲染和复杂地图样式的应用，如实时数据可视化、地理信息系统平台等。

4、Cesium.js：

  • 描述：Cesium.js是一个开源的JavaScript库，用于创建高性能的三维地球和地理可视化应用程序。
  • 特点：基于WebGL技术，支持多种地理数据格式，提供了丰富的可视化功能和交互控制，适用于构建三维地球和地理可视化应用。
  • 适用场景：适用于需要三维地球展示和地理空间分析的应用，如航空航天、军事模拟、虚拟现实和增强现实应用等。

5、ArcGIS API for JavaScript：

  • 描述：ArcGIS API for JavaScript是由Esri提供的一套用于构建地理信息应用程序的JavaScript API。
  • 特点：具备丰富的地图和地理数据功能，包括地理处理、空间分析和实时数据集成，提供了强大的工具和服务，支持ArcGIS Online和ArcGIS Enterprise中的数据和服务。
  • 适用场景：适用于需要与Esri产品和服务紧密集成的GIS应用，如企业级地理信息系统平台、环境监测与灾害管理等。

6、Turf.js：

  • 描述：Turf.js是一个强大的地理空间分析库，用于在浏览器和Node.js环境中执行复杂的地理空间操作。
  • 特点：提供了一系列的模块来处理地理空间数据，包括计算距离、面积、缓冲区、叠加分析等，常与上述地图库结合使用以增强分析能力。
  • 适用场景：适用于需要进行地理空间分析和数据处理的GIS应用，如空间查询、地理编码、空间统计分析等。

7、D3.js（虽然主要是一个数据可视化库）：

  • 描述：D3.js是一个强大的数据可视化库，但在WebGIS领域也非常有用，特别是当涉及到地理空间数据的复杂可视化时。
  • 特点：提供了丰富的数据可视化工具和函数，支持自定义的地理空间图表和交互式信息图。
  • 适用场景：适用于需要复杂数据可视化的GIS应用，如实时数据监控、地理数据统计分析等。
  1. 使用 OpenLayers
javascript 复制代码 
<template>
  <div ref="mapContainer" style="height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import { fromLonLat } from 'ol/proj'
import { Point } from 'ol/geom'
import { Feature } from 'ol'
import { Style, Icon } from 'ol/style'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import Overlay from 'ol/Overlay'

const mapContainer = ref(null)

onMounted(() => {
  const center = fromLonLat([110.088076, 36.126396])

  const marker = new Feature({
    geometry: new Point(center),
  })

  const markerStyle = new Style({
    image: new Icon({
      src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png',
    }),
  })
  marker.setStyle(markerStyle)

  const vectorSource = new VectorSource({
    features: [marker],
  })

  const vectorLayer = new VectorLayer({
    source: vectorSource,
  })

  const map = new Map({
    target: mapContainer.value,
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
      vectorLayer,
    ],
    view: new View({
      center,
      zoom: 6,
      minZoom: 5,
      maxZoom: 12,
    }),
  })

  const overlay = new Overlay({
    element: document.createElement('div'),
    positioning: 'bottom-center',
    stopEvent: false,
    offset: [0, -50],
  })
  map.addOverlay(overlay)

  marker.getGeometry().on('change', function () {
    const markerPosition = map.getPixelFromCoordinate(center)
    overlay.setPosition(center)
    overlay.getElement().innerHTML = 'Hello World'
  })
})
</script>

**解释**：

  • 使用`ol.Map`创建地图。

  • 限制地图的显示区域通过`zoom`控制。

  • 创建了一个标记`Feature`并应用自定义样式。

  • 鼠标悬浮时，使用`Overlay`展示信息窗体。

  1. 使用 Leaflet
javascript 复制代码 
<template>
  <div id="map" style="height: 400px;"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import L from 'leaflet'

onMounted(() => {
  const map = L.map('map').setView([36.126396, 110.088076], 6)

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map)

  const marker = L.marker([36.126396, 110.088076]).addTo(map)
  marker.bindPopup('Hello World').openPopup()

  map.setMaxBounds([
    [38.5, 121.1], // 辽宁省大概范围
    [39.1, 122.7],
  ])
})
</script>

**解释**：

  • `L.map`创建了一个地图并设置中心点。

  • 使用`L.marker`在中心点标记，并绑定悬浮显示的Popup信息。

  • `setMaxBounds`限制辽宁省的地图区域。

  1. 使用 Mapbox GL JS
javascript 复制代码 
<template>
  <div id="map" style="height: 400px;"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import mapboxgl from 'mapbox-gl'

mapboxgl.accessToken = 'your_mapbox_access_token'

onMounted(() => {
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [110.088076, 36.126396],
    zoom: 6,
  })

  new mapboxgl.Marker().setLngLat([110.088076, 36.126396]).addTo(map)

  map.on('mouseenter', () => {
    new mapboxgl.Popup().setLngLat([110.088076, 36.126396])
      .setHTML('<h1>Hello World</h1>')
      .addTo(map)
  })

  map.setMaxBounds([
    [118, 39], // Approximate bounds for Liaoning
    [124, 43],
  ])
})
</script>

**解释**：

  • `mapboxgl.Map`创建了地图，并设置地图样式。

  • 使用`mapboxgl.Marker`标记中心点，并绑定悬浮显示Popup。

  • `setMaxBounds`限制地图的显示区域。

  1. 使用 Cesium.js
javascript 复制代码 
<template>
  <div id="cesiumContainer" style="height: 400px;"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import Cesium from 'cesium'

onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.OpenStreetMapImageryProvider({
      url: 'https://a.tile.openstreetmap.org/',
    }),
    baseLayerPicker: false,
    geocoder: false,
  })

  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(110.088076, 36.126396, 1000000),
  })

  const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(110.088076, 36.126396),
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
    },
    label: {
      text: 'Hello World',
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
  })
})
</script>

**解释**：

  • 使用`Cesium.Viewer`创建地图。

  • `viewer.entities.add`添加一个点标记并显示文本信息。

  • 地图视角通过`setView`进行调整。

  1. 使用 ArcGIS API for JavaScript
javascript 复制代码 
<template>
  <div id="viewDiv" style="height: 400px;"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import Graphic from '@arcgis/core/Graphic'

onMounted(() => {
  const map = new Map({
    basemap: 'streets',
  })

  const view = new MapView({
    container: 'viewDiv',
    map,
    center: [110.088076, 36.126396],
    zoom: 6,
  })

  const point = {
    type: 'point',
    longitude: 110.088076,
    latitude: 36.126396,
  }

  const markerSymbol = {
    type: 'simple-marker',
    color: [226, 119, 40],
  }

  const pointGraphic = new Graphic({
    geometry: point,
    symbol: markerSymbol,
    popupTemplate: {
      title: 'Hello World',
      content: 'This is a marker popup',
    },
  })

  view.graphics.add(pointGraphic)
})
</script>

**解释**：

  • `Map`与`MapView`创建地图并设置中心点。

  • 使用`Graphic`创建标记并设置信息窗体内容。

  1. 使用 Turf.js 与 D3.js

这两个库主要用于地理计算与数据可视化，但并不直接用于地图展示或交互，通常需要配合其他库（如Leaflet或Mapbox GL JS）使用。

相关推荐
小屁孩大帅-杨一凡3 分钟前
java后端请求想接收多个对象入参的数据
java·开发语言
从兄8 分钟前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
m0_656974748 分钟前
C#中的集合类及其使用
开发语言·c#
java1234_小锋10 分钟前
使用 RabbitMQ 有什么好处？
java·开发语言
wjs202419 分钟前
R 数据框
开发语言
肘击鸣的百k路24 分钟前
Java 代理模式详解
java·开发语言·代理模式
捕鲸叉34 分钟前
MVC（Model-View-Controller）模式概述
开发语言·c++·设计模式
wrx繁星点点1 小时前
享元模式：高效管理共享对象的设计模式
java·开发语言·spring·设计模式·maven·intellij-idea·享元模式
真的想不出名儿1 小时前
Java基础——反射
java·开发语言
努力编程的阿伟1 小时前
【Java SE语法】抽象类(abstract class)和接口(interface)有什么异同？
java·开发语言
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05红米手机使用google play06【经验分享】Ubuntu22.04安装微信(linux官方版)07全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09RAG 实践- Ollama+RagFlow 部署本地知识库10基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测