前端切图仔如何玩转webgis开发酷炫界面实战项目经验指南

已于 2023-07-10 10:23:58 修改
阅读量3.9k 收藏 75
点赞数 10
分类专栏： 前端开发 项目实战 javascript 文章标签： javascript vue.js es6 css3 html5
于 2021-07-02 20:27:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15041931/article/details/118422653
版权

前言

最近刚忙完一个新项目，是基于WebGIS开发技术采用离线瓦片地图进行交互，由于之前做过类似的项目，也花了一些时间做研究，所以接手这个"So Easy"。主要技术栈是Vue+OpenLayers+地图，下面会分享一些我用WebGIS开发的大致路线和入门知识，以及项目实战经验，如有不妥之处，还请批评纠正，也欢迎大家一起探讨学习。

首先来认识一下WebGIS是什么东东，如下图所示：

webgis.png

百度百科： WebGIS（网络地理信息系统）是指工作在Web网上的GIS,是传统的GIS在网络上的延伸和发展，具有传统GIS的特点，可以实现空间数据的检索、查询、制图输出、编辑等GIS基本功能，同时也是 Internet 上地理信息发布、共享和交流协作的基础。

https://baike.baidu.com/item/webgis/761986?fr=aladdin

WebGIS 介绍

Web + GIS 就是，在Web网页上的GIS系统，我们可以在网页（浏览器）上进行GIS数据处理操作、可视化展示等。

WebGIS 三层架构主要为展示层、地图服务层、数据层，通过UML图形进行理解，如下图所示：

webgis2.png

3D WebGIS是近期未来的方向，因为大数据可视化，最佳配合展示方式是3D地图。

地图要素展示（建筑、路线信息），空间分析（最短路径、最快路径），数据分析可视化（交通实时情况），POI兴趣点（附近景点、商家、美食等）。

Web服务器一般指网站服务器，简单的可以理解为，电脑上的文件资源，可以通过Web服务器部署后，让通过因特网的人都能访问预览。

目前行业上比较流行的地图JS库，主要有：ArcGIS API for JavaScript、OpenLayers、Leaflet、Mapbox、maptalks.js

详细介绍请移步：「开源项目」8款最受欢迎的地图API和javascript库

技术要求

  • JavaScript、CSS / HTML 熟练掌握
  • Vue 基础知识
  • GIS 基本知识：地图投影、坐标系相关
  • Web 端常用 GIS 数据存储格式：wkt、geojson、esriJSON
  • OGC(OGC、WMS、WFS、TMS、WMTS)规范
  • 掌握 ArcGIS Server 或者 GeoServer 发布地图服务并展示
  • 懂得 Java、C# 等后端语言（不强制）
  • Geotools（Java GIS 工具包）

学习路线

二维

  • web 基础知识
  • Vue 基础知识
  • gis 基础知识
  • arcgis/ Qgis/ mapgis
  • arcgis server / Geoserve / igserver
  • openlayers / leaflet / mapboxgl / arcgis api for js

三维

  • web 基础知识
  • Vue 基础知识
  • gis 基础知识
  • 计算机图形学
  • 3dMax / Maya / SketchUp / Blender / Pro-E(三维建模)
  • skyline / arcgis（gis 平台）
  • cesium / threeJS / webGL

新手看到上面的学习路线，心里就会嘀咕着想打退堂鼓，别灰心，继续跟着我的节奏往下走，已准备好一个快速上手开发的操作步骤。只要有前端基础，信手拈来。

如何快速上手

  • 选择地图下载器（使用在线地图此条忽略）
  • 下载离线切片图源（使用在线地图此条忽略）
  • 开发准备工作
  • Vue 脚手架搭建框架
  • 引入开源JS库 OpenLayers（自行查看官网文档API及DEMO示例）
  • 离线瓦片数据源存放到public目录作为静态资源（使用在线地图此条忽略）
  • 万事俱备只欠动手（文末附 OpenLayers 快速上手教程链接）

选择地图下载器

小编推荐两个免费地图下载器工具，如需下载工具及源码请关注公众号：[懒人码农]，回复关键词“地图”即可下载使用。

  • 全能电子地图下载器

