maptalks / maptalks.js Goto Github PK

View Code? Open in Web Editor NEW

4.2K 148.0 497.0 16.44 MB

A light and plugable JavaScript library for integrated 2D/3D maps.

Home Page: https://maptalks.org

License: BSD 3-Clause "New" or "Revised" License

JavaScript 99.33% CSS 0.40% HTML 0.27%

javascript maps map gis maptalks

maptalks.js's Introduction

A light JavaScript library to create integrated 2D/3D maps.

2D/3D: Integrated 2D/3D maps.
Open and pluggable: Easy to extend with techs you may love as plugins.
Performant: Can smoothly render tens of thousands of geometries.
Simple: Extremely easy to learn and use.
Feature Packed: Essential features for most mapping needs.
SSR: Server-Side Rendering

The Story

maptalks.js was born for a map-centric project to help YUM! China (the most successful food chain in China) manage and analyze spatial data all over the country for choosing locations of new KFC and PizzaHut restaurants. After verified in many projects of government depts and enterprises, we are glad to open source it, and hoping it can help you deliver better mapping projects.

20220116_213033.mp4

Resources

Supported Enviroments

Modern browsers and IE9+ (only IE11 for 3D features)
Mobile browsers
Node >= 4.x (for Server-Side Rendering)
Electron

maptalks is well tested against IE9, IE10, IE11, Firefox and Chrome by more than 1.6K test cases running on CI services.

Install

Standalone file

Download the lastest release and load it in your HTML page like:

<link href="path/to/maptalks.css" rel="stylesheet" type="text/css" />
<script src="path/to/maptalks.min.js" type="text/javascript"></script>

CDN Just include this in your html:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.css">
<script src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>

npm install maptalks --save

Plugin Development

It's easy and joyful to write plugins for maptalks, please check out the tutorials and begin to develop your own. And you are welcome to share your work with us.

Contributing

We warmly welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.

Contributing Guide

Please read our contributing guide to learn about our development process, how to propose fixes and improvements, and how to test your changes to maptalks.

Acknowledgments

Maptalks is built on the shoulders of giants. Please refer to ACKNOWLEDGEMENT for details.

maptalks.js's People

Contributors

Stargazers

Watchers

Forkers

brucin wsw0108 qiyexue leegle footprint4me fxkulou dlsyaim simpleyong sharksevenro tianpinganer gistalks zhouyunqing liqiao6884 lovyinglog z0630 ferlycreator diggingsteve chengcanmm77 872409 maurojr ezamlee happyport edisonqkj awesome-javascript salimedia deyihu lionsole quyang-cd pick12 waluoo phoxiao a382695908 ertian osub jslibrarydirectory ailiner webwangjin userya wkke thinklib jiuxs33 jerry-goodboy dut3062796s geolinked shanligang ming1zhou88 signhuwei whiteares wuqingman michael-laoyu radi2015 hqdmyjsw 978650866 hi-noikiy supercube1 alex2wong liwanchong04719 yim-sekny acbiggun jeryhu2 dxeg home201448 bongocode gcl962464 exlimit zhigliu sxyseo gpsbird a873054267 diycp chenyuan8059 jiangfei1 ev71 zmm623 chaipat-ncm reyadrahman wuli-zhang daodaoliang i-spark lidi100 vincentchen moliangwang liusong1220 from1900 wangmd jackyped qvqll yoyo-wu98 fav 9i-zytk exploitd zhujingcheng newsnode frong0824 jy4618272 jkloop45 xinqbll001 kallr bayberryan neoayi

maptalks.js's Issues

长度测量工具的修改

Transferred from: #79

修改长度测量工具

ui window show or hide with animation

I suggest that the infoWindow can hide or show with animation optionally.It will be an amasing effect in displaying gis data.

zoomBackground对非TileLayer的影响

如DynamicLayer

指定用dom渲染，zoom变化时，DynamicLayer显示和上一个zoom的重叠；
指定用canvas渲染，没有这个问题；

另外，如果在构造map时设置zoomBackground的值为false，则用dom渲染时，不会重叠，但是过渡过程中有明显重叠。

implements custom marker type in marker symbol

Transferred from: #66

{
"markerType": function() {
1. return a svg path
2. paiting on canvas
}
}

implements SVG+IMG mode for map

Transferred from: #65

地图目前以Canvas实现为主, 但在一些特殊场景下, 例如高分辨率(大屏)时, Canvas无法胜任, 故为map提供SVG+IMG模式.

VectorLayer采用SVG实现, TileLayer采用IMG实现, 除了IE8-用VML外, 和IE8-的实现基本相同.

cartooCSS中支持的样式示例

Transferred from: #19

//图片标注
var icon_img = {

"marker-placement":"point", //point | line | interior

"marker-file"   : "bus.png",
//设定marker-file后, 只有下面的属性起作用
"marker-width"  : 20,
"marker-height" : 20,
"marker-opacity": 1,

//两个cartocss里没有的扩展属性, 用来标注相对中心点的像素距离
"marker-dx"     : 0, //<-------
"marker-dy"     : 0  //<-------

};

