GIS工具maptalks开发手册(二)01——渲染点、文字和图片

news2025/1/11 8:18:26

GIS工具maptalks开发手册(二)01——渲染点、文字和图片

1、渲染点

效果

在这里插入图片描述

2、渲染文字

效果

在这里插入图片描述

3、渲染图片

效果

在这里插入图片描述

4.1、html单页面

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图形 - Marker</title>
<style type="text/css">
    html,
    body {
        margin: 0px;
        height: 100%;
        width: 100%;
    }

    .container {
        width: 900px;
        height: 500px;
        margin: 50px;
    }
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>

<body>

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

    <script>
        var map = new maptalks.Map('map', {
            center: [-0.113049, 51.498568],
            zoom: 14,
            baseLayer: new maptalks.TileLayer('base', {
                urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c', 'd'],
                attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
        });

        var point = new maptalks.Marker(
            [-0.113049, 51.498568],
            {
                visible: true, // 可见的
                editable: true, // 可编辑的
                cursor: 'pointer', // 光标
                shadowBlur: 0, // 阴影模糊
                shadowColor: 'black', // 阴影颜色
                draggable: false, // 拖动
                dragShadow: false, // display a shadow during dragging (拖动时显示阴影)
                drawOnAxis: null,  // force dragging stick on a axis, can be: x, y (轴上的力拖动杆，可以是：x，y)
                
                //  symbol-记号样式
                // 1、渲染文本
                // symbol: {
                // 文本呈现的样式，默认是: monospace, 当你设置 textFont时会覆盖这个属性
                //     'textFaceName': 'sans-serif',  // 文本面名称
                //     'textName': 'MapTalks', // 文本名称
                //     'textFill': '#34495e',  // 文本填充色（字体颜色） 
               //       textLineSpacing: 1,  // 行距
                //     'textHorizontalAlignment': 'right',  // 文本水平对齐方式
                // 文本标签与marker的距离，也就是与打点的位置的距离
                 //    'textDx': 20,
                //     'textSize': 40  // 文本大小
                // }

                // 2、渲染图片
                // symbol: {
                //     'markerFile': 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 标记图片文件地址
                //     'markerWidth': 58,// 标记宽度
                //     'markerHeight': 80, // 标记高度
                //     'markerDx': 0, // 标记X轴
                //     'markerDy': 0, // 标记y轴
                //     'markerOpacity': 1 // 标记不透明度
                // }
            }
        );

        new maptalks.VectorLayer('vector', point).addTo(map);

    </script>
</body>

</html>

效果-渲染图片格式

在这里插入图片描述

代码

index.html

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图形样式 - 图片标注</title>
<style type="text/css">
  html,
  body {
    margin: 0px;
    height: 100%;
    width: 100%;
  }

  .container {
    width: 900px;
    height: 500px;
    margin: 50px;
  }
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>

<body>

  <div id="map" class="container"></div>
  <script>
    var map = new maptalks.Map('map', {
      center: [-0.113049, 51.49856],
      zoom: 14,
      baseLayer: new maptalks.TileLayer('base', {
        urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c', 'd'],
        attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
      })
    });

    var center = map.getCenter();

    var layer = new maptalks.VectorLayer('vector').addTo(map);

    var marker1 = new maptalks.Marker(
      center.sub(0.009, 0),
      {
        'symbol': {
          'markerFile': './01.svg',
          'markerWidth': 300,
          'markerHeight': 400,
          'markerDx': 0,
          'markerDy': 0,
          'markerOpacity': 1
        }
      }
    ).addTo(layer);

  </script>
</body>

</html>

获取中心点-getCenter()

https://maptalks.org/maptalks.js/api/0.x/Map.html#getCenter

设置中心点-setCenter(coordinate)

https://maptalks.org/maptalks.js/api/0.x/Map.html#setCenter

4.2、vue单页面

index.vue

<template>
  <!-- maptalks渲染线 -->
  <div id="map" class="container"></div>
</template>
<script>
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
export default {
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
       var map = new maptalks.Map('map', {
            center: [-0.113049, 51.498568],
            zoom: 14,
            baseLayer: new maptalks.TileLayer('base', {
                urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c', 'd'],
                attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
        });

        var point = new maptalks.Marker(
            [-0.113049, 51.498568],
            {
                visible: true, // 可见的
                editable: true, // 可编辑的
                cursor: 'pointer', // 光标
                shadowBlur: 0, // 阴影模糊
                shadowColor: 'black', // 阴影颜色
                draggable: false, // 拖动
                dragShadow: false, // display a shadow during dragging (拖动时显示阴影)
                drawOnAxis: null,  // force dragging stick on a axis, can be: x, y (轴上的力拖动杆，可以是：x，y)
                
                //  symbol-记号样式
                // 1、渲染文本
                // symbol: {
                //     'textFaceName': 'sans-serif',  // 文本面名称
                //     'textName': 'MapTalks', // 文本名称
                //     'textFill': '#34495e',  // 文本填充颜色
                //     'textHorizontalAlignment': 'right',  // 文本水平对齐方式
                //     'textSize': 40  // 文本大小
                // }

                // 2、渲染图片
                // symbol: {
                //     'markerFile': 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 标记图片文件地址
                //     'markerWidth': 58,// 标记宽度
                //     'markerHeight': 80, // 标记高度
                //     'markerDx': 0, // 标记X轴
                //     'markerDy': 0, // 标记y轴
                //     'markerOpacity': 1 // 标记不透明度
                // }
            }
        );

        new maptalks.VectorLayer('vector', point).addTo(map);
    },
  },
};
</script>
<style lang="scss">
html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
}
.container {
  width: 1200px;
  height: 700px;
  margin: 50px;
}
</style>

5、vue版-图片

5.1、渲染图片-铺满视野

铺满api

extent: map.getExtent(),  //  图片大小：铺满地图视野

注意：

url链接如果出现跨域，请求头需要进行配置

src/utils/request.js

'Access-Control-Allow-Origin': '*'  // 允许任何域访问

请求响应头

// request拦截器
service.interceptors.request.use(config => {
  // config.mode = 'no-cors',
  config.headers['Access-Control-Allow-Origin']= '*'
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际
    try {
      config.headers['orgId'] = store.getters.userInfo.orgId//
    } catch (e) {
      alert('当前orgId不存在，请重新登录！')
      //TODO handle the exception
    }


  }
  return config
}, error => {
  console.log(error)
  Promise.reject(error)
})

