OpenLayers入门①（引入的是一个高德地图）

 OpenLayers入门（一） - 知乎

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.导入ol依赖 --><link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"><script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script><style>.ol-zoomslider {top: 7.5em;}</style>
</head><body><!-- 2.设置地图的挂载点 --><div id="map"></div><script>// 3.初始化一个高德图层const gaode = new ol.layer.Tile({title: "高德地图",source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',wrapX: false})});// 4.初始化openlayer地图const map = new ol.Map({// 将初始化的地图设置到id为map的DOM元素上target: "map",// 设置图层layers: [gaode],view: new ol.View({center: [114.30, 30.50],// 设置地图放大级别zoom: 14,projection: "EPSG:4326"})})// 视图跳转控件const ZoomToExtent = new ol.control.ZoomToExtent({extent: [126.4, 45.7, 126.7, 45.9]})map.addControl(ZoomToExtent)// 放大缩小控件const zoomslider = new ol.control.ZoomSlider();map.addControl(zoomslider)// 全屏控件const fullScreen = new ol.control.FullScreen();map.addControl(fullScreen);// 1.通用样式信息和几何信息构建点要素// 几何const point = new ol.Feature({geometry: new ol.geom.Point([126.5350, 45.8021])});let style = new ol.style.Style({// image属性设置点要素的样式image: new ol.style.Circle({// radius设置点的半径 单位degreeradius: 10,fill: new ol.style.Fill({color: "#ff2d51"}),stroke:new ol.style.Stroke({width:2,color:"#333"})})})point.setStyle(style);// 2.将要素添加到矢量数据源let source = new ol.source.Vector({features: [point]})// 3.将矢量数据源添加到矢量图层let layer = new ol.layer.Vector({source})// 4.添加矢量图层到地图容器map.addLayer(layer)</script></body></html>

geojson

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.导入ol依赖 --><link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"><script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script><style>.ol-zoomslider {top: 7.5em;}</style>
</head><body><!-- 2.设置地图的挂载点 --><div id="map"></div><script>// 3.初始化一个高德图层const gaode = new ol.layer.Tile({title: "高德地图",source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',wrapX: false})});// 4.初始化openlayer地图const map = new ol.Map({// 将初始化的地图设置到id为map的DOM元素上target: "map",// 设置图层layers: [gaode],view: new ol.View({center: [114.30, 30.50],// 设置地图放大级别zoom: 14,projection: "EPSG:4326"})})// 视图跳转控件const ZoomToExtent = new ol.control.ZoomToExtent({extent: [126.4, 45.7, 126.7, 45.9]})map.addControl(ZoomToExtent)// 放大缩小控件const zoomslider = new ol.control.ZoomSlider();map.addControl(zoomslider)// 全屏控件const fullScreen = new ol.control.FullScreen();map.addControl(fullScreen);// 创建geojson数据var data = {type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Point",coordinates:[114.30,30.50]}}]}// 将数据添加到矢量数据源中var source = new ol.source.Vector({features:new ol.format.GeoJSON().readFeatures(data)})// 设置矢量图层var layer = new ol.layer.Vector({source})const style = new ol.style.Style({image:new ol.style.Circle({radius:10,fill:new ol.style.Fill({color:"#ff2d51"}),stroke:new ol.style.Stroke({color:"#333"})})})layer.setStyle(style)// 添加矢量图层到地图容器map.addLayer(layer)</script></body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.导入ol依赖 --><link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"><script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
</head><body><!-- 2.设置地图的挂载点 --><div id="map"></div><script>// 3.初始化一个高德图层const gaode = new ol.layer.Tile({title: "高德地图",source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',wrapX: false})});// 4.初始化openlayer地图const map = new ol.Map({// 将初始化的地图设置到id为map的DOM元素上target: "map",// 设置图层layers: [gaode],view: new ol.View({center: [114.30, 30.50],// 设置地图放大级别zoom: 14,projection: "EPSG:4326"})})// 区域要素// 设置line要素的geojson数据var data = {type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"LineString",coordinates:[[114.30,30.50],[116,30.31]]}},{type:"Feature",geometry:{type:"Polygon",coordinates:[[[114.30,30.50],[116,30.50],[116,30]]]}}]}// 设置矢量数据源读取数据let source = new ol.source.Vector({features:new ol.format.GeoJSON().readFeatures(data)})// 设置矢量图层let layer = new ol.layer.Vector({source})let style = new ol.style.Style({// stroke线设置样式stroke: new ol.style.Stroke({color:"#ff2d51",width:3}),fill:new ol.style.Fill({color:"rgba(50,50,50,0.3)"})})layer.setStyle(style)// 添加到地图容器map.addLayer(layer)</script></body></html>

