wordpress 图片 分离网站优化快照

bicheng/2025/10/13 17:13:38/文章来源:
wordpress 图片 分离,网站优化快照,网页设计欣赏网页设计模板,网络营销与策划实务antv L7结合高德地图使用 一、设置底图二 、添加antv L7 中要使用的dome1. 安装L7 依赖2. 使用的dome 、以下使用的是浮动功能3. 运行后显示 自定义样式修改1. 设置整个中国地图浮动起来 自定义标注点1. 静态标注点2. 动态标注点#xff08;点位置需要自己改#xff09;3. 完… antv L7结合高德地图使用 一、设置底图二 、添加antv L7 中要使用的dome1. 安装L7 依赖2. 使用的dome 、以下使用的是浮动功能3. 运行后显示 自定义样式修改1. 设置整个中国地图浮动起来 自定义标注点1. 静态标注点2. 动态标注点点位置需要自己改3. 完整代码 官网文档 一、设置底图 // 引入高德数据可视化api2.0 import AMapLoader from amap/amap-jsapi-loader;// 初始化地图数据this.$nextTick(() {AMapLoader.load({key: xxxx, // 申请好的Web端开发者Key首次调用 load 时必填 这里的key要和使用功能权限一致才行version: 2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [],Loca: { // 是否加载 Loca 缺省不加载version: 2.0.0 // Loca 版本缺省 1.3.2},}).then((AMap) {initMap(AMap)//掉用 antv L7方法}).catch(e {console.log(e);})})二 、添加antv L7 中要使用的dome 1. 安装L7 依赖 npm install --save antv/l7 // 安装第三方底图依赖 npm install --save antv/l7-maps2. 使用的dome 、以下使用的是浮动功能 function initMap(AMap) {// 全局加载高德地图APIconst map new AMap.Map(container, {viewMode: 3D,mapStyle: amap://styles/darkblue,center: [121.435159, 31.256971],zoom: 14.89,minZoom: 10});const scene new Scene({id: container,map: new GaodeMap({mapInstance: map})});scene.on(loaded, () {let lineDown,lineUp,textLayer;fetch(https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json).then(res res.json()).then(data {const texts [];data.features.map(option {const { name, center } option.properties;const [lng, lat] center;texts.push({ name, lng, lat });return ;});textLayer new PointLayer({ zIndex: 2 }).source(texts, {parser: {type: json,x: lng,y: lat}}).shape(name, text).size(14).color(#0ff).style({textAnchor: center, // 文本相对锚点的位置 center|left|right|top|bottom|top-leftspacing: 2, // 字符间距padding: [1, 1], // 文本包围盒 padding [水平垂直]影响碰撞检测结果避免相邻文本靠的太近stroke: #0ff, // 描边颜色strokeWidth: 0.2, // 描边宽度raisingHeight: 200000 150000 10000,textAllowOverlap: true});scene.addLayer(textLayer);lineDown new LineLayer().source(data).shape(line).color(#0DCCFF).size(1).style({raisingHeight: 200000});lineUp new LineLayer({ zIndex: 1 }).source(data).shape(line).color(#0DCCFF).size(1).style({raisingHeight: 200000 150000});scene.addLayer(lineDown);scene.addLayer(lineUp);return ;});fetch(https://gw.alipayobjects.com/os/bmw-prod/d434cac3-124e-4922-8eed-ccde01674cd3.json).then(res res.json()).then(data {const lineLayer new LineLayer().source(data).shape(wall).size(150000).style({heightfixed: true,opacity: 0.6,sourceColor: #0DCCFF,targetColor: rbga(255,255,255, 0)});scene.addLayer(lineLayer);const provincelayer new PolygonLayer({}).source(data).size(150000).shape(extrude).color(#0DCCFF).active({color: rgb(100,230,255)}).style({heightfixed: true,pickLight: true,raisingHeight: 200000,opacity: 0.8});scene.addLayer(provincelayer);provincelayer.on(mousemove, () {provincelayer.style({raisingHeight: 200000 100000});lineDown.style({raisingHeight: 200000 100000});lineUp.style({raisingHeight: 200000 150000 100000});textLayer.style({raisingHeight: 200000 150000 10000 100000});});provincelayer.on(unmousemove, () {provincelayer.style({raisingHeight: 200000});lineDown.style({raisingHeight: 200000});lineUp.style({raisingHeight: 200000 150000});textLayer.style({raisingHeight: 200000 150000 10000});});return ;});return ;}); }3. 运行后显示 自定义样式修改 1. 设置整个中国地图浮动起来 先更改地图json文件 https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json 运行后因为我没有高亮部分数据所以没有高亮谁有能提供的话非常感谢 自定义标注点 1. 静态标注点 fetch(https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json).then(res res.json()).then(data {data.features data.features.filter(item {return item.properties.capacity 800;});const pointLayer new PointLayer({}).source(data).shape(circle).size(capacity, [0, 16]).color(capacity, [#34B6B7,#4AC5AF,#5FD3A6,#7BE39E,#A1EDB8,#CEF8D6]).active(true).style({opacity: 0.5,strokeWidth: 0});scene.addLayer(pointLayer);});2. 动态标注点点位置需要自己改 //动图scene.on(loaded, () {fetch(https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv).then((res) res.text()).then((data) {const pointLayer new PointLayer({}).source(data, {parser: {type: csv,x: Longitude,y: Latitude,},}).shape(circle).active(true).animate(true).size(56).color(#4cfd47);scene.addLayer(pointLayer);});});3. 完整代码 templatediv idcontainer/div /template script // 引入高德数据可视化api2.0 import AMapLoader from amap/amap-jsapi-loader; import { Scene, PolygonLayer, LineLayer } from antv/l7; // import { PointLayer } from antv/l7; import { GaodeMap } from antv/l7-maps;function initMap(map) {const scene new Scene({id: container,map: new GaodeMap({mapInstance: map,}),});//动图scene.on(loaded, () {fetch(https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv).then((res) res.text()).then((data) {const pointLayer new PointLayer({}).source(data, {parser: {type: csv,x: Longitude,y: Latitude,},}).shape(circle).active(true).animate(true).size(56).color(#4cfd47);scene.addLayer(pointLayer);});});//静图scene.on(loaded, () {let lineDown, lineUp;// fetch(// https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json// // ../../../555555.json// )// .then((res) res.json())// .then((data) {// const texts [];// data.features.map((option) {// const { name, center } option.properties;// const [lng, lat] center;// texts.push({ name, lng, lat });// return ;// });// textLayer new PointLayer({ zIndex: 2 })// .source(texts, {// parser: {// type: json,// x: lng,// y: lat,// },// })// .shape(name, text)// .size(14)// .color(#0ff)// .style({// textAnchor: center, // 文本相对锚点的位置 center|left|right|top|bottom|top-left// spacing: 2, // 字符间距// padding: [1, 1], // 文本包围盒 padding [水平垂直]影响碰撞检测结果避免相邻文本靠的太近// stroke: #0ff, // 描边颜色// strokeWidth: 0.2, // 描边宽度// raisingHeight: 200000 150000 10000,// textAllowOverlap: true,// });// scene.addLayer(textLayer);// lineDown new LineLayer()// .source(data)// .shape(line)// .color(#0DCCFF)// .size(1)// .style({// raisingHeight: 200000,// });// lineUp new LineLayer({ zIndex: 1 })// .source(data)// .shape(line)// .color(#0DCCFF)// .size(1)// .style({// raisingHeight: 200000 150000,// });// scene.addLayer(lineDown);// scene.addLayer(lineUp);// return ;// });// 自定义标注点fetch(https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json).then((res) res.json()).then((data) {data.features data.features.filter((item) {return item.properties.capacity 800;});const pointLayer new PointLayer({}).source(data).shape(circle).size(capacity, [0, 16]).color(capacity, [#34B6B7,#4AC5AF,#5FD3A6,#7BE39E,#A1EDB8,#CEF8D6,]).active(true).style({opacity: 0.5,strokeWidth: 0,});scene.addLayer(pointLayer);});//阴影范围-样式设置fetch(https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json).then((res) res.json()).then((data) {const lineLayer new LineLayer().source(data).shape(wall).size(150000).style({heightfixed: true,opacity: 0.9,sourceColor: #0DCCFF,targetColor: rbga(255,255,255, 0),});scene.addLayer(lineLayer);const provincelayer new PolygonLayer({}).source(data).size(150000).shape(extrude).color(#0DCCFF).active({color: rgb(100,230,255),}).style({heightfixed: true,pickLight: true,raisingHeight: 20000,opacity: 0.3,});scene.addLayer(provincelayer);provincelayer.on(mousemove, () {provincelayer.style({raisingHeight: 20000 10000,});lineDown.style({raisingHeight: 20000 10000,});lineUp.style({raisingHeight: 20000 15000 10000,});});provincelayer.on(unmousemove, () {provincelayer.style({raisingHeight: 20000,});lineDown.style({raisingHeight: 20000,});lineUp.style({raisingHeight: 20000 15000,});});return ;});return ;}); }export default {name: map-view,mounted() {this.$nextTick(() {AMapLoader.load({key: , // 申请好的Web端开发者Key首次调用 load 时必填version: 2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [],Loca: {// 是否加载 Loca 缺省不加载version: 2.0.0, // Loca 版本缺省 1.3.2},}).then((AMap) {// 全局加载高德地图APIconst map new AMap.Map(container, {viewMode: 3D,// pitch: -45, // 设置地图倾斜角度为 -45 度bearing: 0, // 设置地图的旋转角度为 0 度mapStyle: amap://styles/darkblue,center: [121.435159, 31.256971],zoom: 5,minZoom: 5,});initMap(map);}).catch((e) {console.log(e);});});},methods: {}, }; /script style scoped #container {width: 100vw;height: 100vh;background-color: black; } /style

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

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

