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. Jmeter 请求或响应中文乱码

    1.首先检查 请求编码和后台接受编码是否一致,如果在查看结果树中 请求的中文不是乱码 而添加到后台程序是乱码 一般都是请求和接受编码不一致造成的 2.如果请求是get 请求中有中文 Content e ...

  2. Spring Boot应用启动

    1.Eclipse 中启动Spring Boot应用 右键应用程序启动类, Run As Java Application 2.maven 命令: mvn spring-boot:run 在应用程序启 ...

  3. 链路状态通告类型知识学习总结，LSA(Link State Advertisement)

    链路状态通告类型知识总结,LSA(Link State Advertisement) 一.相关解释,个人相关看法: OSPF是通过LSA数据报文来联系关联路由器,交换信息,同步数据,在此基础上,各路由 ...

  4. unity Android 可后台替换图片

    using System.Collections; using System.Collections.Generic; using System.IO; using UnityEngine; usin ...

  5. VMware Fusion Pro 13.0.0 最新序列号【转】

    Fusion简介 VMware Fusion是最好的Windows-to-Mac解决方案,是任何平台上最强大的应用开发和测试工具. Fusion 13支持macOS 13.0,为开发者.IT管理员和普 ...

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

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

  7. CSC落榜

    2021年5月31日21:00点,CSC公布结果,未通过.看到这,我感觉空气瞬间凝固,窒息,那一瞬间我无比平静,我以为我会哭,但是,却泣不成声,脑中第一时间想到得是,如何面对认识得人,全世界感觉都知道 ...

  8. cmake 设置属性INTERFACE_INCLUDE_DIRECTORIES，则其它库可以直接 target_link_libraries?

    rs项目改为cpm下载 项目  leveldb 和 basiccache, basiccache依赖 leveldb,下载都是在主项目中, 设置 INTERFACE_INCLUDE_DIRECTORI ...

  9. HTML学习笔记1----HTML是什么

    随笔记录方便自己和同路人查阅. #------------------------------------------------我是可耻的分割线--------------------------- ...

  10. 3.Linux安装docker

    Docker作为一个软件集装箱化平台,可以让开发者构建应用程序时,将它与其依赖环境一起打包到一个容器中,然后很容易地发布和应用到任意平台中. 进入docker官网找到安装文档 https://docs ...