开源WebGIS开发——如何创建一张地图

一、创建一张地图分为五个步骤

1、下载openlayers开发包

2、创建一个HTML网页并引入openlayers（包括css样式和js文件）

3、创建图层对象，引入地图资源 ol.Layer

（引入OSM地图资源）

4、创建一张地图，用来添加图像对象 ol.Map

5、创建一个视图，用来定义地图的显示范围 ol.View

二、代码及结果展示（以展示OSM为例）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一张地图</title><link rel="stylesheet" href="./ol.css"><style>     html,body{width: 100%;    height: 100%;} .map{width: 80%;height: 80%;border: black;border-style:double;margin: auto;           margin-top: 10px;}</style>
</head>
<body><div class="map" id="map"></div><script src="./ol.js"></script><script>var osmLayer = new ol.layer.Tile({//openstreetmap 瓦片图层  vector 矢量 OSM为墨卡托坐标（投影坐标）source:new ol.source.OSM()});//116.399669 39.921354（北京中心经纬度）var beijing = ol.proj.transform([116.399669,39.921354],"EPSG:4326","EPSG:3857"); //将经纬度坐标转为投影坐标console.log(beijing);var view = new ol.View({center:beijing,zoom:8  //初始缩放})var map = new ol.Map({target:"map",layers:[osmLayer],view:view});</script>
</body>
</html>

开源WebGIS开发——如何创建一张地图相关推荐

【“零起点”--百度地图手机SDK】如何创建一张地图
摘要:完全零基础入门篇~~本文是安卓SDK的入门篇,从头开始教大家如何创建一张安卓手机版的百度地图. ------------------------------------------------- ...
GIS开发/WebGIS开发零基础入门：地图域当前信息（附代码）
示例功能该示例底图显示一个天地图世界地图,实现显示地图域当前信息功能. 示例实现本示例需要使用 [include-openlayers-local.js] ,通过 ol.view( ...
开源Webgis开发1——环境配置
一.geoserver安装与配置 1.安装Java,我安装的版本1.8.0 (1)Java安装与环境配置参考:java的安装环境配置详细步骤 - 高软玩家 - 博客园 (2)环境配置完成后输入java ...
开源WebGIS开发2——开发环境（IntelliJ IDEA）
1.下载网址:Other Versions - IntelliJ IDEA 选择对应版本下载,推荐.exe下载 2.安装过程和配置参考博客:IntelliJ IDEA 下载安装配置教程(完整版)_爱思 ...
开源地图服务器网站,开源WebGIS：地图发布与地图服务
开源WebGIS:地图发布与地图服务语音编辑锁定讨论上传视频上传视频本词条缺少信息栏.概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! <开源WebGIS:地图发布与 ...
webgis从基础到开发实践_开源WebGIS教程系列——11.1 GISLite 的开发背景与设计
地理信息门户可以帮助人们更容易地发现.访问和使用地理空间信息, 是地理信息发布.服务和共享的重要环节.许多国家都很重视地理信息门户的建设,把它作为国家空间数据基础设施(spatial data in ...
WebGIS开发四大开源框架对比
目录四个不同的框架的对比: 二维地图框架与GIS的关系前端地图框架: WebGIS二维地图框架: Layer图层分为三大类: 之前给大家介绍了webgis常用的地图框架,点这里回顾一下. 本篇文章 ...
【WebGIS全栈】从0到1开发整站——旅游足迹地图网站
介绍本专栏起初定位群体为初学者,目标是认识 WebGIS,以及快速上手 WebGIS 前端开发,Demo 也是比较基础的,为了能进阶学习,现在计划提升一下Demo的难度,开发一个完整的足迹网站. 专 ...
QT软件开发: 使用QImage创建一张空图片
使用QImage创建一张指定大小.指定颜色的图片: QImage img(100,100,QImage::Format_RGB888); img.fill(QColor(Qt::black)); i ...

开源WebGIS开发——如何创建一张地图

开源WebGIS开发——如何创建一张地图相关推荐

最新文章

热门文章