后端-Response Headers响应头也需要进行处理：允许任何域访问

在这里插入图片描述

效果1

在这里插入图片描述

index.vue

<template>
  <!-- maptalks初始化 -->
  <div id="map" class="container"></div>
</template>
<script>
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
export default {
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    // 初始化
    init() {
      const map = new maptalks.Map("map", {
        // 默认中心点点位
        center: [116.3972282409668, 39.90960456049752],
        // 缩放层级
        zoom: 14,
        // 倾斜度
        pitch: 50,
        // 轴承
        // bearing: 90,
        // 最小缩放层级
        minZoom: 1,
        // 最大缩放层级
        maxZoom: 22,
        // baseLayer 表示基础图层，它可以添加多个,逗号隔开
        baseLayer: new maptalks.TileLayer("base", {
          //   // 出现跨域问题，要设置这个，一定是undefined
          //   crossOrigin: undefined,
          // 电子地图图层
          urlTemplate:
            "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png", // 初始常规主题
          // urlTemplate:"https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}", // 彩色主题
          // urlTemplate: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',// 黑色主题
          subdomains: ["a", "b", "c", "d"],
          attribution:
            '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>',
        }),
      });
      console.log("map: ", map);
       let layerImg = new maptalks.ImageLayer("images", [
        {
          url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',  // 饿了么图片
        //   url: this.$store.state.user.imgValue,
          extent: map.getExtent(), // 图片大小
          // extent: [114.40184088740602, 37.002608169667695, 114.4028259092072, 37.00181114116637],  // 左上  右下
          opacity: 0.5, // 不透明度
        },
      ]);
      layerImg.addTo(map);

    },
  },
};
</script>
<style lang="scss">
html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
}
.container {
  width: 1200px;
  height: 700px;
  margin: 50px;
}
</style>
5.2、渲染图片-限制图片渲染大小