mapDownload.png

  • 个人版地图下载器

map8.png

免安装打开即用

支持地图种类繁多：几乎包含所有主流在线地图，包括不仅限于谷歌、百度、高德、四维、微软、诺基亚、天地图、腾讯、ArcGIS、雅虎等地图，每种地图各有千秋。

下载离线瓦片地图数据源（可以根据自己需求下载地图级别数据源，等级越大数据量越大，下载时间越久）

全能电子地图下载器的操作方法：

  • 菜单栏选择“地图” —— 目前提供多种地图：百度地图、MapABC地图、谷歌普通地图、谷歌卫星图、谷歌混合图、谷歌地形图、腾讯普通地图，腾讯卫星图，腾讯混合图、雅虎中国地图。

  • 左侧栏勾选“地图等级” —— 谷歌地图等级为0-19级，其他地图是3-18级，地形图0-14级，建议下载区域遵循以下原则即可：世界1-4级，中国4-7级，城市8-17级。

  • 选择“下载区域” —— 点击地图左上角选择工具，选择感兴趣的区域， 支持按矩形、不规则多边形、圆形区域，还可以按省/市区域下载。

  • 左侧栏选择“当前视野”或“显示范围”，地图上会框选被选区域。

  • 左侧栏点击“开始”按钮即可下载地图，也可以选择省份下载。

准备工作

搭建部署开发

Vue 脚手架搭建框架

1） 打开命令行窗口，输入 node -v 查看，出现版本号说明已安装成功，如下图：

map1.png

2） 使用以下命令安装Vue

npm install -g @vue/cli
// 安装指定版本
npm install -g @vue/cli@4.5.13
// OR
yarn global add @vue/cli

3）安装完成，检查vue版本，如下图：

vue -V

map2.png

4） vue-cli4 创建项目及运行

vue create mapdemo
cd mapDemo
npm run serve

map3.png

map4.png

在浏览器地址栏输入：http://localhost:8080/

map5.png

引入开源的JavaScript类库包 OpenLayers

map6.png

  • npm 安装 OpenLayers v6.5.0
npm install ol
  • CDN 引入

map7.png

功能设计和代码实现

按照上面的步骤已完成脚手架构建，并把需要的 Openlayers 依赖库引入和安装配置好，准备上刺刀开干。

先来个简单的在线地图实例（参照官方DEMO）

https://openlayers.org/en/latest/doc/quickstart.html

在 main.js 文件中挂载，代码如下：

// 将全局的ol对象挂载到Vue的原型对象上
// 在别的组件中使用 this.$ol
Vue.prototype.$ol = window.ol

在 components 文件夹新建组件demo1.vue文件，代码如下：

<template>
  <div class="page-map">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
export default {
  name: "Demo1",
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      this.map = new this.$ol.Map({
        target: 'map',
        layers: [
          new this.$ol.layer.Tile({
            source: new this.$ol.source.OSM()
          })
          // new this.$ol.layer.Tile({
          //  source: new this.$ol.source.XYZ({
          //    // 在线加载 Mapbox 卫星影像底图
          //    url: 'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=pk.eyJ1Ijoid2FuZ2hhaGExIiwiYSI6ImNqeHUycXF5ZDEweDQzYnBiOTcwZGoxMHAifQ.eCGuiA6erHJ7ew-Fkc7dRA'
          //  })
          // }),
          // new this.$ol.layer.Tile({
          //   source: new this.$ol.source.XYZ({
          //     // 在线加载谷歌卫星底图（需翻墙）
          //     url: 'http://mt2.google.com/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'
          //   })
          // })
        ],
        view: new this.$ol.View({
          center: this.$ol.proj.fromLonLat([121.3431, 25.067]),
          zoom: 4
        })
      });
    }
  }
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 100vh;
}
</style>

效果图如下所示：

  • OpenStreetMap 地图

map9.png

  • 必应卫星影像底图

map11.png

  • MapBox 卫星影像底图

map12.png

  • 谷歌卫星影像底图

