Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下

关闭

搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
提交资源 / 链接反馈

openlayers
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://openlayers.org
GitHub:https://github.com/openlayers/openlayers
网站描述:一个高性能,功能丰富的库
访问官网 GitHub

OpenLayers是一个高性能,功能丰富的库,用于在Web上创建交互式地图。它可以显示任何网页上任何来源加载的地图图块,矢量数据和标记。开发OpenLayers是为了进一步使用各种地理信息。

npm安装

npm install ol

引入文件

<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>

创建dom节点

<div id="map" class="map"></div>

定义样式

必须要定义好长和宽 才能正常使用

<style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>

初始化

var map = new ol.Map({
    controls: ol.control.defaults({
        attribution: false,
        rotate: false,
        zoom: false
    }),
    target: 'container',
    layers: [
        new ol.layer.Tile({
            // source: new ol.source.OSM()  这个使用openstreemap 国内可用,但是无法将国内显示改为英文
            source: new ol.source.TileImage({url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-EN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'}) //谷歌地图支持中国地区显示英文和中文,其他国家显示英文和当地国家语言
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat(centerPoint),
        zoom: 10
    })
});


仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://fly63.com/nav/2703

more>>
相关栏目
SVG.js
包括各种形状、线条、文本、路径等元素
官网 GitHub
d3.js
基于HTML 和 SVG 的 JavaScript 可视化库
官网 GitHub
incubator-echarts
百度团队开发的一款商业级数据图表
官网 GitHub
g2
一套基于可视化编码的图形语法
官网 GitHub
Chartist.js
JavaScript响应式图表库
官网 GitHub
MetricsGraphics.js
一个基于 D3 的简洁的数据图表优化
官网 GitHub
plotly.js
基于d3.js 和stack.gl开源的 JavaScript 图表库
官网 GitHub
js-sequence-diagrams
一款基于 Javascript 的Web绘制时序图的工具
官网 GitHub
C3.js
基于D3.js开发的JavaScript库
官网 GitHub
crossfilter
一个数据计算模型,能够很好地结合DC.JS进行数据解析绘图
官网 GitHub
Processing.js
擅长创建2D和3D图象,可视化数据套件,音频,视频等
官网 GitHub
flowchart.js
基于SVG的流程图插件
官网 GitHub
Velocity.js
一个简单易用、高性能、功能丰富的轻量级JS动画库
官网 GitHub
popmotion.js
一款小巧,灵活的 JavaScript 运动引擎
官网 GitHub
js2flowchart.js
将任何 JavaScript 转换成漂亮的 SVG 流程图的可视化的图表库
点击进入 GitHub
jsplumb
一个开源的流程图或拓扑图绘制工具库(绘制页面链接线)
官网 GitHub
首页 技术导航 在线工具 技术文章 教程资源 AI工具集 前端库/框架 实用工具箱

Copyright © 2018 Web前端开发网提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主。All Rights Reserved. 网站备案号:蜀ICP备13022973号

手机预览