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 下载及安装使用的更多相关文章

  1. UE4新手引导之下载和安装虚幻4游戏引擎

    1) 进入虚幻4的官方主页(https://www.unrealengine.com/) 这里你可以获得关于虚幻4的最新资讯,包括版本更新.博客更新.新闻和商城等.自2015年起,该引擎已经提供免费下 ...

  2. git-2.10.2-64-bit介绍&&git下载&&git安装教程

    Git介绍 分布式:Git系统是一个分布式的系统,是用来保存工程源代码历史状态的命令行工具. 保存点:Git的保存点可以追踪源码中的文件, 并能得到某一个时间点上的整个工程项目的状态:可以在该保存点将 ...

  3. JDK下载、安装、配置环境变量笔记

    自己总是在下载.安装.配置JDK的环境变量,但是这些需要的专业知识并不难,但有很多细节很重要,总是记不住,而且这些细节一旦出错影响还是很严重的,在网上查到的信息很多都比较零散,而且讲解得也不是很详细, ...

  4. my SQL下载安装,环境配置,以及密码忘记的解决,以及navicat for mysql下载,安装,测试连接

    一.下载 在百度上搜索"mysql-5.6.24-winx64下载" 二.安装 选择安装路径,我的路径“C:\Soft\mysql-5.6.24-winx64” 三.环境配置 计算 ...

  5. 如何下载和安装CocoaPods

    朋友自己学习了一段时间就去公司实习了去了之后公司用的是CocoaPods,他一脸茫然的向我求助,我这才想起来写着一遍为了帮助更多的朋友 CocoaPods是什么? 当你开发iOS应用时,会经常使用到很 ...

  6. CocoaPods介绍。如何安装Ruby环境,如何下载和安装CocoaPods?

    CocoaPods介绍? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其 ...

  7. freeCAD下载与安装

    官方安装: freeCAD稳定版 freeCAD官方提供了几个稳定版本供开发者使用: Windows (XP, Vista and 7, 32 and 64bits), Mac OS X (Lion ...

  8. Android中下载、安装和卸载(原)

    应用场景:在检查版本更新的时候经常需要从服务器端下载然后安装到手机中 使用工具: XUtils,这个开源的框架真的是需要花大把时间去阅读和理解的,十分有用的,on the way ! fighting ...

  9. MySQL下载、安装及启动

    介绍 Mysql是最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的RDBMS(Relational Database Management System:关系数据库管理系统)应用软件之 ...

  10. MongoDB的下载与安装

      MongoDB的下载与安装 一.简介 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案.MongoDB 是一个介于关系 ...

随机推荐

  1. 【Hive】元数据库部署的三种方式和选择【metaStore server】

    一.Derby 元数据使用之前,要在hive目录下执行schematool命令,进行初始化设置 bin/schematool -dbType derby -initSchema 启动hive后,可以用 ...

  2. 最小化安装debian10&gnome最小化安装

    直到后面配置网络源之前都是断网安装,因为debian security好像总是要去总源找点东西,所以即便你选择国内源甚至不选择网络源安装,依然会莫名 的失败. I. 最小化安装debian10(用ro ...

  3. [js函数] storageManager

    import _get from 'lodash.get'; import _set from 'lodash.set'; import _debounce from 'lodash.debounce ...

  4. jmeter使用Java开发自定义函数

    一.前置条件(对jmeter进行二次开发) 本篇通过抽象类AbstractFunction来实现: 1.JMeter提供了接口给用户进行二次开发,其中接口可通过引入 ApacheJMeter_comp ...

  5. 第12周 预习、实验与作业:Java并发编程

    以前你编写的Java程序同时能做几件事情?有几个执行流程?main方法执行完,整个程序一定会退出吗? 最多只能做一件事 函数按着顺序执行,函数内按着语句执行.可以有多个可以有一个. 不一定.因为Mai ...

  6. pytest_runtest_makereport 获取pytest的测试结果和caseid

    目的: 自动获取pytest case执行结果和caseid 存为变量,后续可以和case管理工具集成 @pytest.hookimpl(hookwrapper=True, tryfirst=True ...

  7. office365启动突然提示注册表错误,无法打开“规则”配置的解决方案

    感觉目前网上的资料,暂无清晰的解答,根据现象分析是outlook的原始邮件文件即psd文件中的规则相关字段存在问题,导致outlook无法打开. 因此网上的各种答疑如重装,调整注册表等等措施都是无效的 ...

  8. C语言学习--文件操作--文件流指针--打开文件

    当打开一个文件时, 系统会返回一个结构体, 这个结构体有对此文件操作的所有信息 调用fopen时,系统返回这个结构体的地址 FILE *p = fopen("a.txt") 打开一 ...

  9. mysql主从备份双机热备实现方法

    1.环境准备 主服务器(master):192.168.1.1 从服务器(slave):192.168.1.2 要求主从服务器mysql版本相同且大于3.23 2.主服务器 2.1创建同步用户 cre ...

  10. node.js 新手快速入门

    我当初学的时候,是在大大们的指导下开始学习的,用了3天搞定大大们给的任务.下面我就把这个经历分享出来,让大家借鉴一下.欢迎吐槽~~ 任务如下: 根据Node js 开发入门教程第五章的一个使用node ...