wordpress 图片 分离网站优化快照
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,一经查实,立即删除!