相关文章

如何建立公司网站网页水果网站源码

环境: Unbuntu 22.04 问题描述: Ubuntu上如何部署Nginx? 解决方案: 在Ubuntu上部署Nginx是一个相对简单的过程,以下是详细的步骤指南。我们将涵盖安装Nginx、启动服务、配置防火墙以及验证安装是否成功。 1. 更新…

广州代做网站怎么提高自己网站的流量

行为型模式-状态模式 8.7状态模式8.7.1概念8.7.2场景8.7.3优势 / 劣势8.7.4状态模式可分为8.7.5状态模式8.7.6实战8.7.6.1题目描述8.7.6.2输入描述8.7.6.3输出描述8.7.6.4代码 8.7.7总结 8.7状态模式 8.7.1概念 ​ 状态模式是指对象在运行时可以根据内部状态的不同而改变它们…

国内最好的搜索引擎长沙网站关键词seo

文章目录 0. 前言1. 无痛入门1.1 飞书创建群聊机器人1.2 Webhook 请求示例1.3 设置安全策略 2. 实战3. 总结3.1 使用体验3.2 深入使用建议 先进团队用飞书,先进飞书群聊有...... 0. 前言 科技蓬勃发展的今天,我们可以轻松拥有属于自己/团队的机器人。日…

做网站网页尺寸是多少无锡网站制作那些

