3天学会WebGIS开发-从入门到精通
关注
分享
扫一扫
文章平均质量分 57
本专栏主要分享WebGIS开发技能需要掌握的学习内容、学习工具、学习方法等。本专栏由中地数码一线工程师研发，适用于WebGIS开发小白、GIS专业学生以及任何对GIS开发感兴趣的人群。
专栏内容包括GIS开发基础知识、开发环境搭建、Web开发基础、WebGIS开发、开发实战案例等内容。
GIS开发特训营
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
3天学会WebGIS开发——从入门到精通（文章链接汇总）
第一章 概述第1节-什么是GIS开发第2节-WebGIS开发第3节-如何学习WebGIS开发第4节-GIS平台第5节-术语与名词第二章-开发环境搭建第1节-开发软件第2节-高德开放平台第三章-web开发篇第1节-HTML快速入门第2节-CSS快速入门第3节-JavaScript快速入门第四章-WebGIS开发第1节-开发准备第2节-地图显示第3节-地图控件第4节-点标记第5节-几何计算第6节-GeoJSON第五章-实战案例第原创 2022-03-21 16:31:18 · 14546 阅读 · 3 评论
-
第四章WebGIS开发——第6节-GeoJSON
1. 什么是GeoJSONGeoJSON是一种保存地理信息数据的格式GeoJSON主要包括两个部分几何信息 自定义属性1) 几何信息"geometry": { "type": "Point", "coordinates": [125.6, 10.1]},type: 几何类型: 可以是点线面 coordinates: 坐标, 构造几何的经纬度坐标2) 自定义属性"properties": { "name": "Dinagat Islands"}原创 2022-03-24 11:46:32 · 2472 阅读 · 0 评论 -
第四章WebGIS开发——第5节-几何计算
有时, 我们需要计算两点之间的直线距离, 或者一个区域的实际面积.这个就是几何计算示例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content=原创 2022-03-24 11:41:26 · 473 阅读 · 0 评论 -
第四章WebGIS开发——第4节-点标记
1. 地图事件对于地图而言, 当点击地图时, 会触发一个地图的点击事件. 进而会调用对应的事件处理函数在事件处理函数中, 可以获取事件对象, 事件对象包括了很多信息, 其中最主要的就是经纬度1)示例map.on('click', function (event) { // console.log(event) console.log(`经度: ${event.lnglat.lng}, 纬度: ${event.lnglat.lat}`)})2. 点标记当点击地图时, 我原创 2022-03-21 15:53:53 · 1316 阅读 · 0 评论 -
第四章WebGIS开发——第3节-地图控件
1. 什么是地图控件地图控件就是可以用来控件地图显示的工具2. 常见的地图控件常见的地图控件有缩放控件 旋转控件 比例尺 鹰眼3. 使用步骤在高德API中, 控件通常以插件的形式做为扩展.使用步骤如下:使用插件 实例化插件对象 添加到地图4. 示例AMap.plugin( [ 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye',原创 2022-03-21 15:50:28 · 1770 阅读 · 0 评论 -
第四章WebGIS开发——第2节-地图显示
地图显示是GIS开发的第一步.首先我们需要通过代码, 将地图显示出来, 后续所有的操作都是基于这个底图进行的。1. 步骤引入对应资源文件 创建地图容器 加载地图2. 示例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /&原创 2022-03-21 15:40:36 · 2529 阅读 · 0 评论 -
第四章WebGIS开发——第1节-开发准备
使用高德开放平台, 只需要做一些非常简单的配置即可。在学习高德API时, 最好的方式就是阅读参考官方文档概述-地图 JS API v2.0 | 高德地图API本节, 我们先完成基本的开发准备<script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode:'您申请的安全密钥', }</script><script type="text/ja原创 2022-03-21 15:36:39 · 2923 阅读 · 0 评论 -
第三章Web开发篇——第3节-JavaScript快速入门
1. 什么是JavaScriptJavaScript是一种编程语言变量 函数 数组/对象 事件原创 2022-03-21 15:26:02 · 1534 阅读 · 0 评论 -
第三章Web开发篇——第2节-CSS快速入门
1 CSS的基本概念1) 什么是CSSCSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表2) CSS的作用CSS的作用就是用来规定每个HTML元素表现的样子, 比如字体的大小 颜色 摆放位置3) CSS的核心语法CSS两步走选元素 改属性语法<head><style> 选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性原创 2022-03-21 15:23:15 · 802 阅读 · 0 评论 -
第三章Web开发篇——第1节-HTML快速入门
1 什么是HTMLHTML(Hyper Text Markup Language): 超文本标记语言2 HTML的组成HTML 由一系列的 元素 elements 组成, 在元素中包含 属性（Attribute）1) 元素示例<p>我的猫咪脾气爆:)</p>2) 属性元素中可以包含属性示例<p class="editor-note">我的猫咪脾气爆:)</p>在有些教程里不分元素和标签, 都是混用的. 但..原创 2022-03-21 15:18:48 · 1669 阅读 · 0 评论 -
第二章开发环境搭建——第2节-高德开放平台
1. 注册账号如果要使用高德的开放平台, 我们需要先注册一个账号, 成为开发者在高德API首页, 点击注册2. 创建应用然后, 我们创建一个应用. 创建应用后, 需要添加一个Key做为开发的身份认证1) 登录登录后进入控制台2) 创建应用在控制台, 选择: 应用管理->我的应用->创建新应用填写应用名称和类型添加一个Key...原创 2022-03-21 15:11:09 · 2804 阅读 · 0 评论 -
第二章开发环境搭建——第1节-开发软件
1. VSCode1) 安装我们写代码需要安装代码编辑工具, 目前比较好用的推荐VSCode, 免费而功能强大官网地址Visual Studio Code - Code Editing. Redefined安装过程运行安装包VSCodeSetup-x64-1.65.2.exe2) 配置安装live server插件, 实现热更新2. 浏览器做为代码的运行和测试环境, 我们需要安装一个浏览器, 这里推荐大家使用chrome Firefox..原创 2022-03-21 15:05:57 · 2464 阅读 · 0 评论 -
第一章第5节-术语与名词
1. 整体框架为了方便开发, 我们先从整体框架层面对webGIS做一个介绍1) 地图的组成以高德地图为例, 我们先了解一下地图的组成底图(Map): 所有信息的载体 图层(Layer): 将不同地理信息分类形成的一个集合 要素(Feature): 表示不同的地物 几何(Geometry): 信息的数据模型和抽象2) 地图容器 Container地图容器 Container即在准备阶段所创建的指定了id的div对象，这个div将作为承载所有图层、点标记、矢量图形、控件的原创 2022-03-21 15:02:23 · 1672 阅读 · 0 评论 -
第一章第4节-GIS平台
1. 基础平台1) 什么是基础平台基础平台, 也称系统平台, 提供全面的开发支持, 为专业应用方向提供基础设施.类似于手机里的AndroidIOS系统常见的基础平台有MapGIS ArcGIS SuperMap2) 基础平台的作用开发者可以基于基础平台, 开发定制专业应用.比如:自然资源应用 地质矿产应用 农林应用 城市规划应用 交通物流应用2. 应用平台有些应用方向也会提供自己的平台. 比如, 地图导航应用高德开放平台 百度地图开放平台这些平原创 2022-03-21 15:00:35 · 2624 阅读 · 0 评论 -
第一章第3节-如何学习webGIS开发
1. 开发难不难大家最关心的一个问题, 可能就是webGIS开发难不难, 自己能不能学会首先, 做任何事都会有一些难度和挑战. 但是也没有大家想像中的那么难.最重要的是有好的学习方法和学习心态2. 学习方法提到学习方法, 不得不给大家提一个人----斯科特·杨(scott)他用一年的时间学完了MIT(麻省理工)四年的计算机课程, 而且每天只学习不超过2个小时.那么, 他是怎么做到的呢? 这里, 我结合他的思想和多年的教学经验, 总结了几点整体性学习 建立联系原创 2022-03-21 14:59:13 · 3094 阅读 · 0 评论 -
第一章第2节-WebGIS开发
1. 什么是webGIS开发webGIS: 将前端可视化技术与GIS技术结合, 提供更好的信息展示和用户交互近年来, 前端技术日新月异, 突飞猛进, 发展十分迅速尤其是以canvas和webGL为代表的前端可视化技术不断完善.实现了很多酷炫的效果 提供了良好的用户交互web前端技术和GIS技术深度融合, 涌现出了大量优秀的框架, 如处理二维GIS的openlayersMapBox leaflet 处理三维GIS的cesium框架的出现, 为开发者提供了极大的便利.同时,原创 2022-03-21 14:57:16 · 6458 阅读 · 2 评论 -
第一章第1节-什么是GIS开发
1. 什么是GIS要了解GIS开发, 首先我们要知道什么是GISGIS: Geographic Information System 地理信息系统地理信息系统（GIS，Geographic Information System）是一门综合性学科结合了地理学与地图学以及遥感和计算机科学详细内容参考: 百度百科地理信息系统（空间信息系统）_百度百科2 GIS开发前景地理信息产业是国家战略新兴产业，发展前景广阔！从上面的短视频中, 我们了解到GIS的应用是非常广泛的. 随着原创 2022-03-21 14:54:26 · 11269 阅读 · 0 评论