map13.png

  • 高德卫星影像底图（与天地图、百度地图效果一样）

map14.png

离线瓦片地图实例
  • MapHelper对象封装（模块化）

在utils文件夹中新建gisHelper.js文件，JS模块化代码实现如下：

// 创建initMap方法，初始化地图
initMap(targetName) {
    // let googleMapLayer = []
    // googleMapLayer = [
    //     this.layers.googleScreenAgeMapLayer
    // ]
    // 实例化Map对象，用于加载地图
    this.map = new ol.Map({
        // 地图容器div的id
        target: targetName,
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([121.3431, 25.067]),
            zoom: 8,
            minZoom: 4,
            maxZoom: 12,
            extent: this.extents.World
        }),
        // 地图控件
        controls: ol.control.defaults({
            attribution: false,
            zoom: false,
            rotate: false
        }).extend([])
    })
}
  • 在components文件夹创建demo2.vue组件并导入模块MapHelper，如下图所示：

map16.png

  • 在APP.vue组件中引入demo2.vue子组件，如下图所示：

map17.png

常用实例详解
  • 鼠标移入要素，箭头变成手型
// 鼠标响应手形变化
this.map.on('pointermove', (e) => {
    let pixel = this.map.getEventPixel(e.originalEvent)
    if (this.map.hasFeatureAtPixel(pixel)) {
        this.map.getTargetElement().style.cursor = 'pointer'
    } else {
        this.map.getTargetElement().style.cursor = ''
    }
})
  • 点击地图任意区域获取经纬度
// 点击地图获取经纬度，或点击要素
this.map.on('click', (e) => {
    console.log(e.pixel)
    let feature = this.map.forEachFeatureAtPixel(e.pixel, (ft) => {
        // 鼠标点击某一个要素后，获取这个要素，执行业务逻辑
        return ft
    })
    console.log(feature);
    if (feature) {
        // this.addUnitDetailPopUp(feature.get('extraData'))
    }
})
  • 设置初始化视角
// 设置视角（中心点）
setView(lngLat) {
    this.map.getView().animate({
        center: ol.proj.fromLonLat(lngLat)
    })
}
  • 设置地图缩放等级
// 设置地图缩放
setZoom(zoomLevel) {
    this.map.getView().animate({
        zoom: zoomLevel
    });
}
  • 点击获取经纬度或选中要素
// 点击地图获取经纬度
this.map.on('click', (e) => {
    let lngLat = ol.proj.toLonLat(e.coordinate), // 点击获取经纬度
    feature = this.map.forEachFeatureAtPixel(e.pixel, (ft) => {
        // forEachFeatureAtPixel()方法获取选中要素
        return ft;
    })
})
  • 指定经纬度显示要素标记点
// 地图上显示要素标记点
addFeatureMarker(arr) {
    let features = [];
    arr.forEach((e) => {
        let feature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([e.longitudeX, e.latitudeY])),
        })

        feature.setStyle(new ol.style.Style({
            image: new ol.style.Icon({
                src: e.imgPath,
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                anchorOrigin: 'top-right',
                offsetOrigin: 'top-right',
                anchor: [0.5, 60]

            }),
            text: new ol.style.Text({
                text: e.name,
                textAlign: 'center',
                textBaseline: 'middle',
                font: "normal 13px sans-serif",
                padding: [3, 8, 3, 8],
                backgroundFill: new ol.style.Fill({
                    color: 'rgba(218, 77, 81, .2)',
                }),
                fill: new ol.style.Fill({
                    color: '#fff',
                })
            }),
        }))
        feature.set("extraData", e);
        features.push(feature);
    })
    this.featureSource.addFeatures(features);
}
  • 点击要素显示气泡弹框
// 显示气泡弹框PopUp
addDialogPopUp(item) {
    let lngLat = [item.longitudeX, item.latitudeY];
    this.removeOverlayPopUp();
    this.dialogOverlay = new ol.Overlay({
        element: this.createDialogDom(item),
        position: ol.proj.fromLonLat(lngLat),
        autoPan: true,
        positioning: 'bottom-left',
        offset: [50, -50]
    })
    this.map.addOverlay(this.dialogOverlay);
}