和地图层级结合使用，可以获取坐标数据

效果-限制图片大小

在这里插入图片描述

index.vue

<template>
  <!-- maptalks初始化 -->
  <div id="map" class="container"></div>
</template>
<script>
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
export default {
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      const map = new maptalks.Map("map", {
        // 默认中心点点位
        center: [116.3972282409668, 39.90960456049752],
        // 缩放层级
        zoom: 18,
        // 倾斜度
        // pitch: 50,
        // 轴承
        // bearing: 90,
        // 最小缩放层级
        minZoom: 1,
        // 最大缩放层级
        maxZoom: 22,
        // baseLayer 表示基础图层，它可以添加多个,逗号隔开
        baseLayer: new maptalks.TileLayer("base", {
          //   // 出现跨域问题，要设置这个，一定是undefined
          //   crossOrigin: undefined,
          // 电子地图图层
          urlTemplate:
            "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png", // 初始常规主题
          // urlTemplate:"https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}", // 彩色主题
          // urlTemplate: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',// 黑色主题
          subdomains: ["a", "b", "c", "d"],
          attribution:
            '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>',
        }),
      });
      console.log("map: ", map);

let  extent = map.getExtent();

      // console.log(extent);
      // console.log(extent.xmax); // -0.0012234410202154322
      extent.xmax =
        extent.xmax -
        0.0009520458196448089 -
        0.0013465535936347806 -
        0.0013146624997943945;
      extent.xmin = extent.xmin + 0.0008865151057761977 - 0.0013146624997943945;
      extent.ymax = extent.ymax - 0.0013408400707248802 - 0.0013465535936347806;
      extent.ymin = extent.ymin + 0.0013416043410643397;

       let layerImg = new maptalks.ImageLayer("images", [
        {
          url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',  // 饿了么图片
        //   url: this.$store.state.user.imgValue,
          extent: extent,
          // extent: [114.40184088740602, 37.002608169667695, 114.4028259092072, 37.00181114116637],  // 左上  右下
          opacity: 0.5,
        },
      ]);
      layerImg.addTo(map);

    },
  },
};
</script>
<style lang="scss">
html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
}
.container {
  width: 1200px;
  height: 700px;
  margin: 50px;
}
</style>

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

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

相关文章

【人工智能与机器学习】——K近邻（KNN）与模型选择（学习笔记）

【人工智能与机器学习】——K近邻（KNN）与模型选择（学习笔记）

&#x1f4d6; 前言&#xff1a;人们常常说&#xff0c;“近朱者赤&#xff0c;近墨者黑“&#xff0c;”物以类聚&#xff0c;人以群分”&#xff0c;&#xff0c;我们想考察一个家庭的经济状况&#xff0c;可以问问住在哪里。如果家住在广州珠江新城&#xff0c;经济状况一定…
阅读更多...
Unity的机器学习工具包ML-Agents

Unity的机器学习工具包ML-Agents

官方&#xff1a;Unity ML-Agents深度学习工具包&#xff5c;Unity中国官网 | Unity中国官网 Github下载链接&#xff1a;https://github.com/Unity-Technologies/ml-agents ML-Agents是游戏引擎Unity3D中的一个插件&#xff0c;也就是说&#xff0c;这个软件的主业是用来开发…
阅读更多...
初始操作系统之进程

初始操作系统之进程

文章目录一、什么是操作系统二、进程PCB内存管理一、什么是操作系统 操作系统*&#xff08;英语&#xff1a;Operating System&#xff0c;缩写&#xff1a;OS&#xff09;*是一组主管并控制计算机操作、运用和运行硬件、软件资源和提供公共服务来组织用户交互的相互关联的系统…
阅读更多...
Mybatis的BindingException异常产生原因及解决办法详解

Mybatis的BindingException异常产生原因及解决办法详解