//矢量样式, 但优先级比marker-file要低
var icon_vector = {

"marker-placement":"point", //point | line | interior

//marker-type中定义了若干cartoCSS中没有的属性值
"marker-type": "ellipse", //<----- ellipse | arrow | triangle | square等,默认ellipse
"marker-opacity": 1,
"marker-fill": "#ff0000",
"marker-fill-opacity": 1,
"marker-line-color": "#0000ff",
"marker-line-width": 1,
"marker-line-opacity": 1,
"marker-width": 30,
"marker-height": 30,

"marker-dx": 0,
"marker-dy": 0

};

//文字标注的所有属性
var icon_text = {

"text-placement"    : "point", // point | vertex | line | interior

"text-name"         : "文本标注：[marker_name]",
"text-face-name"    : "arial",
"text-size"         : 12,
"text-fill"         : "#550033",
"text-opacity"      : 1,
"text-halo-fill"  : "#fff",
"text-halo-radius": 0,

"text-dx"           : 0,
"text-dy"           : 0,

"text-horizontal-alignment" : "middle", //left | middle | right | auto
"text-vertical-alignment"   : "middle",   // top | middle | bottom | auto
"text-align"                : "left" //left | right | center | auto

};

//线样式
var line = {

"line-pattern-file" : "line-pattern.png",
"line-color"        : "#f00",
"line-width"        : 5,
"line-opacity"      : 1,
"line-join"         : "miter", //round bevel
"line-cap"          : "round", //butt square
"line-dasharray"    : [20, 5, 20]

};

//填充样式
var polygon = {

"polygon-pattern-file"  : "polygon-pattern.png",
"polygon-fill"          : "#f00",
"polygon-opacity"       : 1

};

Geometry在Edit状态下, setSymbol不生效

geometry.fromJSON转化会丢失id属性

如题。
测试的geometry为label，json字符串由label.toJSON()获得
json片段：
feature:{
crs: Object
geometry: Object
id: "NWP_LABEL_0"
properties: Object
type: "Feature"
}
现象，fromJSON后，label中无_id,故无法通过label.getId获取之前设置的id

实现marker的bounce功能

调用的时候, marker会蹦达一下, 调用方法:

marker.bounce({
  'dx' : 0,
  'dy' : 10,
  'duration' : 300
});

geometry remove后地图上图形依然存在

如题。

包含地图底图的截图出错

如题。
截图服务返回信息如下：{"success":false,"error":"Cannot call method 'isLoaded' of undefined"}

Resolve memory leak on node

Added as a bookmark for future.

reference:
http://www.alexkras.com/simple-guide-to-finding-a-javascript-memory-leak-in-node-js/

鼠标事件containerPoint不正确

测试页面:

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Maptalks Quick Start</title>
    <script type="text/javascript" src="maptalks.js"></script>
</head>
<body>
<div style="width:800px;height:600px;" id="map"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

UIComponent上增加是否是全局唯一UI的option

改在UIComponent中处理全局唯一的相关逻辑

geometry与map 之间事件冲突

现象：geometry的{'draggable' ：true},点击geometry，map的拖动事件就无效了，
只有拖动geometry之后，才能恢复map的drag事件。应该是mousedown的事件冲突了。
也即是当geometry设置 dragable，当用户click geometry但是不进行后续的拖动，即可触发该bug。

说明：该问题出现在events重构之前的代码（重构之后的代码暂测试）

实现地图的键盘操作

+ : 地图放大
- : 地图缩小
方向键: 按方向移图

dist/maptalks.js编码是ANSI，应该是UTF-8

虽然此ANSI编码的文件在UTF-8环境下，使用其中的中文资源没有问题

增强Control.Button的事件回调参数

Transferred from: #59

增强Control.Button的事件回调函数的参数
目前click,mousedown等事件回调函数只返回了mouseevent, 改为和map, geometry的事件回调函数统一起来
{
"target": 发起事件的button对象,
"type":"mousedown"/"click"/"touchend",
"domEvent":mouseEvent
}

image marker变更图片后不显示

Transferred from: #64

image marker变更图片后不显示，点击图片所在位置，能看到变更后的图片，mouseup后图片隐藏。
测试地址：http://localhost:20000/examples/geometry/marker/picture_marker.html

关于CurveLine的一些bug

1，arrow方向不太正确；
2，截图中arrow没有出现。

增加addGeometry(geometry, true)的spec测试

addGeometry后, 测试地图是否根据加入的图形坐标, 自动定位到正确的中心点上

FeatureQuery,TopoQuery, DynamicLayer等依赖服务的类提取为增强包

Transferred from: #36

考虑将FeatureQuery,TopoQuery, DynamicLayer, map的snap方法等需要调用后台服务的类和方法从引擎核心库中独立出来做成maptalks的增强包.

@MapTalks/talkers

增强包暂名为: maptalks.service.js/maptalks.service.min.js

js文件的命名规则:
product-name.plugin-ver.sion.filetype.js
参考:
http://stackoverflow.com/questions/7273316/what-is-the-javascript-filename-naming-convention