map18.png

  • 绘制圆形大小及样式
setCircle(location, size) {
    let circle = new ol.geom.Circle(ol.proj.transform(location, 'EPSG:4326', 'EPSG:3857'), size);
    this.circleFeature = new ol.Feature(circle);
    this.circleFeature.setStyle(
        new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, .2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 1
            })
        })
    );
    this.circleSource.addFeature(this.circleFeature);
}
  • 绘制线条带箭头
// 设置线条带箭头
setLineString(location) {
    let line = new ol.geom.LineString([ol.proj.fromLonLat(this.posCenter), location]);
    this.lineFeature = new ol.Feature(line);
    let geometry = this.lineFeature.getGeometry(),
    sta = geometry.flatCoordinates.slice(-4),
    dx = sta[2] - sta[0],
    dy = sta[3] - sta[1],
    rotation = Math.atan2(dy, dx), // 获取线段的角度（弧度）
    arrowLonLat = [sta[2], sta[3]];
    this.lineFeature.setStyle([
        new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, .2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                lineDash: [1, 2, 3, 4, 5, 6],
                width: 3
            })
        }),
        new ol.style.Style({
            geometry: new ol.geom.Point(arrowLonLat),
            image: new ol.style.Icon({
                src: require('../assets/arrow.png'),
                anchor: [0.75, 0.5], // 图标锚点
                rotateWithView: true, // 与地图视图一起旋转
                rotation: -rotation // 因为角度以顺时针旋转为正值，所以前面添加负号
            })
        })

    ]);
    this.lineSource.addFeature(this.lineFeature);
}

map19.png

写在最后

这次分享的内容写得比较仓促，涉及知识面不是很广，毕竟小编词库有限。看到这里相信小伙伴们，对WebGIS开发都有所了解，赶快动手操作一波吧。

如果这篇文章对你有一丝帮助，可以点赞、评论、转发分享，也是对我的一种支持，万分感谢。如需获取更多实战项目经验或源码资源，请关注公众号：「懒人码农」，回复关键词“地图”即可下载本资源，也可以加我微信【lazycode520】，一起学习一起进步。

学习资料