一. 问题背景 今天壹哥在讲完MyBatis后&#xff0c;有学生在进行代码练习时遇到了下面这样的一个异常&#xff0c;先上图&#xff1a; 二. 问题分析 1. 原因分析 首先我们看到&#xff0c;这里抛出的异常是org.apache.ibatis.binding.BindingException&#xff0c;接着再看异…
阅读更多...
老板说我最近飘了，都敢用 MySQL 实现分布式锁了

老板说我最近飘了，都敢用 MySQL 实现分布式锁了

​ 编辑切换为居中 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 以前参加过一个库存系统&#xff0c;由于其业务复杂性&#xff0c;搞了很多个应用来支撑。这样的话一份库存数据就有可能同时有多个应用来修改库存数据。比如说&#xff0c;有定时任务…
阅读更多...
专为医疗领域打造！飞凌嵌入式新一代FDU显控一体机发布

专为医疗领域打造！飞凌嵌入式新一代FDU显控一体机发布

飞凌嵌入式重磅推出一款专为医疗打造的显控一体机——FDU070K02 & FDU101K02。产品采用无外壳设计、支持戴医疗手套触摸&#xff0c;支持双屏同显或异显&#xff0c;兼顾场景灵活性与使用便捷性。 同时飞凌为用户提供开箱即用的硬件和操作系统&#xff0c;极大简化了开发流…
阅读更多...
vue+element模仿电商商城，前后端分离实现，下单微信扫码支付

vue+element模仿电商商城，前后端分离实现，下单微信扫码支付

1.前言 接上一篇《vueelementSpringBootOAuth2Spring SecurityRedismybatis-plusmysqlswagger模仿商城&#xff0c;前后端分离实现》。 上篇文章介绍了&#xff1a; 用户注册用户登录首页商品推荐展览商品搜索商品分类按商品分类预览商品商品详情预览加入购物车 上一篇文章有…
阅读更多...
【使用 BERT 的问答系统】第 5 章 ：BERT模型应用：问答系统

【使用 BERT 的问答系统】第 5 章 ：BERT模型应用：问答系统

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…
阅读更多...
arthars在线诊断

arthars在线诊断

官网地址&#xff1a;https://arthas.aliyun.com/doc/quick-start.html#_6- 1.安装启动 curl -O https://arthas.aliyun.com/arthas-boot.jar java -jar arthas-boot.jar2.选择对应进程编号回车3.watch命令 官网命令文档&#xff1a;https://arthas.aliyun.com/doc/arthas-t…
阅读更多...
[python][学习]循环与嵌套---打印乘法口诀

[python][学习]循环与嵌套---打印乘法口诀

打印乘法口诀表 打印乘法口诀表 按照规律可以直接用一个for循环进行实现 加就是显示字符串&#xff0c;没有加就是直接计算或者显示 for i in range(1,10): print(i,*,1,,i*1,end ) print(i,*,2,,i*2,end ) print(i,*,3,,i*3,end ) print(i,*,4,,i*…
阅读更多...
STC 51单片机50——中断问题演示

STC 51单片机50——中断问题演示

// 功能要求&#xff1a;按下按钮后&#xff0c;Led的状态改变。 #include "reg51.h" sbit LedP1^0; sbit ButtonP3^2; //外中断0对应的引脚 void delay(unsigned char m) { unsigned char i,j,k; for(i0;i<m;i) for(j0;j<250;j) for(k…
阅读更多...
JWT生成tonken验证+AOP拦截验证

JWT生成tonken验证+AOP拦截验证

JSON Web Token&#xff08;JWT&#xff09;是目前都在用的前后分离跨域验证规则。 JWT由3部分组成 Header——头部一般Base64URL编码&#xff0c;作用&#xff1a;声明token类型&#xff0c;声明token使用的加密算法。一般都是使用HMAC-SHA256或者RSA支持很多种算法&#xf…
阅读更多...
岩藻多糖-聚乙二醇-刀豆球蛋白A，ConcanavalinA-PEG-Fucoidan，刀豆球蛋白A-PEG-岩藻多糖

