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 是一个介于关系 ...
随机推荐
- 【Hive】元数据库部署的三种方式和选择【metaStore server】
一.Derby 元数据使用之前,要在hive目录下执行schematool命令,进行初始化设置 bin/schematool -dbType derby -initSchema 启动hive后,可以用 ...
- 最小化安装debian10&gnome最小化安装
直到后面配置网络源之前都是断网安装,因为debian security好像总是要去总源找点东西,所以即便你选择国内源甚至不选择网络源安装,依然会莫名 的失败. I. 最小化安装debian10(用ro ...
- [js函数] storageManager
import _get from 'lodash.get'; import _set from 'lodash.set'; import _debounce from 'lodash.debounce ...
- jmeter使用Java开发自定义函数
一.前置条件(对jmeter进行二次开发) 本篇通过抽象类AbstractFunction来实现: 1.JMeter提供了接口给用户进行二次开发,其中接口可通过引入 ApacheJMeter_comp ...
- 第12周 预习、实验与作业:Java并发编程
以前你编写的Java程序同时能做几件事情?有几个执行流程?main方法执行完,整个程序一定会退出吗? 最多只能做一件事 函数按着顺序执行,函数内按着语句执行.可以有多个可以有一个. 不一定.因为Mai ...
- pytest_runtest_makereport 获取pytest的测试结果和caseid
目的: 自动获取pytest case执行结果和caseid 存为变量,后续可以和case管理工具集成 @pytest.hookimpl(hookwrapper=True, tryfirst=True ...
- office365启动突然提示注册表错误,无法打开“规则”配置的解决方案
感觉目前网上的资料,暂无清晰的解答,根据现象分析是outlook的原始邮件文件即psd文件中的规则相关字段存在问题,导致outlook无法打开. 因此网上的各种答疑如重装,调整注册表等等措施都是无效的 ...
- C语言学习--文件操作--文件流指针--打开文件
当打开一个文件时, 系统会返回一个结构体, 这个结构体有对此文件操作的所有信息 调用fopen时,系统返回这个结构体的地址 FILE *p = fopen("a.txt") 打开一 ...
- mysql主从备份双机热备实现方法
1.环境准备 主服务器(master):192.168.1.1 从服务器(slave):192.168.1.2 要求主从服务器mysql版本相同且大于3.23 2.主服务器 2.1创建同步用户 cre ...
- node.js 新手快速入门
我当初学的时候,是在大大们的指导下开始学习的,用了3天搞定大大们给的任务.下面我就把这个经历分享出来,让大家借鉴一下.欢迎吐槽~~ 任务如下: 根据Node js 开发入门教程第五章的一个使用node ...