懒人码农
关注
  • 10
    点赞
  • 踩
  • 75
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
WebGIS开发基础（Web技术和地理信息系统（GIS））
m0_65890371的博客
07-01 931
WebGIS开发基础包括前端开发、地图服务、空间数据库和后端开发。地图服务提供地理数据的加载和显示功能，包括瓦片地图服务和矢量地图服务。空间数据库用于存储和管理地理数据，并提供空间查询和分析功能。在原力计划中，WebGIS开发基础包括以下几个方面的内容：前端开发、地图服务、空间数据库和后端开发。瓦片地图服务：将地图切割成一系列小块（瓦片），通过HTTP协议提供给客户端，实现地图显示。地图服务是WebGIS的核心组成部分，提供地理数据的存储、管理和发布功能。常见的地图服务包括瓦片地图服务和矢量地图服务。
前端切图工具
06-29
很好用的切图工具，建议大家都用一下提升效率，我平时很喜欢用这个
【JS】基于vue的WebGIS开发与入门案例
Frank学习路上的博客
03-06 3533
webgis开发入门
可视化大屏前端开发：GIS开发技术栈
2401_82881178的博客
02-20 840
GIS开发（Geographic Information System Development）指的是开发地理信息系统的过程，地理信息系统是一种用于收集、管理、分析和展示空间数据的软件系统。GIS开发涉及到多个领域，包括地理信息科学、计算机科学、地图制图、数据库管理、数据分析等。
前端开发中如何实现WebGIS数据可视化（一）——地图创建、点位绘制
清音残月
07-17 1万+
前言 随着前端开发趋于复杂化，地图（Gis）已经成为大多数系统必不可少的一部分，从最常见的 Gis 可视化（点、线、面、各种弹框、插值）到三维模型、场景模拟、场景监控等。主流的智慧园区、智慧城市、数字孪生等基本都离不开 webGis 的开发。 通过这篇文章，能够有这些收获： 了解常见的 webGis 的实现方式 通过 leaflet、cesium、mapBox 创建地图 在 leaflet、cesium、mapBox 通过不同方式绘制 Marker 文章中相关代码均已提交到 github，欢迎 star
网页切图的CSS和布局经验与要点
09-25
主要介绍了网页切图的CSS和布局经验与要点,本文总结了实际操作中的7个要点和经验,需要的朋友可以参考下
分享五个前端WebGis地图框架（优缺点以及该如何选择）附地址
左本Web3D
05-26 6124
如何选择一个合适的前端GIS框架时，需要考虑以下几点：1，功能和特性前端GIS框架的主要目的是在 Web 环境下使用，以可视化地理数据。需要考虑所需功能和特性，例如应用需不需要数据编辑、地图标注、3D 可视化、如何实现用户交互、地图数据源等问题。在需求分析后，可以选取正在满足应用特性并具有扩展性的GIS框架。2，学习曲线和可维护性框架的学习曲线和可维护性也是选择前端GIS框架的重要考虑因素。一些GIS框架可能比其他框架更易上手，如Leaflet与OpenLayers比较；
WebGIS开发基础
leva的博客
06-10 1992
HTTP协议是基于客户器/服务器架构的信息分布方式，原意为“请求-响应模型”，即将包含信息等网页文档存放在Web服务器上，客户端以Web浏览器为媒介，通过程序向Web服务器发出请求并访问相应的Web网页。基于B/S架构的Web应用，将Web应用程序安装部署在服务器端，客户端直接通过Web浏览器访问，如网络上常见的门户网站、论坛、商城等。（3）数据访问层（DAL）：该层主要是数据库的操作，主要负责数据库的访问，实现对数据表的选择、插入、更新、删除操作，同样可以使用基于Web S ervice的服务模式实现。
前端常用的地图框架（webGIS）
weixin_45311714的博客
03-02 3930
是较为学院派的前端地图库，它是ArcGIS开发套件中的一部分，和桌面端和服务器端ArcGIS软件有较好的协作。是目前最新潮的前端地图库，它的矢量压缩、动态样式和三维性能令人印象深刻。它本身是开源的，但一般依赖于Mapbox公司提供的底图服务。是三维地图，它们依赖百度地图提供的后台服务。是三维地理可视化的常用库，在大尺度的可视化（地形、建筑、地球）中十分常用。也是常用的前端地图库，它开源，相比于Leaflet更加复杂和完备。是最著名的前端地图可视化库，它开源、体积小、结构清晰、简单易用。在境外有更好的数据。
GIS前端-地图事件编程
leva的博客
09-14 361
其实，所有事件调用的方法都是相似的，复杂的事件可以被看成多个简单事件的组合。Leaflet的地图事件主要有以下几类：图层操作事件、地图状态事件、交互事件和弹出框事件。对Leaflet的地图控件、地图操作和地图事件有了一定程度的了解，结合丰富的实例读者也会掌握各个基础功能的具体实现方法。在地图上的一切操作均要采用地图事件机制来实现，即通过鼠标、键盘等交互，触发地图相关事件，进而调用相关功能接口函数实现相应的GIS功能。弹出框事件，即某种行为触发的弹出框行为事件，常见的弹出框事件及其说明。
提升前端GIS开发技能：深入了解5个热门地图框架
前端程序员、项目经理、人工智能博主
07-02 1830
地理信息系统（GIS）已经成为现代应用开发中不可或缺的一部分，尤其在前端开发中。随着Web技术的快速发展，许多强大而灵活的GIS框架涌现出来，为开发人员提供了丰富的工具和功能，使他们能够创建交互式、高性能的地图应用。本文将介绍一些前端GIS流行框架，帮助读者选择适合自己项目需求的框架，开启探索地图世界的旅程。在前端GIS开发中，选择适合自己项目需求的框架至关重要。
前端AI切图小技巧(心得)
09-22
下面小编就为大家带来一篇前端AI切图小技巧(心得)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端切图-photoshop界面设置.pdf
10-27
前端切图-photoshop界面设置.pdf
2-1 前端开发内容介绍.mp4
04-11
组件方式开发 Web App全站\第02章 前端开发简介及标注与切图
《循序渐进Vue.js3前端开发实战》实战范例.zip
最新发布
04-18
前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。 前端开发从网页制作演变而来，名称上有很明显的...
2-4 切图（一）.mp4
04-11
组件方式开发 Web App全站\第02章 前端开发简介及标注与切图
（上）Vue+Echarts构建可视化大数据平台实战项目分享（附源码）
热门推荐
qq_15041931的博客
05-08 1万+
分享之前我们先来普及一下什么是数据可视化？数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。数据可视化通俗来说就是：数据的展示、处理和分析。目的是借助于图形化手段，清晰有效地传达与沟通信息。那前端数据可视化又是什么呢？前端数据可视化其实就是利用前端表现层的手段，以前端手段展示、处理和分析数据。
NodeJS全栈开发一个功能完善的Express项目（附完整源码）
qq_15041931的博客
06-24 1万+
Node.js对前端来说无疑具有里程碑意义，与其越来越流行的今天，掌握 Node.js 技术已经不仅仅是加分项，而是前端攻城师们必须要掌握的一项技能。而 Express 基于 Node.js 平台，快速、开放、极简的 Web 开发框架，成为 Node.js 最流行的框架，所以使用 Express 进行 web 服务端的开发是个不错且可信赖的选择。但是 Express 初始化后，并不马上就是一个开箱即用，各种功能完善的 web 服务端项目，例如：MySQL 连接、jwt-token 认证、md5 加密、中间件
超详细 React Native 入坑使用指南，我在元宇宙等你
qq_15041931的博客
12-19 8068
前言 大家好，我是虚竹，今天给大家分享一下我是如何快速通关打怪搭建 React Native 跨端开发环境，并使用大家非常熟悉的开发工具 VSCode 来编写丝滑般的代码。编写丝滑般代码会再下一篇输出，包括项目实战经验总结和踩坑，如目录架构、函数式编程、React Hook 灵活运用、常见场景、开发调试、发布部署、踩坑、性能优化等等。 之前因为在我的技术群，收到群友@我，问能否出一个保姆级 React Native 搭建开发环境的教程，我说照着官方文档步骤操作即可。可惜事与愿违没那么顺利，流程上繁琐不够清晰
地理信息系统（GIS）开发工程师要学习哪些知识
07-09
作为地理信息系统（GIS）开发工程师，你需要学习以下知识： 1. 编程语言：首先，你需要掌握C++编程语言作为主要开发语言。此外，了解其他编程语言如Python、Java等也会有所帮助。 2. 数据结构与算法：掌握常见的数据结构和算法，例如数组、链表、树、图等，以及排序、搜索、图算法等。 3. 地理空间概念：了解地理空间概念和地图投影，熟悉地理坐标系统、地理数据类型和地图数据结构等。 4. GIS软件和工具：熟悉常用的GIS软件和工具，例如ArcGIS、QGIS等，了解其功能和使用方法。 5. 数据库管理：了解数据库的基本概念和SQL语言，熟悉常见的数据库管理系统如MySQL、Oracle等，能够进行数据的存储和查询。 6. 空间数据处理：掌握空间数据的处理和分析技术，包括空间查询、空间分析、空间插值等。 7. Web开发技术：熟悉前端开发技术如HTML、CSS、JavaScript等，了解Web地图开发框架如Leaflet、OpenLayers等。 8. 算法与模型：理解常见的地理空间算法和模型，如地图投影转换、点线面拓扑关系分析、地理网络分析等。 9. 软件工程与设计模式：了解软件工程原理和设计模式，掌握良好的代码设计、编写和调试技巧。 10. GIS行业知识：了解GIS行业的发展动态、标准和规范，了解应用领域如城市规划、环境保护、农业等。 以上是地理信息系统（GIS）开发工程师需要学习的一些基本知识，通过不断学习和实践，不断提升自己的技能和能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值