加载本地的geojson数据

 

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.导入ol依赖 --><link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"><script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
</head><body><!-- 2.设置地图的挂载点 --><div id="map"></div><script>// 3.初始化一个高德图层const gaode = new ol.layer.Tile({title: "高德地图",source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',wrapX: false})});// 4.初始化openlayer地图const map = new ol.Map({// 将初始化的地图设置到id为map的DOM元素上target: "map",// 设置图层layers: [gaode],view: new ol.View({center: [114.30, 30.50],// 设置地图放大级别zoom: 14,projection: "EPSG:4326"})})// 设置矢量数据源加载geojson数据var source = new ol.source.Vector({url:"./data/map.geojson",format:new ol.format.GeoJSON()})// 设置矢量图层var layer = new ol.layer.Vector({source})const style = new ol.style.Style({image:new ol.style.Circle({radius:8,fill:new ol.style.Fill({color:"#ff2d51"})})})layer.setStyle(style)// mapmap.addLayer(layer)</script></body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.导入ol依赖 --><link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"><script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
</head><body><!-- 2.设置地图的挂载点 --><div id="map"></div><script>// 3.初始化一个高德图层const gaode = new ol.layer.Tile({title: "高德地图",source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',wrapX: false})});// 4.初始化openlayer地图const map = new ol.Map({// 将初始化的地图设置到id为map的DOM元素上target: "map",// 设置图层layers: [gaode],view: new ol.View({center: [114.30, 30.50],// 设置地图放大级别zoom: 4,projection: "EPSG:4326"})})// 加载网络geojson数据const china_source = new ol.source.Vector({url:"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",format:new ol.format.GeoJSON()})const china_layer = new ol.layer.Vector({source:china_source})const china_style = new ol.style.Style({fill:new ol.style.Fill({color:'rgba(50,50,50,0.4)'}),stroke:new ol.style.Stroke({color:"#ff2d5180",width:2})})china_layer.setStyle(china_style)map.addLayer(china_layer)// 湖北const huibei_source = new ol.source.Vector({url:"https://geo.datav.aliyun.com/areas_v3/bound/420000_full.json",format:new ol.format.GeoJSON()})const huibei_layer = new ol.layer.Vector({source:huibei_source})const huibei_style = new ol.style.Style({fill:new ol.style.Fill({color:'#333'}),})huibei_layer.setStyle(huibei_style)map.addLayer(huibei_layer)</script></body></html>

地图事件及漫游

地图事件及漫游-CSDN直播

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.导入ol依赖 --><link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"><script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script><style>.btn{position: fixed;z-index: 100;top: 30px;right: 50px;}</style>
</head><body><!-- 2.设置地图的挂载点 --><div id="map"></div><button class="btn">复位地图</button><script>// 3.初始化一个高德图层const gaode = new ol.layer.Tile({title: "高德地图",source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',wrapX: false})});// 4.初始化openlayer地图const map = new ol.Map({// 将初始化的地图设置到id为map的DOM元素上target: "map",// 设置图层layers: [gaode],view: new ol.View({center: [114.30, 30.50],// 设置地图放大级别zoom: 14,projection: "EPSG:4326"})})// source-layervar source = new ol.source.Vector({})var layer = new ol.layer.Vector({source})map.addLayer(layer);// 给地图绑定一个点击事件map.on("click", (evt) => {var { coordinate } = evt;console.log(coordinate)var point = new ol.Feature({geometry: new ol.geom.Point(coordinate)})source.addFeature(point);// 实现飞行视角--漫游const view = map.getView();view.animate({center: coordinate})})// 复位按钮var btn = document.querySelector(".btn");btn.onclick = function () {map.getView().animate({center:[114.30,30.50],zoom:6,duration:3000})}</script></body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/5412.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用RTSP将笔记本摄像头的视频流推到开发板

使用RTSP将笔记本摄像头的视频流推到开发板

一、在Windows端安装ffmpeg 1. 下载ffmpeg:下载ffmpeg 解压ffmpeg-master-latest-win64-gpl.zip bin 目录下是 dll 动态库 , 以及 可执行文件 ;将 3 33 个可执行文件拷贝到 " C:\Windows " 目录下 ,将所有的 " .dll " 动态库拷贝到 " C:\Windows\Sy…
阅读更多...
期权交割对股市是好是坏？2024期权交割日一览表

期权交割对股市是好是坏？2024期权交割日一览表

期权交割是指期权买方在期权合约到期日或之前行使期权&#xff0c;卖方履行义务&#xff0c;按照约定的价格和数量与期权卖方进行标的物的买卖或现金结算的过程。 交割方式 期权交割可以分为实物交割和现金交割&#xff0c;具体取决于合约规定。 实物交割 实物交割是指期权买…
阅读更多...
【深度学习基础（1）】什么是深度学习，深度学习与机器学习的区别、深度学习基本原理，深度学习的进展和未来