内容空白
面标注和点标注会消失

var layer = new maptalks.VectorLayer('v');
layer.addGeometry(markers); //image markers
layer.hide();

map.addLayer(layer);

//Error here, markers无法正常显示
layer.show();

类层级调整

Transferred from: #25

类层级调整

maptalks

    .Map
    .Layer
    .Geometry
        .Marker
        .Point
        .Polyline
        .Polygon
        .MultiPoint
        .MultiPolyline
        .MultiPolygon
        .Circle
        .Ellipse
        .Rectangle
        .Sector
        .Vector
    .Control
        .Attribution
        .Nav
        .Scale
        .Zoom
        .Toolbar
        .Panel
        .Button 
        .InfoWindow
        .Label
        .Menu
    .Handler
       .Drag
       .Touch
    .Tool
        .ComputeAreaTool
        .DistanceTool
        .DrawTool
    .Utility
        .GeoUtils
        .SimplifyUtil
        .Util
        .DomUtil
        .Browser
        .Class
        .Event
        .Support
    .Render
        .xxxxx
    .Query
        .RemoteQuery
        .SpatialFilter

增加地址/坐标解析/反解析工具类: GeoCoder类

Transferred from: #8

对主流的GeoCoding服务做一下包装, 能够通过GeoCoder查询地址对应的坐标.

统一各主流GeoCoding服务的API接口
用服务的官方API接口调用服务
参数中指定调用哪个GeoCoding服务.

Label截图在mac os下文字异常

如题：
label以及由label构建的table调用在mac os上部署的截图服务，生成的图片中字符异常，导致
界面布局错乱。如下图：

实现动画接口

Transferred from: #76

设计一套简单易用的动画接口, 方便用户实现动画功能.
动画涵盖

图形的位置改变动画
图形的形状变化动画
图形的样式变化动画(例如颜色的渐变)

UI上交互事件被阻止无法响应

如题。

markerFile的symbol中如果没有设定markerWidth或markerHeight, markerExtent的高宽都是0

例如:

{
   'markerFile' : 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI0NiIgd2lkdGg9IjMyIiB2aWV3Qm94PSIwIDAgMTYgMjMiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiID48ZGVmcz48L2RlZnM+IDxwYXRoICBmaWxsPSIjREUzMzMzIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTggMjNsMCAwIDAgMCAwIDAgMCAwIDAgMGMtNCwtNSAtOCwtMTAgLTgsLTE0IDAsLTUgNCwtOSA4LC05bDAgMCAwIDBjNCwwIDgsNCA4LDkgMCw0IC00LDkgLTgsMTR6IE01LDkgYTMsMyAwLDEsMCwwLC0wLjlaIj48L3BhdGg+IDwvc3ZnPg=='
}

计算出来的markerExtent高宽都是0

label的boxTextAlign功能问题

该功能应该是label中的文字相对label居左、居中、居右。
目前的效果是label的box针对center居左、居中、居右。

svg图片放大后截图变模糊

@brucin

原因:
node中用svg2img转化svg时, 只能按照svg原始大小转化为1:1的png后再放大, 导致模糊.

SVG缩放是解决该问题的关键点, 可参考 https://www.douban.com/note/271260021/

SVG的缩放需要按照比例来设置svg的width/height和viewBox来进行, 这个解析比较复杂且容易出错, 暂时没有找到没有很好的解决方案

实际应用中可以通过调整svg的原始大小来解决模糊问题, 只要把svg图片原始大小尽量做大一点, 就不会模糊了.

label.setTextAlign的调整

Transferred from: #85

label.setTextAlign方法

作用：
调整文字和边框的相对位置

问题：

textAilgn起作用的限定条件比较多，某个条件不满足时textAlign不起作用，使用过程中容易引起困惑。
计算偏移量是采用boxMinWidth作为参考标准，但boxMinWidth并不是box的实际宽度，可能会在某些情况下位置不准确
symbol中也存在类似的textHorizontalAlignment属性，可以考虑改名为boxTextAlign

调整目标：
让textAlign的作用更加明确更符合直觉

替换原始的ext js的favicon.ico
用自定义logo替换原始logo
更扁平化风格的图标替换原始图标, 例如类, 属性, 包等
将原背景色替换为更符合maptalks主题的背景色

参考:

deftjs/DeftJS#108
deftjs/DeftJS@d7f0395

另面积测算工具需要考虑CRS是否包含面积计算公式.

menu根据所处的屏幕位置向合理的方向展开

如题，例如：默认menu向下展开，但是当目标位置在屏幕最下方，应该向上展开。

maptalks / maptalks.js Goto Github PK

maptalks.js's Introduction

The Story

Resources

Supported Enviroments

Install

Plugin Development

Contributing

Contributing Guide

Acknowledgments

maptalks.js's People

Contributors

Stargazers

Watchers

Forkers

maptalks.js's Issues

类层级调整

maptalks

Recommend Projects

Recommend Topics

Recommend Org