岩藻多糖-聚乙二醇-刀豆球蛋白A，ConcanavalinA-PEG-Fucoidan，刀豆球蛋白A-PEG-岩藻多糖

岩藻多糖-聚乙二醇-刀豆球蛋白A&#xff0c;ConcanavalinA-PEG-Fucoidan&#xff0c;刀豆球蛋白A-PEG-岩藻多糖 中文名称&#xff1a;岩藻多糖-刀豆球蛋白A 英文名称&#xff1a;Fucoidan-ConcanavalinA 别称&#xff1a;刀豆球蛋白A修饰岩藻多糖&#xff0c;ConA-岩藻多糖 …
阅读更多...
分享从零开始学习网络设备配置--任务2.6 避免网络环路

分享从零开始学习网络设备配置--任务2.6 避免网络环路

任务描述 某公司最近由于业务迅速发展和对网络可靠性的要求&#xff0c;使用了两台高性能交换机作为核心交换机&#xff0c;接入层交换机与核心层交换机互联&#xff0c;形成冗余结构&#xff0c;来满足网络的可靠性&#xff0c;达到最佳的工作效率。 生成树技术&#xff08;S…
阅读更多...
在一次又一次的失败中, 我总结了这份万字的《MySQL 性能调优笔记》

在一次又一次的失败中, 我总结了这份万字的《MySQL 性能调优笔记》

MySQL 性能调优学习导图》概要 说明&#xff1a;本文篇幅有限&#xff0c;故只展示部分内容&#xff0c;《MySQL 性能调优学习导图》资料已整理成文档&#xff0c;需要获取的小伙伴可以直接转发关注后私信&#xff08;学习&#xff09;即可获取哦 一、性能监控 1. 使用 show p…
阅读更多...
2022/12/1 结构体

2022/12/1 结构体

结构体 声明结构体&#xff1a; struct 结构体名 例如&#xff1a;struct student 其中&#xff0c;student又称为结构体标记 结构体可以拥有成员&#xff0c;例如&#xff1a; struct student { int num; int score; char name[20] }; 注意&#xff0c;分号不可以少…
阅读更多...
万应低代码11月重点更新内容速递

万应低代码11月重点更新内容速递

速览版 详情版 低代码开发效率升级 1.页面变量支持快速构建 在「数据提交」、「调用逻辑」等存在数据返回的节点中&#xff0c;支持根据其输出的内容去自动创建数据类型相同的变量&#xff0c;并自动建立好映射关系。 ● 【功能上线前】&#xff1a; 需要为每一个输出字…
阅读更多...
Elasticsearch_第一章_ elasticsearch基础

Elasticsearch_第一章_ elasticsearch基础

Elasticsearch_第一章_ elasticsearch基础 – elasticsearch基础 文章目录Elasticsearch_第一章_ elasticsearch基础0.学习目标1.初识elasticsearch1.1.了解ES1.1.1.elasticsearch的作用1.1.2.ELK技术栈1.1.3.elasticsearch和lucene1.1.4.为什么不是其他搜索技术&#xff1f;1…
阅读更多...
企业该如何选择自己合适的云财务软件？

企业该如何选择自己合适的云财务软件？

据相关数据统计&#xff0c;2021年&#xff0c;我国云服务市场规模达274亿美元&#xff08;超1700亿元人民币&#xff09;&#xff0c;预计到2026年将增长至850亿美元&#xff08;约5400亿元人民币&#xff09;。可见&#xff0c;云服务市场的发展之迅。对于企业而言&#xff0…
阅读更多...
python入门项目03：完成黑心资本家发工资的程序

python入门项目03：完成黑心资本家发工资的程序

本题来源于黑马程序员b站视频&#xff0c;如有侵权&#xff0c;请联系删除。 import random #总金额10000 all_money10000 n0#记录发放工资的人 #发工资 for i in range(1,21):#20个员工jixiaorandom.randint(1,10)#生成一个1&#xff0c;10的随机数if jixiao<5:print(f员工…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023