【深度学习基础（1）】什么是深度学习，深度学习与机器学习的区别、深度学习基本原理，深度学习的进展和未来

文章目录 一. 深度学习概念二. 深度学习与机器学习的区别三. 理解深度学习的工作原理1. 每层的转换进行权重参数化2. 怎么衡量神经网络的质量3. 怎么减小损失值 四. 深度学习已取得的进展五. 人工智能的未来 - 不要太过焦虑跟不上 一. 深度学习概念 先放一张图来理解下人工智能…
阅读更多...
Vue阶段练习：初始化渲染、获取焦点

Vue阶段练习：初始化渲染、获取焦点

阶段练习主要承接Vue 生命周期-CSDN博客 &#xff0c;学习完该部分内容后&#xff0c;进行自我检测&#xff0c;每个练习主要分为效果显示、需求分析、静态代码、完整代码、总结 四个部分&#xff0c;效果显示和准备代码已给出&#xff0c;我们需要完成“完整代码”部分。 练习…
阅读更多...
MySQL__三大日志

MySQL__三大日志

文章目录 &#x1f60a; 作者&#xff1a;Lion J &#x1f496; 主页&#xff1a; https://blog.csdn.net/weixin_69252724 &#x1f389; 主题&#xff1a;Redis__三大日志 ⏱️ 创作时间&#xff1a;2024年04月30日 ———————————————— 对于MySQL来说, 有…
阅读更多...
Gateway Predicate断言(谓词)

Gateway Predicate断言(谓词)

是什么 Spring Cloud Gateway匹配路由作为Spring WebFlux HandlerMapping基础设施的一部分。 Spring Cloud Gateway包含许多内置的路由谓词工厂。 所有这些谓词都匹配HTTP请求的不同属性。 您可以使用逻辑 and 语句来联合收割机组合多个路由谓词工厂。 Predicate就是为了实现一…
阅读更多...
基于EBAZ4205矿板的图像处理：03使用VIO调试输出HDMI视频图像

基于EBAZ4205矿板的图像处理：03使用VIO调试输出HDMI视频图像

基于EBAZ4205矿板的图像处理&#xff1a;03使用VIO调试输出HDMI视频图像 在zynq调试时VIO是真的方便&#xff0c;特此写一篇博客记录一下 先看效果 项目简介 下面是我的BD设计&#xff0c;vtc用于生成时序&#xff0c;注意&#xff0c;2021.2的vivado的vtcIP是v6.2版本&…
阅读更多...
Stm32CubeMX 为 stm32mp135d 添加 adc

Stm32CubeMX 为 stm32mp135d 添加 adc

Stm32CubeMX 为 stm32mp135d 添加 adc 一、启用设备1. adc 设备添加2. adc 引脚配置2. adc 时钟配置 二、 生成代码1. optee 配置 adc 时钟和安全验证2. linux adc 设备 dts 配置 bringup 可参考&#xff1a; Stm32CubeMX 生成设备树 一、启用设备 1. adc 设备添加 启用adc设…
阅读更多...
JAVA前端快速入门基础_javascript入门(03)

JAVA前端快速入门基础_javascript入门(03)

写在前面:本文用于快速学会简易的JS&#xff0c;仅做扫盲和参考作用 本章节主要介绍JS的事件监听 1.什么是事件监听 事件:是指发生在HTML端的事件&#xff0c;主要指以下几种。 1.按钮被点击 2.鼠标移动到元素上 3.按到了键盘 事件监听:当触发了事件时&#xff0c;JS会执行相…
阅读更多...
vue3、element-plus递归实现动态菜单

vue3、element-plus递归实现动态菜单

vue3、element-plus递归实现动态菜单 使用场景&#xff1a;动态菜单为什么使用递归递归在动态菜单中的实现 使用场景&#xff1a;动态菜单 动态菜单是指菜单项的数量和层次结构可能是动态的&#xff0c;通常来自后端或用户输入。这些菜单的特征包括&#xff1a; 多层嵌套&…
阅读更多...
【webrtc】MessageHandler 3： 基于线程的消息处理：以sctp测试为例

【webrtc】MessageHandler 3： 基于线程的消息处理：以sctp测试为例

消息处理可以用于模拟发包处理G:\CDN\rtcCli\m98\src\net\dcsctp\socket\dcsctp_socket_network_test.cc 这个实现中，onMessage还是仅对了一种消息进行处理，就是接收则模式下，打印带宽。当然，可能程序有多个消息，分别在不同的onmessage中执行？SctpActor：以一个恒定的速率…
阅读更多...
【大语言模型LLM】-基于ChatGPT搭建客服助手（1）

