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 是一个介于关系 ...
随机推荐
- npm vue-router安装报错
因为2022年2月7日以后,vue-router的默认版本,为4版本,而且 vue-router4,只能在vue3中,只有vue-router3中,能用在vue 2中 如果把vue-router4强制 ...
- 【记录】 iSCSI服务器的搭建与使用[Debian]
序言 更换系统后需要一个网络文件存储用于备份文件,本想用NFS多方便,但是timeshift不支持网络存储,备份路径必须是一个块存储设备, 但是你还必须分好文件系统,这不是多此一举???反正我只用rs ...
- python快速制作可视化报表
- Java Swing 防止键入手Key 的实现方法
实现思路,启动一个线程每隔0.1秒去比较文本里字符长度变化,如果文本变长了,这个情况间隔时间超过2秒,则认为是人工键入. 对于字符串较多,且包含数字和字母的情况,比较适用. class KeyCode ...
- 虚拟机中Linux分区扩容
打开Virtualbox所在的安装目录,执行以下命令,命令中的虚拟有磁盘路径改成自己的: 调整容量前,先关闭虚拟机.接着,打开CMD,进入VirtualBox的安装目录,执行VBoxManage li ...
- eclipse和sts的版本对应
https://blog.51cto.com/9534366/2340508 http://www.mamicode.com/info-detail-2298022.html https://gith ...
- COM 对象的利用与挖掘4
作者:Joey@天玄安全实验室 前言 本文在FireEye的研究Hunting COM Objects[1]的基础上,讲述COM对象在IE漏洞.shellcode和Office宏中的利用方式以及如何挖 ...
- Hystrix-Dashboard可视化
Hystrix-Dashboard可视化 1.新建子项目引pom.xml <dependencies> <!--hystrix dashboard--> <depende ...
- linux kali 报错Intel VT-x
报错原因:第一次安装虚拟机intel vt-x 处于禁用状态,没有启用 分析思路:找到 Intel vt - x 位置,并打开 .(intel - x在bios) 解决方法: 联想笔记本为例:进入bi ...
- SpringBoot2.2.2+SpringCloud-Hoxton.SR1整合eureka/gateway
1.最近在学习SpringCloud分布式项目的知识,所以打算把自己学习到的知识也记录下来,为什么选择学习SpringCloud呢?因为分布式框架还有dubbo,如下图应该可以成为我为什么想学习Spr ...