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. 调度器30—调度相关结构体—p->flags

    一.PF_EXITING 1. 赋值路径 各驱动和内核机制中直接调用 SYSCALL_DEFINE1(exit, int, error_code) //exit.c do_exit(code); // ...

  2. AXI VALID READY 握手机制

    1. VAILD 和READY 传输方向 2. VAILD 和READY依赖关系 前面说到AXI的五个通道是独立的,但通道间必须保持一定的约定关系:写回复必须在一次写事务的最后一个写数据之后读数据必须 ...

  3. Scrapy之Request函数回调未执行 Filtered offsite request to 'XXX'

    在爬取免费代理ip室发现,第一页爬取之后后续的多页爬取没有被解析.在查看调试信息时发现显示 Filtered offsite request to 'www.kuaidaili.com',经网上查找先 ...

  4. ESXI密码正确无法登录

    场景描述: 今天新安装了一个VMware ESXi 6.5的系统,密码仍然用的习惯采用的密码.但在使用中,无论是使用vSphere Client连接,还是在vCenter Server中添加这台ESX ...

  5. flannel提供的3种后端实现

    UDP(flanneld封装和解封装UDP) 实现原理 缺点(性能最差) UDP模式,封装和解封装的对象是三层IP包,提供三层的Overlay网络,是Flannel最早支持的一种方式,也是性能最差的一 ...

  6. Linux 文件编码操作enca[适用Mac]

    查看文件编码: enca file.csv 修改文件编码 enca -x UTF-8 file.csv

  7. 【视频】R语言生存分析原理与晚期肺癌患者分析案例|数据分享|附代码数据

    原文链接:http://tecdat.cn/?p=10278 最近我们被客户要求撰写关于生存分析的研究报告,包括一些图形和统计输出. 生存分析(也称为工程中的可靠性分析)的目标是在协变量和事件时间之间 ...

  8. ES得分

    一.概念 1.ES主要用于搜索 2.搜索要把更有相关性的结果展示出来 3.对一个文档评分,相关性越大,评分越高 4.打分的本质是排序 二.评分规则 1.ES5之前,默认评分规则是TF-IDF,这是信息 ...

  9. [CQOI2006]凸多边形 /【模板】半平面交

    洛谷 题意:逆时针给出\(n(n<=10)\)个凸多边形的顶点坐标,求它们交的面积. 学长博客,计算几何知识全面 半平面交问题详细讲解 其他模板题推荐 [ICPC2020 WF] Domes [ ...

  10. php redis使用 常用方法 | Windows环境下安装Redis | Windows下php安装redis扩展（详解版）

    redis可视化工具:http://www.treesoft.cn/dms.html #php redis使用 常用方法 https://www.cnblogs.com/mg007/p/1043107 ...