原文地址: https://debezium.io/blog/2019/02/19/reliable-microservices-data-exchange-with-the-outbox-pattern/ 欢迎关注留言,我是收集整理小能手,工具翻译,仅供参考,笔芯笔芯. 使用发件箱模式进行可靠的微服务数…

可信的移动网站建设wordpress积分商城插件

新能源场站和区域电网作为复杂且具有动态特性的大规模电力系统,需要实时仿真测试来验证其性能、稳定性和响应能力。在这种背景下,多核并行仿真运算显得尤为重要。多核并行仿真能够同时处理电力系统的复杂模型,加速仿真过程,实现接…

网站建设与设计饰品中小学生做的网站

在IDEA中,如果控制台输出的中文字符显示为乱码,可能是因为控制台的编码设置不正确。你可以尝试以下方法来解决此问题: 方法1:更改IDEA控制台编码 打开IDEA的设置:File -> Settings(Windows/Linux&…

昆山做网站多少钱网站开发vs2013

拷贝构造函数是一种特殊的构造函数,它在创建对象时,是使用同一类中之前创建的对象来初始化新创建的对象。拷贝构造函数通常用于:通过使用另一个同类型的对象来初始化新创建的对象。复制对象把它作为参数传递给函数。复制对象,并从…

免费建网站讨论aws配置wordpress

华为二面!!!被问常用API,这也太偏门了吧,我秀了一波hhhh~常用API一、API概述二、Scanner类代码三、Random类代码四、* ArrayList类**存储基本数据类型**代码五、匿名对象昨天我去了华为面试,问我常用API,我以为我被搞到…

珠江新城网站建设店铺设计软件

winreg模块 进入系统注册表的方法多种多样,最常见的就是运行窗口输入命令“regedit”,即可进入注册表,而Python的winreg模块可以对注册表进行一系列操作 "winreg"中的各个常量 注册表地址(HKEY_ )常量 winreg.HKEY_CLASSES_ROOT #存储应用和shell的信息 winreg…

卡盟网站建设公司中企动力科技股份有限公司是国企吗

目录: Java中的关键字 static关键字final关键字Java中的权限修饰符代码块 构造代码块静态代码块接口 接口的介绍接口的定义和特点接口的成员特点接口的案例接口中成员方法的特点枚举随堂小记 继承方法重写抽象类模板设计模式staticfinal权限修饰符接口回顾上午内容…

Godaddy优惠码网站怎么做的婚庆企业网站建设

实现思路: 在按钮上绑定一个点击事件,默认是true;在export default { }中注册变量给卡片标签用v-if判断是否要显示卡片,ture则显示;在卡片里面写好你想要展示的数据;给卡片添加一个取消按钮,绑…

营销型网站建设设计服务公司文化墙创意设计

Geekbench 6 是一款跨平台的系统性能测试软件,可以对处理器和内存等硬件进行评测,并提供了单核和多核两种测试模式。该软件适用于 Windows、macOS、Linux 和 iOS 等多种操作系统平台。 Geekbench 6 测试可以帮助用户快速准确地了解自己设备的性能表现&am…

制作公司网站视频四川省建设厅官方网站三内人员

通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax加载数据了。 方法一: 局部刷…

导航网站优化茂名网站建设培训

⭐️dijkstra 介绍(想看的可以看) Dijkstra算法( /ˈdaɪkstrəz/ DYKE-str z)是一种用于找到加权图中的节点之间的最短路径的算法,该加权图可以表示例如道路网络。它是由计算机科学家Edsger W. Dijkstra于1956年出版…

wordpress vps建站沈阳微信网站建设

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 正文开始前给大家推荐个网站,前些天发现了一个巨牛的人工智能学…

怎么做带后台的网站学畅留学招聘网站开发主管

xxxx 不在 sudoers 文件中。此事将被报告。 在Ubuntu中,可以通过将用户添加到sudo组来为其提供sudo(超级用户)权限。 要添加sudo权限,按照以下步骤操作: 打开终端(CtrlAltT)。 输入以下命令并…

东莞企业网站费用加强网站建设考察交流

1 平台介绍 Davinci 是一个 DVaaS(Data Visualization as a Service)平台解决方案,面向业务人员/数据工程师/数据分析师/数据科学家,致力于提供一站式数据可视化解决方案。既可作为公有云/私有云独立部署使用,也可作为…

建设简单网站cms网站模板 数据采集

朋友们、伙计们,我们又见面了,本专栏是关于各种算法的解析,如果看完之后对你有一定的启发,那么请留下你的三连,祝大家心想事成! C 语 言 专 栏:C语言:从入门到精通 数据结构专栏&…

中博建设集团有限公司网站wordpress支持

前言 由于兼容性问题,使得我们若想用较新版本的 PyTorch,通过 GPU 方式训练模型,也得更换较新版本得 CUDA 工具包。然而 CUDA 的版本又与电脑显卡的驱动程序版本关联,如果是低版本的显卡驱动程序安装 CUDA11 及以上肯定会失败。 比…