openlayers-1 下载及安装使用
javascript - Import from in Openlayers - Geographic Information Systems Stack Exchange
在浏览器中运行开放层示例
提供的示例无法在客户端（在浏览器上）运行。让我们看一个例子。
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenStreepMap layer using OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="index.js"></script>
</body>
</html>
索引.js
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
要在浏览器上运行这个非常简单的示例，您必须进行手动更改。
修改的文件
这些是相同的文件，具有在客户端上运行所需的更改：
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenStreepMap layer using OpenLayers</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="index.js"></script>
</body>
</html>
索引.js
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 0
})
});openlayers-1 下载及安装使用的更多相关文章
- UE4新手引导之下载和安装虚幻4游戏引擎
1) 进入虚幻4的官方主页(https://www.unrealengine.com/) 这里你可以获得关于虚幻4的最新资讯,包括版本更新.博客更新.新闻和商城等.自2015年起,该引擎已经提供免费下 ...
- git-2.10.2-64-bit介绍&&git下载&&git安装教程
Git介绍 分布式:Git系统是一个分布式的系统,是用来保存工程源代码历史状态的命令行工具. 保存点:Git的保存点可以追踪源码中的文件, 并能得到某一个时间点上的整个工程项目的状态:可以在该保存点将 ...
- JDK下载、安装、配置环境变量笔记
自己总是在下载.安装.配置JDK的环境变量,但是这些需要的专业知识并不难,但有很多细节很重要,总是记不住,而且这些细节一旦出错影响还是很严重的,在网上查到的信息很多都比较零散,而且讲解得也不是很详细, ...
- my SQL下载安装，环境配置，以及密码忘记的解决，以及navicat for mysql下载，安装，测试连接
一.下载 在百度上搜索"mysql-5.6.24-winx64下载" 二.安装 选择安装路径,我的路径“C:\Soft\mysql-5.6.24-winx64” 三.环境配置 计算 ...
- 如何下载和安装CocoaPods
朋友自己学习了一段时间就去公司实习了去了之后公司用的是CocoaPods,他一脸茫然的向我求助,我这才想起来写着一遍为了帮助更多的朋友 CocoaPods是什么? 当你开发iOS应用时,会经常使用到很 ...
- CocoaPods介绍。如何安装Ruby环境，如何下载和安装CocoaPods？
CocoaPods介绍? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其 ...
- freeCAD下载与安装
官方安装: freeCAD稳定版 freeCAD官方提供了几个稳定版本供开发者使用: Windows (XP, Vista and 7, 32 and 64bits), Mac OS X (Lion ...
- Android中下载、安装和卸载（原）
应用场景:在检查版本更新的时候经常需要从服务器端下载然后安装到手机中 使用工具: XUtils,这个开源的框架真的是需要花大把时间去阅读和理解的,十分有用的,on the way ! fighting ...
- MySQL下载、安装及启动
介绍 Mysql是最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的RDBMS(Relational Database Management System:关系数据库管理系统)应用软件之 ...
- MongoDB的下载与安装
MongoDB的下载与安装 一.简介 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案.MongoDB 是一个介于关系 ...
随机推荐
- windows远程桌面之前用于连接到xxx的凭据无法工作
使用windows远程桌面连接时报错提示: 之前用于连接到xxx的凭据无法工作 确认输入的用户名密码没有问题 解决方法: 打开gpedit.msc组策略管理,依次找到 计算机配置 > windo ...
- safari iframe 滚动问题（iframe--- iphone中的iframe没有滚动，要设置滚动;）
_::-webkit-full-page-media, _:future, :root #frameBody>.frame-pnl{ overflow:auto; -webkit-overflo ...
- OV5640数据的解码
为了配合开发板的使用,笔者搞了一个OV5640的摄像头模组,OV5640具体的相关手册及资料网上已经很多,感兴趣的都可以自行去查找,基本大同小异.这里也不把OV5640初始化的代码贴出来,因为就是简单 ...
- 【运维】解决composer update出现的Discard changes [y,n,v,d,s,?]的问题
在PHP项目中,composer是一个使用非常普遍的包管理工具,在本地开发的时候出现了这个问题一搬来说问题不大,可以人为进行输入交互,但是如果是自动化发布中出现,就会等待输入导致卡住,是一个需要解决的 ...
- Plus 3.0 (ThinkSNS+)centos8.5+php7.4在阿里云部署过程
参考:https://zhiyicx.github.io/ts-api-docs/guide/installation/using-nginx-and-fpm-publish-website.html ...
- Mac 安装nvm
根据命令安装 nvm: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 当前窗口执行nv ...
- 测试 SqlServer 数据库连接的简单办法
1.创建一个文件, 命名为"dba.udl". #保证后缀是.udl即可 2.双击它: 3.输入数据库地址"xxx.xxx.xxx.xxx,端口号&qu ...
- MySQL Delete 表数据后，磁盘空间并未释放，为什么?
有开发小哥咨询了一个问题,记录一下处理过程分享给有需要的朋友.问题如下:MySQL数据库中有几张表增删比较频繁.数据变动剧烈且数据量大,导致数据增长过快,磁盘占用多.为了节约成本,定期进行数据备份,并 ...
- 安装.msi格式安装包
msi格式的文件,点右键后,没有"以管理员身份运行"的菜单项,直接运行.msi文件报错:"There is a problem with this Windows Ins ...
- C/C++/中宏特殊字符的含义及用法总结（“#”、“##”、"#@"、“\”等等）
在C/C++中,宏定义是由define完成的,宏定义中有几种常见的特殊字符需要我们了解,常用的特殊字符有以下几种: #:在宏展开的时候会将#后面的参数替换成字符串: 字符串化##:将前后两个的单词拼接 ...