【大语言模型LLM】-基于ChatGPT搭建客服助手（1）

&#x1f525;博客主页&#xff1a;西瓜WiFi &#x1f3a5;系列专栏&#xff1a;《大语言模型》 很多非常有趣的模型&#xff0c;值得收藏&#xff0c;满足大家的收集癖&#xff01; 如果觉得有用&#xff0c;请三连&#x1f44d;⭐❤️&#xff0c;谢谢&#xff01; 长期不…
阅读更多...
利用大型语言模型提升个性化推荐的异构知识融合方法

利用大型语言模型提升个性化推荐的异构知识融合方法

在推荐系统中&#xff0c;分析和挖掘用户行为是至关重要的&#xff0c;尤其是在美团外卖这样的平台上&#xff0c;用户行为表现出多样性&#xff0c;包括不同的行为主体&#xff08;如商家和产品&#xff09;、内容&#xff08;如曝光、点击和订单&#xff09;和场景&#xff0…
阅读更多...
C++ 堆结构和堆排序（从顶到底/从底到顶的大顶堆）+ 优化

C++ 堆结构和堆排序（从顶到底/从底到顶的大顶堆）+ 优化

一、堆结构和堆排序 &#xff08;1&#xff09;heapInsert&#xff0c;向上调整大根堆 和 heapify&#xff0c;向下调整大根堆 // i位置的数&#xff0c;向上调整大根堆 // arr[i] x&#xff0c;x是新来的&#xff01;往上看&#xff0c;直到不比父亲大&#xff0c;或者来到0…
阅读更多...
使用Gradio搭建聊天UI实现质谱AI智能问答

使用Gradio搭建聊天UI实现质谱AI智能问答

一、调用智谱 AI API 1、获取api_key 智谱AI开放平台网址&#xff1a; https://open.bigmodel.cn/overview 2、安装库pip install zhipuai 3、执行一下代码&#xff0c;调用质谱api进行问答 from zhipuai import ZhipuAIclient ZhipuAI(api_key"xxxxx") # 填写…
阅读更多...
短视频交友系统搭建重点，会用到哪些三方服务？

短视频交友系统搭建重点，会用到哪些三方服务？

在搭建短视频交友系统时&#xff0c;为了确保系统的稳定性、安全性和用户体验&#xff0c;通常需要用到多种第三方服务。以下是搭建短视频交友系统时可能用到的关键第三方服务&#xff1a; 云服务提供商&#xff1a;如阿里云、腾讯云等&#xff0c;提供稳定、可扩展的服务器资源…
阅读更多...
如何消除SmartScreen“未知发布者”警告？

如何消除SmartScreen“未知发布者”警告？

在互联网高速发展、应用程序遍地开花的当今时代&#xff0c;作为企业&#xff0c;我们通常会开发自己的应用程序来开展自己的业务&#xff0c;以便与客户建立更深入的联系。不少应用程序所有者可能会面临一个难题&#xff0c;那就是用户下载时&#xff0c;系统会弹出SmartScree…
阅读更多...
nuxt3项目服务端bulid后在本地浏览的3种方式（nuxi preview、Node.js Server、PM2）

nuxt3项目服务端bulid后在本地浏览的3种方式（nuxi preview、Node.js Server、PM2）

你也许会问有了开发调试本地浏览&#xff0c;为什么还要服务端构建之后在本地浏览&#xff1f; 举个简单例子 在 Nuxt 3 服务端打包中&#xff0c;由于运行环境不同&#xff0c;无法直接访问 process 对象。服务端打包通常是在 Node.js 环境中进行的&#xff0c;而 process 对象…
阅读更多...
设计模式之代理模式ProxyPattern（六）

设计模式之代理模式ProxyPattern（六）

一、代理模式介绍 1、什么是代理模式&#xff1f; 代理模式是一种结构型设计模式&#xff0c;它允许为其他对象提供一个替代品或占位符&#xff0c;以控制对这个对象的访问。 2、代理模式的角色构成 抽象主题&#xff08;Subject&#xff09;&#xff1a;定义了真实主题和代…
阅读更多...
记一次使用Notepad++正则表达式批量替换SQL语句

记一次使用Notepad++正则表达式批量替换SQL语句

目录 一、需求二、解决方案三、正则解析 一、需求 存在如下SQL建表脚本&#xff1a; CREATE TABLE "BUSINESS_GOODS" ( "ID" VARCHAR(32) NOT NULL, "GOODS_CODE" VARCHAR(50), "GOODS_NAME" VARCHAR(100), ... NOT CLUSTER PRIMARY…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023